Hace tiempo que vengo trabajando con CSS3. Para las personas que no conozcan la materia, decir que CSS3 es el tercer nivel de les hojas de estilo en cascada, esto es, el lenguaje destinado a dotar de estilos a los documentos semánticos elaborados con HTML. O dicho otra manera, CSS es el encargado de definir la estructura visual de los contenidos que escribimos en HTML haciendo posible la separación del contenido de la web (HTML) de su estructura (CSS).
Cascading Style Sheets, level 3
CSS3 supone un paso al frente respecto al anterior nivel de este lenguje de hojas de estilo: el CSS 2.1. Posibilita una mayor adaptación a los distintos dispositivos en los que podemos mostrar hoy los contenidos web (PCs, pero tamién móviles o tablets), una mayor compatibilidad con lenguajes como SVG, unos selectores más potentes para delimitar el ámbito de los estilos sobre los documentos web y la posibilidad de jugar con nuevos elementos de color (como la opacidad) .
Pero este post no pretende explicar, nin siquieramente resumir, los trabajos del W3C para la especificación oficial de CSS3. La idea de escribirlo viene de mi trabajo cotidiano en las últimas fechas: desarrollando sitios web e impartiendo formación sobre CSS3 en un curso del Ayuntamiento de Gijón/Xixón.
Quién más quién menos, sobremanera si tiene un trabajo técnico en informática, dispone de una lista de webs favoritas. Estas webs se convierten en una referencia cotidiana a la de desarrollar ciertas tareas y, en este caso (el CSS3), cobran una especial relevancia.
Trabajar con CSS3 puede traernos auténticos quebraderos de cabeza al comprobar que, siguiendo a rajatabla la especificación oficial, los resultados no son los deseados. Esto nos lleva a «buscarnos la vida» vía Google, intentando encontrar alternativas que posibiliten que las nuevas posibilidades de este nivel de las hojas de estilo se plasmen en nuestros proyectos.
Aunque la solución a algunos problemas sigue pasando por frameworks de javascript como Jquery, comparto con vosotros y vosotras una lista de links con documentos y herramientas online útiles para el desarrollo web con CSS3. Son estos:
- Desde esta web tendréis acceso a una referencia de cada nueva propiedad haciendo clic. Además muestra un ejemplu online de cada una de ellas, su nivel de compatibilidad con los distintos navegadores y links a artículos explicativos y tutoriales.
- http://www.w3schools.com/css3/default.asp
- Un auténtico clásico para los/es profesionales del desarrollo web. Una referencia completísima a todas las propiedades de CSS incluyendo, como no, las de CSS3. Incluye demos online editables.http://css3generator.com/
- Como su propio nombre indica, es un generador automático de código de hojas de estilo de nivel 3 que incluye alternativas para los motores de los distintos navegadores (incrustando prefijos como webkit- o moz- en las propiedades).http://www.colorzilla.com/gradient-editor/
- Para los degradados disponemos de esta herramienta que también garantiza el funcionamiento en distintos navegadores.
- http://caniuse.com/
- De título absolutamente descriptivo, nos permite analizar el nivel de compatibilidad con distintos navegadores y dispositivos de ciertos elementos (los más problemáticos) de HTML5, CSS3 y otras tecnologias como SVG, etc.
- http://www.css3.info/
- Bajo el título de la página aparece un «Everything you need to know about CSS3«. Esta web pionera en demostrar la potencia del CSS3 mediante test de navegadores, demostraciones y un informe actualizado sobre el estatus de los diferentes módulos de la especificación oficial.
Ni que decir tiene que no están todos los que son, pero sí son todos que están. Espero que, por lo menos, os resulten útiles en vuestros proyectos o en vuestro proceso de aprendizaje.