Novedades en CSS3

Qué gran cosa es esto del css, y que buenas son las nuevas especificaciones. Ya vamos por la tercera de la saga, y las novedades de esta ultima versión son espectaculares. En este articulo trataré de resumirlas (no va a ser una clase práctica, sino una especie de resumen introductorio para que, quien quiera, indague mas en la cuestión) y explicaré brevemente en que consiste eso que llaman el CSS3.

El objetivo de CSS3 es claro: Evitar los trucos que los programadores debemos emplear a la hora de hacer nuestros diseños cotidianos. A menudo estos trucos eran dos cosas: Ingeniosos y engorrosos, lo cual emborronaba el código de las paginas haciéndolas mas complicadas. Así que bienvenidos todos a la era del control total de los elementos de nuestra web.

Estas son las características que varían en CSS3, un listado extraído de http://www.css3.info/preview/ . Resumiré tambien lo mas brevemente posible, en que varían dichos atrbutos. Eso sí, antes de que alguien se empiece a frotar las manos, aqui vienen las malas noticias: Todavía no funciona en casi ningun navegador. Incluso los cambios mas importantes, como los relativos a colores y opacidad, solo me han funcionado en firefox, safari y chrome. Nada de opera, y por supuesto, nada de explorer.

Propiedades en CSS 3

Bordes

• border-color: Se añaden bordes con degradados (gradientes), pero solo para mozilla
• border-image: posibilidad de crear bordes redondos y de muchas formas para imágenes, aunque también hay incompatibilidades con explorer y demás navegadores.
• Border-radius: Por fin! Ya podemos hacer cajas con bordes redondeados sin usar trucos.
• Box-shadow: Sombras con gradientes para las cajas. Esta echa con bordes redondeados

Fondos

• background-origin & background-clip: Posiciones del fondo con respecto a las cajas, con tres modos diferentes.
• Background-size: Especificación del tamaño de la imagen de fondo. En píxels o porcentaje.
• Multiple backgrounds: varias imágenes de fondo en el mismo elemento. Su notación es como hasta ahora, solo que separando con comas cada imagen.

Color

Las novedades mas importantes de todo el CSS3.

• colores HSL: Otra manera de especificar los colores: COLOR, SATURACIÓN Y LUMINOSIDAD.
• colores HSLA: Lo mismo que el anterior, añadiendo un cuarto dato: El canal alfa (OPACIDAD).
• colores RGBA: Añadir un 4º canal a la notación RGB de colores: El canal alfa (OPACIDAD).
• Opacidad: Lo comentado en los dos puntos anteriores.

Texto

• text-shadow: Efectos de sombra en texto, comparables a fotoshop. Bastante impresionante.
• Text-overflow: Cuando el texto desborde, se ponen automáticamente tres puntos suspensivos.
• Text-Wrap: Rompe palabras largas que no caben en una linea. Funciona en safari.

Interfaz de CSS 3

• box-sizing: Atributo nuevo para las cajas. Por si no entendias el modelo de cajas tradicional, ahora hay otra forma de especificar las dimensiones de éstas.
• Resize: Ahora las cajas pueden ser redimensionables, para mi gusto un poco tonto.
• Outline: para crear marcos y bordes dobles con la separación especificada en píxels.
• nav-top, nav-right, nav-bottom, nav-left

Selectores

• Selectores por atributos

Modelo de caja básico

• overflow-x, overflow-y

Otros

• media queries
• multi-column layout: Propiedades de columnas de texto dentro de la misma caja

• Web fonts: Aunque es mas propia del CSS2, esta propiedad permite que nuestra web visualice correctamente un texto con una fuente que el usuario no tenga instalada en su S.O.
• Speech: Ya se creo con CSS2, pero ahora se le añaden (y quitan) muchos atributos a esta propiedad que sirve para que nuestra pagina pueda ser leída por el ordenador en “voz alta”. Útil para que nuestra web no suponga una barrera para usuarios con problemas de visión.

En definitiva, CSS3 nos deja varias cosas muy buenas: la opacidad, con la que yo ya he estado jugando y se hacen verdaderas maravillas, la posibilidad de poder usar cualquier fuente en nuestros textos, la facilidad para crear cajas redondeadas y algunos efectos espectaculares como sombras y marcos. Tampoco olvidemos el avance de la propiedad Speech, que para mi es fundamental para que nuestra página sea accesible por mas personas.

Y en futuras entregas… espero poder afirmar que CSS3 ya es funcional en todos los navegadores. Sobretodo en explorer, que permítanme la osadía, pero dudo mucho que en su octava versión lo llegue a implementar. Y ojala me equivoque, que conste en acta.