浏览器下载未使用的CSS图像还是忽略?
例如.在CSS规则中与任何元素都不匹配.
.nothingHasThisClass{background:url(hugefile.png);}
Run Code Online (Sandbox Code Playgroud)
或者这取决于浏览器?
Nic*_*ver 89
这将取决于浏览器,因为它是他们决定实施规范的方式,但是在这里进行快速测试:
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使用浏览器的用户代理填充,则会下载映像.在我的任何测试中都不是这种情况.
快速测试证明了这一点.
<!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)中证明是正确的.