Obwohl viele neue Funktionen von CSS3 von vielen Browsern nicht oder nicht gut unterstützt werden. Aber als Frontend-Entwickler können Sie nicht warten, bis alle Browser es vollständig unterstützen, bevor Sie lernen.
Welche neuen Funktionen bringt uns CSS3? Einfach ausgedrückt kann CSS3 viele Effekte erzielen, die bisher den Einsatz von Bildern und Skripten in nur wenigen Codezeilen erforderten. Zum Beispiel abgerundete Ecken, Bildränder, Textschatten und Rahmenschatten usw. CSS3 vereinfacht nicht nur den Designprozess für Frontend-Entwickler, sondern beschleunigt auch das Laden von Seiten.
In diesem Artikel werfen wir einen umfassenden Blick auf die verschiedenen neuen Funktionen von CSS3. Vergessen Sie auch nicht, sich einige unserer früheren CSS-Tutorials und -Tipps anzusehen:
Um die meisten CSS3-Funktionen nutzen zu können, müssen wir neben den Originaleigenschaften auch herstellerspezifische Erweiterungen verwenden. Der Grund dafür ist, dass die meisten Browser bisher nur einige CSS3-Eigenschaften unterstützen. Und leider werden einige Eigenschaften möglicherweise nicht einmal vom W3C empfohlen. Daher ist es wichtig, sie durch die Angabe browserspezifischer Eigenschaften von Standardeigenschaften zu unterscheiden (und dann standardkonforme Eigenschaften zu verwenden, wenn diese überflüssig sind und durch den Stil überschrieben werden).
Der Nachteil dieses Ansatzes besteht natürlich darin, dass er zu einem unordentlichen Stylesheet und einer inkonsistenten Leistung der Website zwischen den Browsern führt. Schließlich wollen wir nicht wieder die Notwendigkeit privater Browser-Hacks in unseren Stylesheets einführen. Die berüchtigten Marquee-, Blink- und anderen Tags des Internet Explorers wurden in den 1990er Jahren zur Legende; sie machen viele bestehende Websites (in anderen Browsern) inkonsistent oder sogar schwer lesbar. Und wir wollen uns jetzt doch nicht in die gleiche Situation begeben, oder?
Allerdings muss eine Website nicht in allen Browsern genau gleich aussehen. Manchmal ist es möglich, private Eigenschaften in einem Browser zu verwenden, um bestimmte Effekte zu erzielen.
Die gebräuchlichsten privaten Eigenschaften gelten für Webkit-basierte Browser (z. B. Safari), die mit -webkit- beginnen, und Gecko-basierte Browser (z. B. Firefox), die mit -moz- beginnen, und Konqueror (-khtml -). Opera (-o-) und Internet Explorer (-ms-) haben alle ihre eigenen Eigenschaftenerweiterungen (derzeit unterstützt nur IE8 das Präfix -ms-).
Als professionelle Designer müssen wir uns darüber im Klaren sein, dass die Verwendung dieser privaten Eigenschaften dazu führt, dass unsere Stylesheets die Validierung nicht bestehen . Daher ist es derzeit selten, sie in die endgültige Version des Stils zu integrieren. Aber in manchen Fällen, etwa beim Experimentieren oder Lernen, können wir zumindest erwägen, sie zusammen mit Standard-CSS-Eigenschaften in ein Stylesheet zu schreiben.
CSS-Selektoren sind unglaublich leistungsstarke Werkzeuge: Sie ermöglichen es uns, bestimmte HTML-Elemente in Tags anzugeben, ohne redundante Klassen, IDs oder JavaScripts verwenden zu müssen. Und die meisten von ihnen sind nicht neu zu CSS3 hinzugefügt, wurden aber nicht so weit verbreitet, wie sie sein sollten. Erweiterte Selektoren sind sehr nützlich, wenn Sie ein sauberes, schlankes Tag und eine bessere Trennung von Struktur und Leistung erreichen möchten. Sie können die Anzahl der Klassen und IDs in Tags reduzieren und Designern die Pflege von Stylesheets erleichtern.
Zu CSS3 wurden drei neue Attributselektoren hinzugefügt:
[att^="value"][att$="value"][att*="value"]Wertattribut des Elements
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 均支持。
扩展阅读