Después de varios años trabajando con la especificación de CSS 2, la Web se prepara para un cambio en el modo de trabajar con hojas de estilo. Esta nueva versión viene cargada con grandes novedades y más social que nunca.
CSS 3 ofrecerá grandes cambios y características largamente esperadas por nosotros los webmasters. Lo veremos por todos lados y no viene solo; viene acompañado de HTML 5 y XHTML 2. Los cambios en estas tecnologías obedecen al fenómeno de la Web 2.0 y a las recomendaciones del creador de la World Wide Web, Tim Berners Lee de llevar a la Web a la máxima expresión del concepto de semántica.
Las ventajas de CSS 3:
CSS 2 fue lanzado en 1997 y después de 10 años y alguna que otra actualización, el modelo y propiedades necesita un lavado de cara para obedecer a las demandas del medio. A pesar de eso, realmente debemos mencionar que aún conserva muchas ventajas.
Las ventajas principales en esta nueva versión son la inclusión de nuevas propiedades especialmente en cuanto al aspecto gráfico (recordemos que CSS también es utilizado para describir estilos para medios de audio) aunque se prevean mejores sustanciales en otros medios como el de sonido.
La actualización incluirá los tan esperados bordes redondeados, textos con sombras, la capacidad de asignar múltiples fondos, un mejor manejo de tablas incluyendo el estilo zebra, multi-columnas, etc. El modelo conservará muchas de las actuales propiedades y trabajará con nuevos selectores.
También se habla del hecho de que con estas nuevas propiedades la carga de la página deberá descender pues el hecho de que muchos de los efectos estén ahora bajo control del navegador hará que los recursos visuales e imágenes que ahora empleamos ya no tengan razón de seguir siendo utilizados.
Capacidades visuales avanzadas:
CSS 3 contiene varias mejoras en cuanto a interfaz gráfica, posicionamiento y tamaño de los objetos, usando condiciones de alineación para cada uno. El objetivo es que sea más sencillo posicionar los controles dentro de la página y que cuenten con otras características como desplazamiento.
Hojas de Estilo Aural:
Pretende utilizar las opciones de ciertos dispositivos con capacidades de reproducción de sonido. El módulo de audio podría agregar sonidos de fondo o efectos de transición que se activarían mediante determinado evento. Otras propiedades permitan controlar la posición del sonido que se está reproduciendo, etc.
Bordes y Fondos:
Las nuevas capacidades de CSS 3 permitirían entre otras cosas usar imágenes para los bordes, redondear y/o agregar sombras. Posicionamiento de elementos en pantalla: se podrá controlar de mejor manera los objetos y su dirección (horizontal o vertical).
Fuentes:
Nuevas funciones sobre todo encaminadas a brindar un mejor soporte a múltiples lenguajes. Se pretende volver a incluir el @font-face para utilizar fuentes externas.
Otros cambios sustanciales serían un mejor modelo para trabajar CSS con DOM incluyendo la posibilidad de cambiar valores a las propiedades, uso de NAMESPACES como XML y la inclusión de un mejor soporte para manejo de expresiones matemáticas.
Roadmap de soporte de CSS 3 para los navegadores
Lo que deberemos tomar en cuenta es que antes de saltar a empezar a migrar nuestro sitio a la versión CSS 3 la mayoría de los navegadores ya hayan implementado parte de estas nuevas especificaciones.
Actualmente el desarrollo va con el navegador OPERA a la cabeza seguido de WebKit. Opera 9.x incluso ya viene con soporte para los nuevas etiquetas de HTML 5. Mozilla y Microsoft aún no han presentado mayores cambios en sus exploradores Firefox e Internet Explorer, respectivamente.
Por otro lugar el equipo de desarrollo de WebKit (donde podemos incluir a Konqueror y Safari) estado trabajando en dar soporte a estas nuevas propiedades. Los cambios también incluyen el regreso de la propiedad @font-face que permite la carga de un recurso tipográfico (es decir una fuente TTF) como de una imagen se tratase.
Esta propiedad fue incluida en la especificación de CSS 2.0 y eliminada de la lista bajo la excusa de no ser utilizada. Los primeros en brindar el soporte a esta propiedad es el equipo de WebKit mediante un plugin.
Qué esperar con CSS 3
Esperamos que en el 2008 la mayoría de navegadores incluyan dentro de alguna actualización el soporte nativo para CSS 3 y las nuevas versiones de HTML y XHTML. Por lo pronto, debemos de esperar un poco más, leyendo uno que otro documento que sale al respecto para prepararnos por que la salida de esas nuevas versiones esta mas cerca cada día.
El tema sobre CSS 3 es más extenso, así que hemos preparado varios artículos que te guiarán paso a paso sobre sus propiedades y aprovechamiento. Además, un ejemplo sobre una futura implementación dentro de hojas de estilo CSS 3.
Nuevas propiedades
- Bordes: border-color, border-image, border-radius, box-shadow.
- Backgrounds: background-origin, background-clip, background-size, layering multiple background images.
- Color: HSL colors, HSLA colors, RGBA colors opacity.
- Texto: text-shadow, text-overflow.
- Interface: box-sizing, resize.
- Selectores: attribute selectors.
- Formatos: media queries, multiple column layout, speech.
Backgrounds y Borders:
Entre las principales características destacan que se podrá agregar múltiples background a un objeto, los borders podrán ser redondos con posibilidad de indicar el radio de curvatura.
HTML:
< class="vcard"> < class="addr-bl"> < class="addr-tr">… < /div > < /div >< /div >
CSS.vcard { background-color: #000; background-image:
url(a-grad.gif),
url(a-bl.gif),
url(a-tr.gif);
background-repeat:
repeat-x,
no-repeat, no-repeat; background-position: 0 0, 100% 0, 100%; }
Pueden darse cuenta que en este caso, los múltiples background son agregadas mediante coma ( , ). El nivel de precedencia es de menos a más, es decir, el que está de último es el background de encima.Multi-column Layout
Ahora será más sencillo crear diseños con múltiples columnas sin etiquetas adicionales. Esta característica me ha parecido extraordinaria y muy útil. En el primer ejemplo, vemos la implementación de esta opción en la versión actual de CSS. Para este caso, debemos crear dos clases CSS y dos objetos DIV para simular la multi-columna.
< class="entry-content"> < class="col first"> < /div> < class="col"> < /div>< /div>
.entry-content .col { float: left; width: 467px;
margin-left: 30px;
}
.entry-content .first {
Margin-left: 0;
}
Y en CSS 3 la definición es más sencilla y requiere menos procesamiento.
< class="entry-content">< /div>
.entry-content {
column-count: 2; column-gap: 30px;} Advanced Layout:
Esta nueva característica permitirá organizar los elementos en pantalla de una mejor manera y combinarlos de diferentes maneras sin etiquetas adicionales.
Grid Positioning:
Dará la posibilidad que agregar reglas con cuadrículas invisibles para maquetar páginas con un aspecto como libro o revista y jugar con el tamaño y las propiedades de los objetos para hacer que los elementos “floten” entre las posiciones.
< class="entry-content"> <>What is Sushi? < /h2 > < src="sushi.jpg" class="photo" alt=""> < /div>.entry-content { grid-columns: (30px * *)[4]; grid-rows: 9em 33.3% *; column-count: 4; column-gap: 30px;}
.entry-content h2 { float: page top left; width: 6gr; height: 1gr; margin-left: -30px;} .entry-content img.photo { float: page bottom left; float-offset: 4gr 1gr;}
La respuesta a la pregunta de que si el ejemplo anterior es bastante confuso de entender a simple vista es, sí. En palabras en un poco confuso explicarlo, pero el ejemplo anterior muestra un diseño con cuatro columnas, una foto en medio de la columna 2 y 3 y un titulo de página, todo al más puro estilo de una revista. Así que ya no hay excusas que poner cuando el diseñador nos proponga hacer algo así en HTML.
Selectors:
El concepto de selector es un poco complicado de explicar, y todo debido a que este tipo de propiedades son muy poco utilizadas. Algunos ejemplos de selector que si utilizamos son::hover y :visited (los selector de hipervínculos). Este tipo de selector podrían ser utilizados en otros elementos y de hecho así puede ser, a excepción del navegador Internet Explorer que no los soporta. Los nuevos selector serían:
- E:only-of-type: un elemento que es único en su tipo.
- E:not(s): un elemento que no coincide con los selector simples.
- E ~ F: un elemento F precedido de un elemento E.
- E:nth-child: un objeto que es el enésimo hijo del nodo padre.
- E:nth-last-child: un objeto que es el último hijo del nodo padre.
- E:nth-of-type: un elemento que es el enésimo nodo hijo de otro elemento.
- E.first-of-type: el primer elemento de un tipo.
