Aunque muchas características nuevas de CSS3 no son compatibles con muchos navegadores o no lo son bien. Pero como desarrollador front-end, no puede esperar hasta que todos los navegadores lo admitan completamente antes de aprender.
¿Qué novedades nos trae CSS3? En pocas palabras, CSS3 puede lograr muchos efectos que antes requerían el uso de imágenes y scripts en solo unas pocas líneas de código. Como esquinas redondeadas, bordes de imágenes, sombras de texto y sombras de cuadros, etc. CSS3 no sólo simplifica el proceso de diseño para los desarrolladores front-end, sino que también acelera la carga de la página.
En este artículo, echemos un vistazo completo a las diversas características nuevas de CSS3. Además, no olvide consultar algunos de nuestros tutoriales y consejos de CSS anteriores:
Para utilizar la mayoría de las funciones de CSS3, debemos utilizar extensiones específicas del fabricante junto con las propiedades originales. La razón es que hasta ahora, la mayoría de los navegadores sólo admiten algunas propiedades CSS3. Y desafortunadamente, es posible que algunas propiedades ni siquiera terminen siendo recomendadas por el W3C, por lo que es importante distinguirlas de las propiedades estándar especificando propiedades específicas del navegador (y luego usar aquellas que cumplan con los estándares cuando sean redundantes, el estilo las anulará).
Por supuesto, la desventaja de este enfoque es que dará como resultado una hoja de estilo desordenada y un rendimiento inconsistente del sitio entre navegadores. Después de todo, no queremos reintroducir la necesidad de hackear navegadores privados en nuestras hojas de estilo. Las infames etiquetas marquesina, parpadeo y otras de Internet Explorer se utilizaron en numerosas hojas de estilo y se convirtieron en una leyenda en la década de 1990; todavía hacen que muchos sitios web existentes (en otros navegadores) sean inconsistentes o incluso difíciles de leer. Y no queremos ponernos ahora en la misma situación, ¿verdad?
Sin embargo, no es necesario que un sitio web tenga el mismo aspecto en todos los navegadores. A veces es posible utilizar propiedades privadas en un navegador para lograr efectos específicos.
Las propiedades privadas más comunes son para navegadores basados en Webkit (por ejemplo, Safari), que comienzan con -webkit-, y navegadores basados en Gecko (por ejemplo, Firefox), que comienzan con -moz-, y Konqueror (-khtml -). Opera (-o-) e Internet Explorer (-ms-) tienen sus propias extensiones de propiedad (actualmente sólo IE8 admite el prefijo -ms-)
Como diseñadores profesionales, debemos ser conscientes de que el uso de estas propiedades privadas hará que nuestras hojas de estilo no pasen la validación . Por lo tanto, incluirlos en la versión final del estilo es actualmente poco común. Pero en algunos casos, como la experimentación o el aprendizaje, al menos podemos considerar escribirlos en una hoja de estilo junto con las propiedades CSS estándar.
Los selectores de CSS son herramientas increíblemente poderosas: nos permiten especificar elementos HTML específicos en etiquetas sin tener que usar clases, ID o JavaScripts redundantes. Y la mayoría de ellos no se han agregado recientemente a CSS3, pero no se han utilizado ampliamente como deberían. Los selectores avanzados son muy útiles si intenta lograr una etiqueta limpia y liviana y una mejor separación entre estructura y rendimiento. Pueden reducir la cantidad de clases e ID en las etiquetas y facilitar a los diseñadores el mantenimiento de las hojas de estilo.
Se agregaron tres nuevos selectores de atributos a CSS3:
[att^="value"][att$="value"][att*="value"]atributo de valor del elemento
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 均支持。
扩展阅读