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

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

css

是否下载了未使用的CSS图像？,css,Css,未使用的CSS图像是否由浏览器下载或忽略在CSS规则中，它与任何元素都不匹配 .nothingHasThisClass{background:url(hugefile.png);} 或者这取决于浏览器吗？快速测试证明了这一点 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"><!-- .hasnothing{backgrou

未使用的CSS图像是否由浏览器下载或忽略

在CSS规则中，它与任何元素都不匹配

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

或者这取决于浏览器吗？

快速测试证明了这一点

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

下载了第二幅图像tumblr_kxytwr7YzH1qajh4xo1_500.png，但没有下载另一幅。Chrome（开发者工具）和Firefox（Firebug）都证明了这一点。

不，它们没有下载，至少在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>


.不存在{
背景：url（'index.php？foo'）；
}

如果使用浏览器的用户代理填充了

test.txt

，则会下载图像。在我的任何测试中都不是这样。

Firefox和Chrome（Ubuntu 9.10）不会下载未应用于DOM的类/ID的图像

不过，这可能取决于平台和浏览器。

这将取决于浏览器，因为这是他们决定实施规范的方式，但是在这里的快速测试中：

Chrome:不会
FireFox:不
狩猎：不会
IE8:不
IE7:不
IE6：未知（有人可以测试和评论吗？）

几乎所有浏览器都进行延迟加载。如果不需要映像，则不会下载。使用firebug（Firefox/Chrome中的插件）查看资源的加载时间。

有趣的是，Chrome（至少）将在以下示例中下载unused.png：

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


测试
.未使用{
背景：url（unused.png）不重复；
}
.用过{
背景：url（used.png）；
}
你好，世界

有时，这完全取决于“未使用”的含义。不同的浏览器定义不同。例如，在Firefox中，应用于

标记的样式被视为“未使用”，因此，不会下载任何图像

Chrome 26（可能是全部，不确定），会下载CSS图像，如果它们应用于
元素，即使启用了JS。（我现在还不清楚为什么，也许这是一个bug？）
不过，它不会下载应用于
元素中元素的CSS图像。（当然，这是预期的行为）
例子： CSS:
HTML:

此NOSCRIPT元素的CSS背景图像将始终在Chrome中下载。不会在Firefox中下载除非禁用JS，否则不会在Chrome或其他浏览器中下载此p元素的CSS背景图像
在这种情况下，如果用户启用了JS，则在Chrome中下载always.png和otherbg.png。如果用户未启用JS，则在Chrome中仅下载nojsonly.png

我使用这种技术来测量非JS用户的流量水平，因为Google Analytics在这里让我们失望。我更喜欢使用背景CSS图像，而不是普通的
标记，因为我是根据（未经测试的）理论工作的，即机器人比
图像更不可能抓取CSS图像，从而为人类访问者留下更准确的计数。
我假设您已经在Windows上测试过了？如果您想添加跨平台比较，那么我可以提供Firefox 3.6.x和Chrome 5.0.307.11（Ubuntu 9.10）也没有的功能啊哈，我明白了。我原以为firefox、chrome和safari加载它们会很糟糕，但我不会把它放在IE之前。IE6和IE7的结果是一样的吗？@Alex-IE7是的，尽管更复杂的页面可能会欺骗它？IE6我不能测试我在哪里…也许这里有人可以更新我的答案。我可以抗议在IE6中测试任何东西吗？@Dave:所有东西都应该在IE6中测试（不忠的死者），如果它在那里正确运行，它会在每个该死的浏览器中运行：P+1对于有趣的问题，那是因为它被引用了。所以我不确定称之为“unused”是否真的有效。@eentzel，请从div中删除“unused”，重新进行测试并告诉我们您的结果。
noscript { background-image: url('always.png') 0 0 repeat; } noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }

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