En el artículo introductorio a HTML5, les prometí una introducción a CSS3 y qué nuevas funcionalidades le trae a la industria. Si todavía no has leído la introducción a HTML5, te recomiendo hacerlo, ya que CSS3 funciona mejor y en conjunto con el nuevo lenguaje de marcado de la W3C.

Un poco de historia

CSS – Cascading Style Sheets (Hoja de Estilo en Cascada) apareció por primera vez en 1996 con su primera versión CSS1, y desde entonces muchas cosas sucedieron en Internet. En mayo de 1998, apareció CSS2, que tuvo una revisión importante en el año 2011 usualmente conocida como CSS2.1, pero los expertos de la industria web comentaron que sólo es cuestión de tiempo para aparezca el CSS3, ya que las características que brinda son realmente necesarias. Lo que mucha gente no sabía, es que el desarrollo de CSS3 empezó solamente un año después de la presentación de su versión anterior. Así que la W3C ha estado trabajando en esta versión mejorada desde 1999, por más de una década hasta que  la primera versión estable de CSS3 fue presentada.

Aunque la diferencia entre CSS2 y CSS3 es grande, todos los navegadores web modernos fueron bastante rápidos en adoptar la nueva adición de la familia W3C. Todos los navegadores importantes soportan la mayoría de las características de CSS3 que están disponibles. Al igual que el HTML5, el Consorcio considera que el CSS3 todavía está en continuo desarrollo y tener una versión final pronto es muy poco probable. Con los requerimientos de la web, y la industria en general, cambiando rápidamente, la programación necesita seguir adelante  con los mismos pasos.

Diferencias Principales

Tal vez la mayor diferencia entre CSS2 y CSS3 es la separación de los módulos. Mientras que en la versión anterior todo fue una larga especificación definiendo diferentes caracterísiticas, CSS3 está dividido en varios documentos llamados módulos. Cada módulo cuenta con nuevas capacidades, sin afectar la compatibilidad de la versión estable anterior. Al hablar de módulos, podemos nombrar más de cincuenta, sin embargo, cuatro de ellos han sido publicados como recomendaciones formales, y se componen de lo siguiente:

• Media Queries (publicado en 2012)
• Namespaces (publicado en 2011)
• Selectors Level 3 (publicado en 2011)
• Color (publicado en 2011)

El módulo Media Queries permite adaptar la representación del contenido a características del dispositivo como la resolución de pantalla, o la presencia de caracterísitcas de accesibilidad como el braile. Es un principio básico de la tecnología de Diseño Responsivo (Responsive Design).

Media Queries funcionan con mucha facilidad, vamos a ver algunas líneas de código:

@media screen and (max-width: 600px) {
background: #FFF;
}

Una vez que empieces a trabajar el estilo del Media Query anterior, estarás trabajando únicamente en el estilo de pantallas con un ancho máximo de 600 pixeles. En el ejemplo, todas las pantallas que tengan ese ancho como máximo te mostrarán un fondo blanco. Sin embargo, la max-width no es la única condición que le puedes aplicar a la hoja de estilo. También puedes utilizar max-device-width (que representa la resolución de pantalla, mientras max-width representa el área de visualización), podrías usar min en lugar de max, pero también podrías combinar dos condiciones, como en el ejemplo a continuación, que solamente aplicará en pantallas con área de visualización de entre 600 y 900 pixeles.

@media screen and (min-width: 600px) and (max-width: 900px) {
background: #FFF;
}

CSS3 tiene algunas hojas de estilo predefinidas para dispositivos móviles, como el iPhone o iPad, que puedes ver a continuación:

<link href="iphone4.css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" />

y

<link href="portrait.css" rel="stylesheet" media="all and (orientation:portrait)" />
<link href="landscape.css" rel="stylesheet" media="all and (orientation:landscape)" />

Como puedes observar, los Media Queries pueden ser muy útiles cuando el desarrollador necesita hacer que su diseño sea fluido en diferentes dispositivos con diferentes tamaños de pantallas.

Otras importantes consideraciones de diseño en CSS3 son, por ejemplo, los bordes (borders), que ahora pueden ser redondos sin hacks (trucos que se usaban antes en CSS2 para hacer que los bordes sean redondos). CSS3 ha introducido bordes redondos, que son de gran ayuda para diseñadores y desarrolladores. Sin embargo, muchas de esas características no funciona con versiones antigüas de Internet Explorer, pero esto no es tan nuevo para nosotros, ya lo hemos escuchado antes. El único código que tienes que agregar a tu hoja de estilo (en una clase específica) es algo similar a:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #897048;

Como pudiste observar, es mucho más fácil que antes. Los degradados (gradients) también están disponibles en CSS3, otra característica útil que hemos estado esperando por mucho tiempo, lo mismo con las sombras de cajas y textos (box and text shadows) y los bordes para imágenes. Para agregar sombras al texto de un contenido sin usar hacks, CSS3 simplemente busca algo similar a lo siguiente:

