Si alguna vez has estado en el mundo del desarrollo web, seguramente has escuchado de CSS, o más formalmente, Cascading Style Sheets. Si no estas familiarizado con CSS, es un lenguaje utilizado para definir como se despliega el contenido basado en HTML en la web. CSS se puede utilizar para controlar un layout, espacio, colores, fuentes y mucho más. Ha sido un componente integral de la Web desde que empezó a ganar popularidad a mediados de los 90s.
Si estas activamente comprometido con el diseño o desarrollo de contenido web, entonces seguramente también has escuchado de CSS3. Aunque hayas escuchado de ello, te has de preguntar: ¿qué es y cómo se diferencia de la implementación existente de CSS?
Todas las tecnologías maduran con el paso del tiempo, por esto es común la adopción de números de versiones y términos como «beta».
Estas etiquetas permiten identificar que versión de una tecnología en particular estas utilizando y así esperar de manera confiada en el soporte que tendrán las características de una pieza de software.
CSS3 es la tercera iteración del estándar CSS; es la madurez del lenguaje Cascading Style Sheets, que define nuevas características y permite una mejor presentación de contenido HTML.
Que hay de nuevo
Desde su adopción, CSS ha permitido ajustar la presentación de la información de contenido HTML. Fuentes, colores, imágenes de fondo, bordes sólidos y así sucesivamente, se han configurado fácilmente a traves de estilos CSS.
CSS3 no se opone a las capacidades existentes de la web, en cambio, aumenta y extiende las capacidades de un navegador para el soporte de mejores características y mejor presentación de contenido basado en HTML.
Módulos CSS3
Iteraciones previas de la especificación de CSS, fueron definiciones acompasadas de lo que ahora es el lenguaje CSS. En CSS3, la especificación se dividió en una colección de especificaciones más pequeñas, conocidas como módulos. Cada modulo define aspectos de funcionalidad dentro de un conjunto. Un modulo se encarga de media selectors, otro de colores, otro de SVG, y así sucesivamente. El enfoque modular permite la aprobación de aspectos específicos de la especificación CSS para que se aprueben e implementen como un estándar más rápido de lo que tomaría una especificación masiva que incluya todas sus características; que indudablemente tomaría más tiempo para ser ratificada como un estándar. Esto significa que es un estándar en evolución constante, donde unos aspectos se pueden estandarizar antes que otros. Puedes aprender más del diseño modular de la especificación CSS3 en la W3C.
Características CSS3
El movimiento de la Web 2.0 trajo consigo un nuevo nivel de diseño basado en interfaces. Las páginas ya no eran una organización de colores sólidos, imágenes y cuadros. Las interfaces basadas en HTML empezaron a surgir con fuentes no estandarizadas, degradados complejos, esquinas redondeadas y sobre todo un look and feel mucho más refinado. La combinación de HTML y CSS que se utilizó para crear estas interfaces, regularmente se hacía complejo, frágil y poco manejable. CSS3 introduce nuevos estilos para un mejor control sobre la presentación de estas sofisticadas interfaces.
CSS3 define estilos que controlan la redondez de las esquinas de divs, spans, u otros elementos de HTML; así al crear una caja, ya no requieres de múltiples contenedores anidados e imágenes recortadas. Ahora se puede especificar a traves de simples definiciones de CSS, en un solo contenedor HTML.
Figura 1. Esquinas redondeadas.
Adicionalmente a la redondez de las esquinas en contenedores HTML, CSS3 define nuevos estilos para los elementos de los bordes de un contenedor HTML. A traves de simples definiciones CSS, desarrolladores y diseñadores tendrán la capacidad de crear fácilmente bordes complejos que no se limitan a simples puntos o líneas punteadas, incluso se pueden basar en imágenes ajustadas o reticuladas. Esta es una característica que abilita de manera rápida y fácil, el desarrollo de complejas interfaces visuales con un mínimo de complejidad en el código.
Siguiendo con cambios visuales utilizando código simple, CSS3 introduce la capacidad de agregar drop shadows tanto a contenedores como segmentos de texto HTML. Agrega la posibilidad de definir layouts multi-columna e incluso soporte para web fonts (el uso personalizado de fuentes no estándares en interfaces HTML).
Figura 2. Drop Shadows
CSS3 también introduce poderosos métodos para controlar la opacidad y el color de contenido HTML.
CSS3 introduce espacios de color con soporte para HSL (Hue, Saturation, Lightness), HSLA (HSL con Alpha), RGB (Red, Green, Blue) y RGBA (RGB con Alpha). Esto permite refinar más el control de presentación y un mejor manejo de contenido con Alpha en tus documentos HTML. Adicionalmente al soporte de espacios de color, CSS3 incluso habilita el soporte para degradados complejos utilizando cualquiera de estos espacios de color, incluyendo degradados con transparencia.
Figura 3. Opacidad y Degradados
Una destacada adición en CSS3, es el soporte de media queries. CSS3 media queries, permite a diseñadores y desarrolladores crear estilos que se adapten a dimensiones específicas de pantalla. Al utilizar media queries, un simple documento HTML puede tener varias presentaciones dentro de un rango de pantallas o dispositivos. Un diseñador o un desarrollador puede crear estilos que se apliquen selectivamente basados en las dimensiones de una pantalla donde se despliegue el contenido. Por esta razón, se pueden aplicar diferentes layouts basados en interfaces de tabletas, interfaces de dispositivos móviles e interfaces de escritorio de un mismo documento HTML.
Figura 4. Media queries
Media queries no son la única manera de condicionar estilos a contenido HTML, también se puede hacer vía CSS.
Los Selectors, no son nuevos en CSS3, sin embargo CSS3 define muchos selectors adicionales para tu uso. Los Selectors son reglas condicionales para aplicar hojas de estilos a elementos HTML. Todas las veces que has utilizado un estilo :hover en un lynk, has usado un selector. Los nuevos Selectors de CSS3, se pueden utilizar para aplicar estilos a elementos específicos: first-child elements, last-child elements, sibling elements y muchos otros escenarios. Puedes leer de todas las diferentes reglas de selectors en la especificación W3C.
Otra notable adición a CSS3 es la inclusión de transformations. Transformations son estilos que controlan la transformación visual de un objeto en particular. Las transformaciones 2D, se aplican en un espacio dimensional como la traslación en los ejes x o y, escala horizontal y vertical, rotación alrededor de un punto de origen o incluso inclinar contenido sobre su eje x o y. Todos los navegadores que soportan CSS3, soportan transformaciones 2D, sin embargo, algunos navegadores incluso soportan transformaciones CSS3 3D. Las transformaciones CSS3 3D son casi las mismas disponibles en 2D, con la adición de un tercer eje. Las transformaciones 3D permiten escalar, trasladar y rotar en un espacio tridimensional sobre el eje x (horizontal), y (vertical) y z (profundidad). Para mayor información de transformaciones 2D y transformaciones 3D lo puedes consultar en el sitio de la W3C.
Otra poderosa implementación es que CSS3 introduce animación y transformaciones a través de estilos CSS. Animación y transiciones son un paso significante para CSS. Estas características te permitirán crear hojas de estilos que definan animación para un contenido específico o transiciones de un estado visual a otro. Diseñadores web y desarrolladores ya no dependen únicamente de JavaScript y eventos de tiempo para animar contenido en un navegador. Con CSS3 hojas de estilo de animaciones y transiciones, se pueden definir de una manera lógica y separada de la estructura del HTML y no se involucra código de ninguna manera. Como bonos, algunos navegadores incluso soportan aceleración por hardware para optimizar la reproducción y calidad de la animación. El sitio de la W3C provee más información de animaciones CSS y transiciones.
Figura 5. Transiciones
Aunque esto no es una exhaustiva lista de las nuevas características de CSS3, espero dar una idea de lo que CSS3 hace posible y como el uso de CSS3 puede ayudar a simplificar contenido HTML.
CSS3 ! = HTML5
CSS3 es comúnmente mal concebido como una característica dentro de HTML5. Mientras que CSS3 y HTML5 generalmente se complementan, no son sinónimos. HTML5 es la quinta iteración de la especificación HTML (Hyper Text Markup Language), que es usado para definir la estructura, contenido y capacidades en documentos HTML.
HTML5 permite el uso de nuevas etiquetas y el soporte de rich media, mientras que CSS3 define reglas para personalizar la presentación de la interface del usuario. CSS3 define como el contenido HTML será presentado dentro del navegador.
Adopción CSS3
Ahora que tenemos una idea general de que es CSS3, es importante saber donde se puede usar realmente. La mayoría de los navegadores de escritorio (Internet Explorer, Chrome, Firefox, Safari, Opera) soportan muchas características de CSS3. Sin embargo, sólo las últimas versiones de estos navegadores realmente soportan la mayoría de las características de CSS3. Versiones anteriores de estos populares navegadores pueden no tener soporte de algunas características de CSS3 incluso de ninguna. Si aprovechas los estilos de CSS3 dentro de tu contenido, debes asegurarte de que la audiencia a la que te diriges, puede visualizar esos elementos, antes de ir más adelante. Un gran recurso para verificar la compatibilidad de las características de CSS3 en diferentes navegadores es www.caniuse.com, que enlista el soporte individual de CSS3 para cada navegador.
Si te diriges a navegadores móviles, entonces tienes suerte. CSS3 tiene soporte en la mayoría de los sistemas operativos de smartphones. Esto incluye el navegador predeterminado para iOS, Android, BlackBerry e incluso la última generación de dispositivos Windows. De hecho, los navegadores móviles, tienen el mejor soporte para CSS3. El truco es que no todos los navegadores de escritorio y móviles soportan las características de igual forma.
Adicionalmente al hecho de que no todos los navegadores soportan CSS3 al mismo nivel, algunas características pueden funcionar mejor en un navegador en particular a diferencia de otros, aunque ambos soporten una característica determinada. Esto es evidente al comparar el resultado de un navegador acelerado por hardware a uno que no esté acelerado por hardware.
Si esto no fuera suficiente, CSS3 se puede tornar aún más confuso por el hecho de que no todos los navegadores soportan la misma sintaxis para algunas características en particular de CSS3. Como no se ha estandarizado la especificación de CSS3, algunas empresas prefijan sus estilos CSS3 con identificadores específicos para su navegador. Un ejemplo: utilizar el estilo CSS3 «-webkit-border-radius-» sólo funcionará en navegadores basados en webkit engine, aunque otros navegadores soporten la implementación de su propio CSS3 border radius. Hasta que la especificación sea finalmente implementada como un estándar, este tipo de inconsistencias serán evidentes y se tendrá que hacer trabajo extra para resolverlas.
A dónde ir a partir de aqui.
Las características de CSS3 ofrecen poderosas mejoras al lenguaje CSS. A través del uso de CSS3, diseñadores y desarrolladores pueden crear más fácilmente layouts complejos y sofisticados, layouts dinámicos que se adapten a la pantalla en la que son desplegados, así como animación sofisticada y transiciones, que generalmente sólo eran posibles con contenido basado en plugins.
Los siguientes recursos pueden ayudar para empezar con CSS3:
- Start using CSS3 today
- CSS3.info
- Wikipedia: Cascading Style Sheets
- W3C: Cascading Style Sheets
- W3C: Introduction to CSS3
- caniuse.com
Este es un artículo traducido de su versión original publicada bajo Creative Commons, cualquier comentario pueden dejarlo en el hilo de mensajes de este post o en mi Twitter @juandediosleon