我正在建立一个使用大量阴影和渐变的网站。我可以通过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中引用。
答案 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方式:)