![Cerrar [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Nuevos recursos en el CSS3
Esta sección le presenta una introducción de los nuevos recursos que se pueden encontrar en las especificaciones del CSS nivel 3— (—incluyendo nuevos selectores CSS como los estructurales, los basados en estado y las pseudo-clases de negación, así como otros tipos nuevos de selectores). También muestra muchos de los efectos que ofrece el CSS3 y que anteriormente hubieran requerido que las imágenes se crearan usando una aplicación separada y que fueran guardados como GIF, JPG o PNG. Tales efectos incluyen sombras de gotas en texto y recuadros, esquinas redondeadas en los bordes y el uso de opacidades para crear una apariencia translúcida. El uso de muchos de estos recursos (como la opacidad y las esquinas redondeadas) está relativamente extendido, por el hecho de que se degradan de forma graciosa en navegadores Web legados. Luego, usted aprenderá sobre los nuevos diseños multicolumna que se pueden crear usando CSS3. Estos diseños son un regreso al diseño de periódico en donde el texto se acomoda dentro de un número establecido de columnas o dentro de un ancho de columna particular, según se requiera. Otro tema del que se hablará es el problema de incluir fuentes Web no estándar usando la etiqueta @font-face. Finalmente, se presentarán algunos de los demás nuevos recursos en el CSS3, como el soporte para modelos de colores HSL (Hue, Saturation y Lightness) y RGBA (Red, Green, Blue y Alpha).
Un selector CSS hace referencia a la manera en que se da estilo a los elementos HTML usando una hoja de estilo. Por ejemplo, para poner borde alrededor de todos los elementos <div> usted utilizaría el selector div:
div { border: 1px solid #000; }.
Para aplicar color de fondo a todos los elementos con la clase highlight usted utilizaría el selector .highlight:
.highlight { background-color: yellow; }.
Finalmente, para cambiar el ancho de un elemento con un valor myDiv de atributo de ID, usted usaría:
#myDiv { width: 250px; }.
Desde luego, estos selectores pueden combinarse, así que para seleccionar todos los elementos <div> dentro de la clase
highlight, usted utilizaría
div.highlight, o para seleccionar el elemento
<div> con el ID myDiv usted utilizaría
div#myDiv.
Además de estos selectores simples, el CSS también incluye (y lo ha hecho desde versiones anteriores) una serie de selectores complejos.
Por ejemplo, usted puede usar el selector input[type="text"] para seleccionar únicamente los elementos de entrada que contengan un tipo de atributo con el valor
text. O puede utilizar la pseudo-clase
:hover para dar estilo a un elemento cuando el puntero del mouse pase sobre él, por ejemplo:
a:hover { color: red; }.
Hay muchos más de estos selectores, todos ellos suministrados para facilitar la selección de un elemento para darle estilo. Con el CSS3 se han agregado incluso más selectores nuevos a la mezcla y todos ellos facilitan la vida de los desarrolladores, reduciendo la cantidad de HTML y JavaScript que necesitan escribir.
- E[foo^="bar"]
- Selecciona un elemento, E, cuyo atributo
foocomience exactamente con la cadena de caracteresbar - E[foo$="bar"]
- Selecciona un elemento, E, cuyo atributo
footermine exactamente con la cadena de caracteresbar - E[foo*="bar"]
- Selecciona un elemento, E, cuyo atributo
foocontenga la cadena de caracteresbar
- E:root
- Selecciona un elemento, E, de la raíz del documento (la etiqueta <html>)
- E:nth-child(n)
- Selecciona un elemento, E, el n-avo hijo de su elemento padre
- E:nth-last-child(n)
- Selecciona un elemento, E, el n-avo último hijo de su elemento padre
- E:nth-of-type(n)
- Selecciona un elemento, E, el n-avo hermano de su tipo
- E:nth-last-of-type(n)
- Selecciona un elemento, E, el n-avo último hermano de su tipo
- E:last-child
- Selecciona un elemento, E, que es el último hijo de su elemento padre (Note que E:first-child se definió previamente en CSS2)
- E:first-of-type
- Selecciona un elemento, E, el primer hermano de su tipo
- E:last-of-type
- Selecciona un elemento, E, el último hermano de su tipo
- E:only-child
- Selecciona un elemento, E, el único hijo de su elemento padre
- E:only-of-type
- Selecciona un elemento, E, el único hermano de su tipo
- E:empty
- Selecciona un elemento, E, que no tiene hijos (incluyendo nodos de texto)
- E:target
- Selecciona un elemento, E, que es el objetivo de un URI que le hace referencia
Pseudo-clases de estados de elemento de IU
- E:enabled
- Selecciona un elemento de interfaz de usuario, E, que está habilitado
- E:disabled
- Selecciona un elemento de interfaz de usuario, E, que está deshabilitado
- E:checked
- Selecciona un elemento de interfaz de usuario, E (un botón de selección o recuadro de selección), que está marcado o seleccionado
- E:not(s)
- Selecciona un elemento, E, que no coincide con el selector simple s
Combinador general de hermanos
- E ~ F
- Selecciona un elemento, F, que es precedido por un elemento, E
El soporte de navegadores para los nuevos selectores de atributos y el combinador general de hermanos son excelentes, dado que funcionan en casi todos los navegadores Web modernos. El soporte de las nuevas pseudo-clases está incluido en las últimas versiones de la mayoría de navegadores, pero usted puede necesitar incluir a planes alternos para navegadores más antiguos como Explorer 6/7 y Firefox 3.0.
Aunque los nuevos selectores probablemente son los recursos que más reducen los dolores de cabeza de los desarrolladores, las mejoras qué más desean ver las personas son los llamativos nuevos efectos que hay disponibles. Estos se facilitan mediante una gran cantidad de nuevas propiedades CSS, incluyendo:
- background (ahora soporta múltiples backgrounds)
- background-clip
- background-origin
- background-size
- border-radius (esquinas redondeadas)
- border-image
- border-color (gradiente en los bordes)
- box-shadow (sombra de gota en recuadros sin imágenes)
- box-sizing
- opacity
- outline-offset
- resize
- text-overflow
- text-shadow
- word-wrap
La página de muestra HTML5/CSS3 que usted creará al final de este tutorial le mostrará algunos de estos nuevos efectos en acción.
El diseño en multicolumna del CSS3 permite que el texto se distribuya sobre un número de columnas, como vería usted en una hoja de un periódico. Esto se puede hacer de dos formas, bien sea usando la propiedad de column-width, donde usted define qué tan ancha deberá ser cada columna (el número de columnas es determinado por el espacio disponible en el contenedor), o usando column-count, donde usted define el número de columnas que se deberá usar. Luego el ancho variará dependiendo del espacio disponible para cada columna.
Otros recursos de los diseños multicolumna incluyen la propiedad column-gap, que permite al desarrollador definir el espacio que debe haber entre columnas cuando se utiliza el método column-width. Otra útil adición es la propiedad column-rule, que permite colocar una regla estilo borde entre columnas. Finalmente, está la propiedad column-space-distribution, que determina cuánto espacio se debe dejar entre columnas.
Los diseños multicolumna son soportados actualmente por los navegadores Mozilla WebKit. Hasta ahora, estos están implementados mediante propiedades de marca registrada temporales con el prefijo -moz o -webkit, respectivamente. Cuando la especificación ha finalizado, estos navegadores eventualmente regresarán a las propiedades estándar.
Las fuentes Web fueron propuestas en realidad en el CSS2 y han estado disponibles en Microsoft Internet Explorer desde la versión 5. Desafortunadamente, esto necesitó del uso del formato de fuente patentado .eot (Embedded Open Type), y ninguno de los otros proveedores de navegadores decidió implementarlo. Como resultado, las fuentes Web realmente nunca despegaron en los sitios Web basados en CSS2.
Sin embargo, con las últimas versiones de Firefox, Safari, Chrome y Opera, usted puede usar ahora la regla @font-face para usar cualquier fuente .ttf (TrueType) o .otf (OpenType) licenciada, en su página Web. Un ejemplo de la regla @font-face es el siguiente:
@font-face { font-family: Alexa; src: url('Alexa.otf'); }.
Ahora usted puede usar esta fuente en sus propias reglas CSS, como:
article p { font-family: Alexa, Arial, Helvetica, sans-serif; }.
Recuerde que las fuentes son como imágenes— (—si no son suyas es posible que necesite permiso para utilizarlas en la Web). De forma alternativa, usted puede pagar por (o descargar gratuitamente) algunas fuentes libres de regalías que se pueden incluir en sus páginas Web a discreción suya.
El CSS3 también incluye muchos otros nuevos recursos, incluyendo soporte para nuevos valores de color, particularmente HSL (Hue, Saturation, Lightness) y dos valores de color con propiedades alfa— (—RGBA (Red, Green, Blue, Alpha) y HSLA (Hue, Saturation, Lightness, Alpha). Las consultas de medios le permitirán definir diferentes estilos para diferentes dispositivos, con base en el tamaño de su puerto de visualización. Por ejemplo, usted puede proporcionar estilos específicos para dispositivos con un puerto de visualización de menos de 500 pixeles (como un teléfono inteligente, PDA u otro dispositivo móvil). El módulo de voz del CSS3 le permite controlar propiedades de la voz de un lector de pantalla, incluyendo el volumen de la voz, el balance, la tasa, el énfasis, y más.
