Kullanılmayan CSS resimleri indiriliyor mu?

127

Kullanılmayan CSS görüntüleri tarayıcı tarafından indiriliyor mu yoksa yok sayılıyor mu?

Örneğin. herhangi bir öğeyle eşleşmeyen CSS kurallarında.

.nothingHasThisClass{background:url(hugefile.png);}

Yoksa bu tarayıcıya mı bağlı?

css

— Alex
kaynak

20

İlginç soru için +1

— Jitendra Vyas

89

Bu, tarayıcıya bağlı olacaktır, çünkü spesifikasyonu uygulamaya böyle karar verirler, ancak burada hızlı bir testte:

Chrome: Yapmaz
FireFox: mu değil
Safari: Yapmaz
IE8: mu değil
IE7: Yapmıyor
IE6: Bilinmiyor (Biri test edip yorum yapabilir mi?)

— Nick Craver
kaynak

1

Windows üzerinde test ettiğinizi varsayıyorum? Eğer çapraz platform karşılaştırmalar eklemek isterseniz o zaman ben Firefox 3.6.x ve Chrome 5.0.307.11 (Ubuntu 9.10) Ayrıca sunabilir yok . =)

— David, Monica'yı

İşte görüyorum. Firefox, Chrome ve Safari'nin bunları yüklemesinin oldukça zayıf olacağını düşünmüştüm, ancak IE'yi geçmezdim. Bu sonuç IE 6 ve 7 için aynı mı?

— Alex

@Alex - IE7 Evet, ancak daha karmaşık bir sayfa onu kandırabilir mi? IE6 Nerede olduğumu test edemiyorum ... belki buradaki biri cevabımı güncelleyebilir ve güncelleyebilir.

— Nick Craver

49

IE6'da herhangi bir şeyin test edilmesine karşı itirazda bulunabilir miyim?

— Dave Markle

2

@Dave: Her şey IE6'da test edilmeli (sadakatsiz ayrıldı), eğer orada doğru şekilde çalışıyorsa ve her lanet tarayıcıda çalışacak: P

— N 1.1

13

Hayır, en azından Firefox, IE8 ve Chrome'da indirilmezler.

Bunu test etmenin kolay bir yolu:

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
        .nonexistent {
            background: url('index.php?foo');
        }
        </style>
    </head>
    <body>
<?php if(isset($_GET['foo'])) {
    file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
    </body>
</html>

Eğer test.txttarayıcının kullanıcı aracısı ile doldurulur, daha sonra görüntü indirilir. Testlerimin hiçbirinde durum böyle değildi.

— Tatu Ulmanen
kaynak

9

Hızlı bir test bunu kanıtladı.

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css"><!--

.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}

--></style>

</head><body>

<div class="hassomething"></div>

</body></html>

2. resim tumblr_kxytwr7YzH1qajh4xo1_500.pngindirildi, ancak diğeri indirilmedi. Bunun Chrome'da (Geliştirici araçları) ve Firefox'ta (Firebug) doğruluğu kanıtlanmıştır.

— Mauris
kaynak

8

Firefox ve Chrome (Ubuntu 9.10), DOM'da uygulanmayan sınıflar / kimlikler için resim indirmez.

Bu platform, hem olabilir ve olsa, tarayıcı bağımlı.

— David, Monica'yı eski durumuna getir diyor
kaynak

3

Bazen, "kullanılmamış" ın tam olarak ne anlama geldiğine bağlıdır. Farklı tarayıcılar bunu farklı şekilde tanımlar. Örneğin, Firefox'ta <noscript>etikete uygulanan stiller "kullanılmamış" kabul edilir ve bu nedenle hiçbir resim indirilmez.

Krom 26 (muhtemelen hepsi değil tabii), does uygulandıkları takdirde indirme CSS görüntüleri <noscript>JS etkin olsa elemanı. (Bana neden olduğu hemen belli değil, belki de bu bir hata?).

O değil CSS görüntüleri elemanlara uygulanacak indirmek içinde<noscript> olsa da, eleman. (Bu elbette beklenen bir davranıştır).

Misal:

CSS:

noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }

HTML:

<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome.  Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>

Bu durumda, kullanıcının JS özelliği varsa, hem always.png hem de otherbg.png Chrome'a indirilir. Yok kullanıcı ise değil JS sahip etkin, daha sonra sadece nojsonly.png Chrome'da indirilir.

Google Analytics burada başarısız olacağından, JS özellikli olmayan kullanıcıların trafik düzeylerini ölçmek için bu tekniği kullanıyorum. Normal bir <img...>etiket yerine arka plan CSS görüntüsünü kullanmayı tercih ediyorum , çünkü botların bir CSS görüntüsünü yakalama olasılığının bir görüntüye göre daha düşük olduğu <img...>ve ziyaretçiler için daha doğru sayımlar bıraktığı (denenmemiş) teorisi altında çalışıyorum .

— mkoistinen
kaynak

2

Hemen hemen tüm tarayıcılar geç yükleme yapar. Bir görüntü gerekli değilse, indirilmez. Kaynakların yüklenme süresini görmek için firebug (Firefox / Chrome eklentisi) kullanın.

— N 1.1
kaynak

0

İlginç bir şekilde, Chrome (en azından) aşağıdaki örnekte unused.png'yi indirecektir:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
        <style type="text/css">
            .unused {
                background: url(unused.png) no-repeat;
            }
            .used {
                background: url(used.png);
            }
        </style>
    </head>
    <body>
        <div class="unused used">
            hello world
        </div>
    </body>
</html>

— eentzel
kaynak

11

Eh, çünkü referans gösteriliyor. Bu yüzden "kullanılmamış"

— demenin

@eentzel, lütfen div'den "kullanılmayanları" kaldırın, testi tekrar yapın ve sonucunuzu bize bildirin.

— Anse