Question

我正在忙于开发HTML5和CSS3中的网站，但我还需要它来支持旧浏览器。它使用了Modernizr库，但这不允许我用CSS2替换某些CSS3元素。

例如：我有一个使用border-radius和box-shadow的div。如果没有检测到CSS3，我想提供一种替代风格，其背景图像由圆角和褪色边框组成。

也许就像在类名中添加扩展名一样：

CSS3 Class - .mainContent
CSS2 Class - .mainContentFlat

Answer 1

我有一个使用的div border-radius和box-shadow

modernizr.js本身不支持这个吗？

假设你有一个div，你想用id =“test”

进行设计

<div id="test">
    Hello HTML5 CSS3
</div>

你可以给这样的CSS。

div#test{
    height: 50px;
    width: 200px;
    border: 1px solid #CCC;
}

.borderradius div#test {
   border-radius: 4px 4px 0 0;
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-topright: 4px;
   -webkit-border-top-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
}
.no-borderradius div#test {
    /*add style rules for css2 here*/
}
.boxshadow div#test {
   box-shadow: #666 1px 1px 1px;
   -moz-box-shadow: #666 1px 1px 1px;
   -webkit-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow div#test {
 /*add style rules for css2 here*/   
}

Answer 2

您必须将css2规则视为“基本”规则，将css3视为“美化”规则。如果它们发生冲突，你可以通过css继承来否定这种效果。所以在你提到的情况下，你会有像

这样的东西

.mainContent {
  background: #fff url(image-with-shadow-and-rounded-corners.png) top left no repeat;
}

.boxshadow.borderradius .mainContent {
  background-image: none; /*take out the background image if support for css3 exists*/
  -moz-border-radius: 5px;
  -wekbkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 5px #000;
  -wekbkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

如果未检测到CSS3的浏览器支持，如何使用CSS2规范？

2 个答案: