CSS:如果在CSS中声明但后来过度使用了请求的图像?

时间:2010-01-19 16:13:51

标签: css background-image

我正在建立一个使用大量阴影和渐变的网站。我可以通过CSS的box-shadow属性完成很多这方面的工作。

唉,我们仍然支持IE,所以我们需要在这些情况下添加背景图片。

我可能很懒,只是给每个人提供背景图片,但我正在尝试为那些使用现代浏览器的人简化一些事情。理想情况下,我希望这些用户不必请求图像。

所以,如果浏览器支持box shadow(box-shadowSupport),我通过javascript添加一个额外的类,我的CSS最终看起来像这样:

.box {
    background: url('myImage.jpg');
}

.box-shadowSupport {
    background: none;
    [box shadow properties go here] 
}

如果HTML最终看起来像这样:

<div class="box box-shadowSupport"></div>

请求图片吗?或者浏览器是否理解由于第二种样式覆盖背景图像属性而不需要它?

如果请求图片,我需要重新安排我的CSS和javascript,所以不必通过级联覆盖样式,我将不得不换掉这些类,所以第一个甚至没有在HTML中引用。

4 个答案:

答案 0 :(得分:3)

我相信每个网络浏览器都会以自己的方式对待这一点 - 像往常一样:)我的建议是使用像Charles这样的网络代理,如果图像已被请求,请查看。当然,请在不同的浏览器中进行测试。

答案 1 :(得分:2)

您可能需要考虑的是在单独的工作表中定义IE特定样式并使用conditional comments加载它,如下所示:

<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
    type="text/css" media="all" />
<![endif]-->

这只会使用特定于IE的设置加载工作表,您可以使用!important标记覆盖其他类。自IE5以来一直存在条件评论,任何其他浏览器都会忽略上面的块。

答案 2 :(得分:2)

我建议只跳过IE中的阴影。

大多数人只使用一个浏览器,他们不会知道必须有阴影。如果网站在不同的浏览器中看起来不同,只要它们看起来正常(这意味着不是故障),这不是什么大问题。

否则使用if标签即特定的css,你可以用:

在那里做阴影
.box {
    filter: progid: DXImageTransform.Microsoft.dropShadow(
            color=#818181,
            offX=5, offY=5, 
            positive=true);
}

有关see here的更多信息。

答案 3 :(得分:1)

我很确定所有现代浏览器加载'myImage.jpg'。实际上,您提供的代码描述了不使用javascript预加载图像的纯CSS方式:)