Как использовать спецификацию CSS2, если поддержка браузера не обнаружена для CSS3?

Question

Я занят разработкой сайта на HTML5 и CSS3, но он мне нужен и для поддержки старых браузеров.Он использует библиотеку Modernizr, но это не позволяет мне заменить некоторые элементы CSS3 на CSS2.

Например: у меня есть div, который использует border-radius, а также box-shadow.Если 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;
}