CSS3のブラウザサポートが検出されない場合はどのようにCSS2仕様を使用しますか？

Question

私はHTML5とCSS3でサイトを開発していますが、古いブラウザもサポートする必要があります。それはModernizrライブラリを利用していますが、これは特定のCSS3要素をCSS2に置き換えることができません。

例：私はborder-radiusとbox-shadowを使用するdivを持っています。 CSS3が検出されない場合は、丸い角とぼやけた罫線で構成された背景イメージを持つ代替スタイルを提供したいと思います。

クラス名に拡張子を追加するような多分何か：

 
CSS3 Class - .mainContent 
CSS2 Class - .mainContentFlat 

Answer 1

私は ボーダー半径の使用だけでなく、ボックスシャドウ

doesnの」を作るdiv要素を持っていますmodernizr.jsはネイティブにこれをサポートしていますか？

はあなたがこのようにCSSを与えることができ、ID = "テスト"

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

とあなたがしたいスタイルのdivを持っていると仮定します。

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