Bien que de nombreuses nouvelles fonctionnalités de CSS3 ne soient pas prises en charge par de nombreux navigateurs, ou ne soient pas bien prises en charge. Mais en tant que développeur front-end, vous ne pouvez pas attendre que tous les navigateurs le prennent entièrement en charge avant d'apprendre.
Quelles nouvelles fonctionnalités CSS3 nous apporte-t-il ? En termes simples, CSS3 peut obtenir de nombreux effets qui nécessitaient auparavant l'utilisation d'images et de scripts en seulement quelques lignes de code. Tels que les coins arrondis, les bordures d’images, les ombres de texte et les ombres de boîtes, etc. CSS3 simplifie non seulement le processus de conception pour les développeurs front-end, mais accélère également le chargement des pages.
Dans cet article, jetons un coup d'œil complet aux différentes nouvelles fonctionnalités de CSS3. N’oubliez pas non plus de consulter certains de nos précédents tutoriels et astuces CSS :
Afin d'utiliser la plupart des fonctionnalités CSS3, nous devons utiliser des extensions spécifiques au fabricant ainsi que les propriétés d'origine. La raison en est que jusqu’à présent, la plupart des navigateurs ne prennent en charge que certaines propriétés CSS3. Et malheureusement, certaines propriétés peuvent même ne pas être recommandées par le W3C, il est donc important de les distinguer des propriétés standard en spécifiant des propriétés spécifiques au navigateur (puis d'utiliser des propriétés conformes aux normes lorsqu'elles sont redondantes, le style les remplacera).
Bien entendu, l’inconvénient de cette approche est qu’elle entraînera une feuille de style désordonnée et des performances incohérentes du site entre les navigateurs. Après tout, nous ne voulons pas réintroduire le besoin de hacks de navigateurs privés dans nos feuilles de style. Les fameuses balises chapiteau, clignotant et autres d'Internet Explorer ont été utilisées dans de nombreuses feuilles de style et sont devenues une légende dans les années 1990 ; elles rendent encore de nombreux sites Web existants (dans d'autres navigateurs) incohérents ou même difficiles à lire. Et nous ne voulons pas nous mettre dans la même situation maintenant, n’est-ce pas ?
Cependant, il n’est pas nécessaire qu’un site Web ait exactement la même apparence dans tous les navigateurs. Il est parfois possible d'utiliser des propriétés privées dans un navigateur pour obtenir des effets spécifiques.
Les propriétés privées les plus courantes concernent les navigateurs basés sur Webkit (par exemple, Safari), qui commencent par -webkit-, et les navigateurs basés sur Gecko (par exemple, Firefox), qui commencent par -moz-, et Konqueror (-khtml -), Opera (-o-) et Internet Explorer (-ms-) ont tous leurs propres extensions de propriété (actuellement, seul IE8 prend en charge le préfixe -ms-)
En tant que concepteurs professionnels, nous devons être conscients que l'utilisation de ces propriétés privées empêchera nos feuilles de style de passer la validation . Il est donc rare de les intégrer dans la version finale du style. Mais dans certains cas, comme l’expérimentation ou l’apprentissage, nous pouvons au moins envisager de les écrire dans une feuille de style avec les propriétés CSS standards.
Les sélecteurs CSS sont des outils incroyablement puissants : ils nous permettent de spécifier des éléments HTML spécifiques dans des balises sans avoir à utiliser des classes, des identifiants ou des JavaScripts redondants. Et la plupart d’entre eux ne sont pas récemment ajoutés à CSS3, mais n’ont pas été largement utilisés comme ils devraient l’être. Les sélecteurs avancés sont très utiles si vous essayez d’obtenir une balise propre et légère et une meilleure séparation entre structure et performances. Ils peuvent réduire le nombre de classes et d’identifiants dans les balises et permettre aux concepteurs de gérer plus facilement les feuilles de style.
Trois nouveaux sélecteurs d'attributs ont été ajoutés à CSS3 :
[att^="value"][att$="value"][att*="value"]attribut value de l'élément
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 均支持。
扩展阅读