是否下载了未使用的CSS图像

Ale*_*lex 125 css

浏览器下载未使用的CSS图像还是忽略?

例如.在CSS规则中与任何元素都不匹配.

.nothingHasThisClass{background:url(hugefile.png);}
Run Code Online (Sandbox Code Playgroud)

或者这取决于浏览器?

Nic*_*ver 89

这将取决于浏览器,因为它是他们决定实施规范的方式,但是在这里进行快速测试:

  • Chrome:没有
  • FireFox:没有
  • Safari:没有
  • IE8:没有
  • IE7:没有
  • IE6:未知(有人可以测试和评论吗?)

  • 我是否可以针对在IE6中测试任何内容提出抗议? (48认同)
  • @Dave:一切都应该在IE6中测试(unFaithful离开),如果它在那里正确运行,它将在每个该死的浏览器中:P (2认同)

Tat*_*nen 13

不,他们没有下载,至少在Firefox,IE8和Chrome中没有.

一种简单的测试方法:

<!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>
Run Code Online (Sandbox Code Playgroud)

如果test.txt使用浏览器的用户代理填充,则会下载映像.在我的任何测试中都不是这种情况.


mau*_*ris 9

快速测试证明了这一点.

<!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>
Run Code Online (Sandbox Code Playgroud)

第二张图片tumblr_kxytwr7YzH1qajh4xo1_500.png是下载但不是另一张图片.这在Chrome(开发者工具)和Firefox(Firebug)中证明是正确的.


Dav*_*mas 8

Firefox和Chrome(Ubuntu 9.10)不下载未在DOM中应用的类/ ID的图像.

不过,这可能与平台浏览器有关.