CSS3 の多くの新機能は、多くのブラウザーでサポートされていないか、十分にサポートされていません。しかし、フロントエンド開発者としては、すべてのブラウザーがそれを完全にサポートするまで待ってから学ぶことはできません。
CSS3 はどのような新機能をもたらしますか?簡単に言えば、CSS3 は、これまで画像やスクリプトを使用する必要があった多くの効果を、わずか数行のコードで実現できます。丸い角、画像の境界線、テキストの影、ボックスの影など。 CSS3 は、フロントエンド開発者の設計プロセスを簡素化するだけでなく、ページの読み込みも高速化します。
この記事では、CSS3 のさまざまな新機能を包括的に見てみましょう。以前の CSS チュートリアルとヒントもぜひチェックしてください。
ほとんどの CSS3 機能を使用するには、元のプロパティとともにメーカー固有の拡張機能を使用する必要があります。その理由は、これまでほとんどのブラウザーが一部の CSS3 プロパティのみをサポートしていたためです。そして、残念ながら、一部のプロパティは最終的に W3C によって推奨されない可能性があるため、ブラウザ固有のプロパティを指定して標準プロパティと区別することが重要です (冗長なスタイルがオーバーライドする場合は、標準に準拠したプロパティを使用します)。
もちろん、このアプローチの欠点は、スタイル シートが乱雑になり、ブラウザ間でサイトのパフォーマンスに一貫性がなくなることです。結局のところ、私たちはスタイルシートにプライベート ブラウザ ハックの必要性を再び導入したくありません。 Internet Explorer の悪名高いマーキー、ブリンク、その他のタグは、多くのスタイル シートで使用され、1990 年代には伝説となりましたが、これらのタグにより、(他のブラウザーでの) 多くの既存の Web サイトが矛盾したり、読みにくくなったりします。そして、私たちは今、同じ状況に陥りたくありません。
ただし、Web サイトはすべてのブラウザーでまったく同じに見える必要はありません。ブラウザーでプライベート プロパティを使用して特定の効果を実現できる場合があります。
最も一般的なプライベート プロパティは、-webkit- で始まる Webkit ベースのブラウザ (Safari など)、-moz- で始まる Gecko ベースのブラウザ (Firefox など)、および Konqueror (-khtml -) 用です。 Opera (-o-) と Internet Explorer (-ms-) にはすべて独自のプロパティ拡張子があります (現在、-ms- プレフィックスをサポートしているのは IE8 のみです)。
プロのデザイナーとして、これらのプライベート プロパティを使用するとスタイル シートが検証に合格しないことを認識する必要があります。したがって、これらをスタイルの最終バージョンに組み込むことは、現時点ではまれです。ただし、実験や学習などの場合には、少なくとも標準の CSS プロパティとともにスタイル シートに書き込むことを検討できます。
CSS セレクターは非常に強力なツールです。これを使用すると、冗長なクラス、ID、または JavaScript を使用せずに、タグ内の特定の HTML 要素を指定できます。そして、それらのほとんどは CSS3 に新たに追加されたものではありませんが、本来あるべきように広く使用されていません。高度なセレクターは、クリーンで軽量なタグを実現し、構造とパフォーマンスをより適切に分離したい場合に非常に役立ちます。これらにより、タグ内のクラスと ID の数が減り、デザイナーがスタイル シートを保守しやすくなります。
3 つの新しい属性セレクターが CSS3 に追加されました。
[att^="value"][att$="value"][att*="value"]要素のvalue 属性
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。
连字符
CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：
div~img {
border: 1px solid #ccc;
}
浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6 ！
伪类
或许在CSS3中增加最多的就是新的伪类了，这里是一些最有趣和最有用的：
- :nth-child(n)
让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组，你可以简单的这样使用：
:nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/ - :nth-last-child(n)
与上个选择器的思想同样，但是从后面匹配元素（倒序），比如，为了指定一个div里面的最后两个段落，我们可以使用下面的选择器：
div p:nth-last-child(-n+2) - :last-child
匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1) - :checked
匹配选择的元素，比如复选框 - :empty
匹配空元素（没有子元素）。 - :not(s)
匹配所有不符合指定声明(s)的元素。比如，如果你想让所有的没有使用”lead”类的段落的显示为黑色，可以这样写：
p:not([class*="lead"]) { color: black; }Andrea Gandino在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落，并将其的外间距(margin)设置为0:
#primary .text p:last-child { margin: 0; }浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。
伪元素
在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。
浏览器支持:目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
扩展阅读