text-shadow: 2px 2px 2px #ddccb5;

Crear columnas para contenido jamás ha sido tan fácil, ahora con CSS3 tenemos cuatro líneas de código que podemos usar en cualquier momento, ésta son:

• column-count
• column-width
• column-gap
• column-rule

Otra forma para ganar tiempo es la opción de insertar fondos múltiples directamente desde CSS, en lugar de usar todo tipo de hacks como antes. El código es simple para escribir y recordar, y estoy seguro que lo vas a usar en algún tiempo como hice yo.

.multiplebackgrounds {
height: 100px;
width: 200px;
padding: 20px;
background: url(fondo-top.png) top right no-repeat,
url(fondo-bottom.png) top left repeat-y,
url(fondo-middle.png) bottom repeat-z;
}

Prefijos de Proveedores (Vendor Prefixes)

Cuando CSS3 fue recién presentado, los prefijos de proveedores se estaban utilizando todo tiempo, ya que ayudaban a la interpretación de código por parte de los navegadores. Hasta el momento, todavía tenemos que usarlos algunas veces, en caso de que el navegador, en el cual estamos probando, sea incapaz de leer el código. A continuación, presento una lista breve de los vendor prefixes para los navegadores web populares:

• -moz- : Mozilla Firefox
• -webkit- : Navegadores de Webkit como Google Chrome y Safari
• -o- : Opera
• -ms- : Internet Explorer

Desde su versión 24, Opera basó el desarrollo de su navegador para escritorio y dispositivos móviles en webkit también, en lugar del motor de renderizado Presto (Presto rendering engine). Así que el prefijo -o- desapareció para dejarnos únicamente con tres (-moz-, -webkit- y -ms-).

Las nuevas pseudo-clases (pseudo-class)

La llegada de CSS3 nos trajo muchas pseudo-clases nuevas, incluyendo las de estructura, que tiene como objetivo los elementos basados en su posición en el documento y la relación con otros diferentes elementos.

• :only-child – en caso de tener un elemento en el árbol de documento que sea el único descendiente (child) de su pariente (parent), puede ser dirigido por esta pseudo-clase.
• :empty – se enfoca en los elementos que no tienen ningún descendiente o ningún texto, por ejemplo un elemento vacío como <p></p>.
• :nth-child(n) – toma ventaja de los valores numéricos (n) y se dirige a los elementos "child" en ralación con su posición dentro del "parent". Para darte un ejemplo preciso, una lista de comentarios en un artículo de un blog se vería más atractiva con colores de fondo alternos, ésto se puede lograr con esta pseudo-clase.
• :first-of-type – se enfoca en el primer tipo de elemento específico dentro de un parent, y es lo contrario de :last-of-type.
• :first-child – se enfoca en el primer elemento child en un parent, independientemente de su tipo. Es lo contrario de :last-child.
• :not(s) – esta pseudo-clase se enfoca en los elementos que no son cubiertos por el selector o los selectores especificados.
• :root – esta se enfoca en el elemento principal (root element) de un documento.

Existen más pseudo-clases en CSS3, pero como este artículo es dirigido a principiantes, no vale la pena mencionarlas todas.

Ejemplos

No hay muchos ejemplos de CSS3 que puedo mostrarles, ya que por lo general se utiliza en conjunto con HTML5 o jQuery. CSS es para dar estilo y mejorar el aspecto de un diseño web; por lo tanto, sólo les voy a compartir dos enlaces interesantes.

1. Rotación de varias imágenes

2. Animación de un robot

¿Dónde aprender?

Igual como te comenté en el artículo de HTML5, y más ahora, CSS3 es imposible de dominar al menos que tengas conocimiento anterior de CSS. Supongo, ya que leíste este artículo, que cuentas con alguna experiencia en CSS, así que solamente tienes que basarte en ella. De otra forma, tendrás que empezar desde cero. Pero con el fin de facilitarte un poco el proceso de aprendizaje de CSS3, te recomiendo los siguientes recursos:

• Manual CSS3 Gratis en PDF por Antonio Navajas (Español)
• Introducción a CSS3 por W3C (Inglés)

Conclusión

HTML5 y CSS3 vinieron para quedarse, y combinados estas dos herramientas son muy poderosas y puede crear soluciones sorprendentes y de alta calidad. Por lo tanto, necesitas aprenderlas y empezar a usarlas ya, de lo contrario te quedarás atrás de tus competidores.

Como he prometido antes, voy a empezar a grabar varios tutoriales de HTML5/CSS3 para que puedas aprender más de Exp3rto. Sin embargo, y hasta que esto suceda, asegúrate de tener al menos un conocimiento básico de HTML5 y CSS3 para mantenernos en la misma página cuando empezamos con los tutoriales. ¡Hasta la próxima!