I. CSS (hojas de estilo en cascada)
6. CSS avanzados
6.3. CSS 3
En el apartado HTML correcto y accesible mencionamos que hay diferentes versiones o variantes de HTML: XHTML, HTML5...
En CSS sucede algo parecido, y al igual que se habla de HTML5, también se habla de CSS3.
Ha habido varias versiones o "especificaciones" de CSS. La última de ellas es CSS3. Esta "especificación" es completamente compatible con la anterior. Lo que hace CSS3 es añadir nuevas posibilidades. Por lo demás todo funciona igual.
Novedades en CSS3
No vamos a mencionarlas todas, pero conozcamos algunas para comprender las ventajas de CSS3:
- Bordes redondeados
- Textos con sombra
- Sombras para otros elementos
- Degradados
- Tipografías personalizadas con @font-face...
Compatibilidad con diferentes navegadores
CSS3 aporta algunas novedades que no son compatibles con todos los navegadores. Debemos tenerlo en cuenta a la hora de usar CSS3. Pongamos un ejemplo:
CSS3 permite definir bordes redondeados usando la propiedad "border-radius". La mayoría de los navegadores modernos "comprenderán" ese código y, si lo usamos, mostrarán los bordes redondeados. Sin embargo, algunos navegadores antiguos, como cualquier versión de Internet Explorer anterior a la 9, no entenderán ese código. Resultado: no mostrarán los bordes redondeados. Por lo demás, no hay ningún problema: podemos usar CSS3, pero teniendo en cuenta que habrá casos (navegadores) en los que esa parte de nuestro código no tenga efecto.
Hay una novedad de CSS3 que merece especial atención, y que explicaremos con más detalle en el siguiente punto: CSS Media Queries.
Para saber más
- Guía Completa de CSS3 en formato PDF (por Antonio Navajas Ojeda, con licencia Creative Commons BY-NC)
- Manual de CSS 3 online
- Introducción a CSS3 en W3C Schools (en inglés)
- Can I Use? (para comprobar el soporte ofrecido por diferentes navegadores)