css - css3のみの要素を表示しますか?

Question

私は css3 を多用するサイトを作成しており、コンテンツの代替バージョンと同様に、古いブラウザーを使用している人々に少しメッセージを送りたいと考えています。私は次のようなことができるかどうか疑問に思っています：

#old {display:-webkit-none;}
#new {display:none; display:-webkit-block;}

#old div が css3 と互換性のないブラウザーでのみ表示されるようにします。

Answer 1

そうですね、CSS3の互換性はブラウザごとに異なります。一部のブラウザはCSS3をサポートしているものもあれば、サポートしていないものもあるように、これは白黒ではありません。ほとんどのブラウザは少なくともCSS3のいくつかの機能を実装していますが、他のブラウザよりも多くの機能を実装しています。CSS3のすべての機能をサポートしているブラウザはないと確信しています。どのブラウザがどの機能をサポートしているかを確認できます：http： //caniuse.com/

Modernizr http://modernizr.com/を使用して、ブラウザーがサポートするCSS3機能に基づいてさまざまなスタイルを使用できます。

たとえば、境界線の半径をサポートしていないブラウザにメッセージを表示したい場合は、次のようにします。

.no-borderradius #old
{
    display: block;
}

Answer 2

IE の条件付きコメントを使用できます。次のように書きます。

<!--[if IE]>
  <style>
    #old {display:none;}
  </style>
<![endif]-->

詳細については、http://www.quirksmode.org/css/condcom.htmlを参照してください。