Apakah gambar CSS yang tidak digunakan diunduh?

127

Apakah gambar CSS yang tidak digunakan diunduh oleh browser atau diabaikan?

Misalnya. dalam aturan CSS yang tidak cocok dengan elemen apa pun.

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

Atau apakah ini tergantung pada browser?

css

— Alex
sumber

20

+1 untuk pertanyaan menarik

— Jitendra Vyas

89

Ini akan tergantung pada browser, karena itulah cara mereka memutuskan untuk mengimplementasikan spesifikasi, namun dalam pengujian cepat di sini:

Chrome: Tidak
FireFox: Tidak
Safari: Tidak
IE8: Tidak
IE7: Tidak
IE6: Tidak Diketahui (Bisakah seseorang menguji dan mengomentari?)

— Nick Craver
sumber

1

Saya berasumsi bahwa Anda telah menguji pada Windows? Jika Anda ingin menambahkan perbandingan lintas platform maka saya dapat menawarkan bahwa Firefox 3.6.x dan Chrome 5.0.307.11 (Ubuntu 9.10) juga tidak . =)

— David mengatakan mengembalikan Monica

Aha, begitu. Saya pikir itu akan sangat buruk untuk memuat firefox, chrome dan safari, tapi saya tidak akan melewati IE. Apakah hasil ini sama untuk IE 6 dan 7?

— Alex

@ Alex - IE7 Ya, meskipun halaman yang lebih rumit mungkin menipu? IE6 Saya tidak dapat menguji keberadaan saya ... mungkin seseorang di sini dapat dan memperbarui jawaban saya.

— Nick Craver

49

Bisakah saya mengajukan protes terhadap pengujian sesuatu di IE6?

— Dave Markle

2

@Dave: Semuanya harus diuji di IE6 (unFaithful berangkat), jika berjalan dengan benar di sana, dan itu akan di setiap browser terkutuk: P

— N 1.1

13

Tidak, mereka tidak diunduh, setidaknya di Firefox, IE8 dan Chrome.

Cara mudah untuk menguji ini:

<!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>

Jika test.txtdiisi dengan agen pengguna browser, maka gambar diunduh. Ini bukan kasus dalam tes saya.

— Tatu Ulmanen
sumber

9

Tes cepat membuktikannya.

<!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>

Gambar ke-2,, tumblr_kxytwr7YzH1qajh4xo1_500.pngdiunduh tetapi tidak yang lain. Ini terbukti benar di Chrome (Alat pengembang) dan Firefox (Firebug).

— mauris
sumber

8

Firefox dan Chrome (Ubuntu 9.10) tidak mengunduh gambar untuk kelas / id yang tidak diterapkan di DOM.

Ini mungkin tergantung pada platform dan browser.

— David mengatakan mengembalikan Monica
sumber

3

Terkadang, itu tergantung persis apa artinya "tidak digunakan". Browser yang berbeda mendefinisikannya secara berbeda. Misalnya, di Firefox, gaya yang diterapkan pada <noscript>tag dianggap "tidak digunakan" dan karenanya, gambar apa pun tidak akan diunduh.

Chrome 26 (mungkin semua dari mereka, tidak yakin), tidak gambar Download CSS jika mereka diterapkan pada <noscript>elemen, bahkan ketika JS diaktifkan. (Namun tidak jelas bagi saya mengapa, mungkin ini bug?).

Ini tidak men-download gambar CSS diterapkan untuk unsur-unsur dalam satu <noscript>elemen, meskipun. (ini adalah perilaku yang diharapkan, tentu saja).

Contoh:

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>

Dalam hal ini, jika pengguna memiliki JS-diaktifkan, baik always.png dan otherbg.png-download di Chrome. Jika pengguna tidak tidak memiliki JS diaktifkan, maka hanya nojsonly.png download di Chrome.

Saya menggunakan teknik ini untuk mengukur tingkat lalu lintas dari pengguna yang tidak mengaktifkan JS, karena Google Analytics mengecewakan kami di sini. Saya lebih suka menggunakan gambar latar belakang CSS daripada <img...>tag normal , karena saya bekerja di bawah teori (belum diuji) bahwa bot cenderung mengambil gambar CSS daripada <img...>gambar, meninggalkan penghitungan yang lebih akurat untuk pengunjung manusia.

— mkoistinen
sumber

2

Hampir semua browser melakukan pemuatan malas. Jika gambar tidak diperlukan, itu tidak mengunduh. Gunakan pembakar (add-on di Firefox / Chrome) untuk melihat waktu pengambilan sumber daya.

— N 1.1
sumber

0

Menariknya, Chrome (setidaknya) akan mengunduh unused.png dalam contoh berikut:

<!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
sumber

11

Ya, itu karena itu dirujuk. Jadi saya tidak yakin menyebutnya "tidak digunakan" benar-benar valid ..

— NotMe

@ententzel, tolong hapus "tidak digunakan" dari div, ulangi tes dan beri tahu kami hasil Anda.

— Anse