CSS3: futuras
propiedadesCSS3: futuras
propiedadesAlgunas de las propiedades que aparecen en los borradores de las futuras recomendaciones de las hojas de estilo CSS3, actualmente (enero de 2011) en elaboración, ya funcionan en los navegadores. En general, hay que utilizarlas con moderación, ya que no todas los navegadores ni todas las versiones de los navegadores las admiten y además los borradores de las recomendaciones todavía pueden modificarse, o incluso no llegar a ser aprobados nunca.
Cuando las propiedades ya han sido implementadas de acuerdo con los borradores de las recomendaciones se suele utilizar el nombre de la propiedad tal y como aparece en la recomendación. Pero si no han sido completamente implementadas o si siguen una sintaxis distinta, los navegadores suelen utilizar el nombre de la propiedad precedido de un prefijo. El prefijo que utiliza Firefox es -moz-, el que utiliza Internet Explorer es -ms-, el que utilizan Chrome y Safari es -webkit- y el que utiliza Opera es -o-.
Hay que tener en cuenta que las propiedades precedidas de un prefijo sólo funcionan en el navegador correspondiente y en cualquier momento pueden dejar de funcionar, por lo que deben utilizarse con mucho cuidado.
La web de documentación sobre Firefox Mozilla Developer Network contiene una lista de propiedades -moz-.
Volver al principio de la página
La futura recomendación CSS Módulo de color 3, actualmente (enero de 2011) en fase de propuesta de recomendación, permitirá definir los colores mediante el modelo de color HSL (Hue, Saturation, Lightness, es decir, Tonalidad, Saturación, Luminancia).
  |
p {
background-color: hsl(153, 80%, 40%)
}
|
Si algo puede ir mal, irá mal. |
Las tablas siguientes muestran los colores con el modelo HSL, por lo que sólo se ven los colores si el navegador admite el modelo hsl.
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
Volver al principio de la página
La propiedad border-radius permitirá definir bordes con esquinas redondeadas. El valor del esta propiedad definirá el radio del círculo. Las propiedades border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius y border-top-left-radius permitirán definir los radios de cada una de las esquinas. Estas propiedades formarán parte de la recomendación CSS3: Módulo de Fondos y bordes, que actualmente (enero de 2011) se encuentra en fase de borrador.
Los ejemplos siguientes sólo funcionan en los navegadores que admitan estas propiedades.
| blockquote { padding: 3px 10px; border: PowderBlue solid 5px; border-radius: 20px; } |
|
| blockquote { padding: 3px 10px; border: PowderBlue solid 5px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; } |
|
Firefox admite unas propiedades que tienen una funcionalidad similar. La propiedad -moz-border-radius funciona en Firefox como propiedad compuesta y admite de uno a cuatro valores. También existen las propiedades -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft y -moz-border-radius-topright para definir los radios individualmente.
| blockquote { padding: 3px 10px; border: PowderBlue solid 5px; -moz-border-radius: 20px; } |
|
| blockquote { padding: 3px 10px; border: PowderBlue solid 5px; -moz-border-radius: 30px 30px 15px 15px; } |
|
| blockquote { padding: 3px 10px; border: PowderBlue solid 5px; -moz-border-radius-bottomleft: 30px; -moz-border-radius-bottomright:30px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; } |
|
El estilo double funciona, pero si los estilos del borde son dasehd o dotted, el borde se muestra en estilo solid
| blockquote { padding: 3px 10px; border: PowderBlue double 5px; -moz-border-radius: 20px; } |
|
| blockquote { padding: 3px 10px; border: PowderBlue dotted 5px; -moz-border-radius: 20px; } |
|
Volver al principio de la página
La propiedad background permitirá definir imágenes de fondo múltiples, simplemente separando entre comas las referencias a cada imagen. Esta propiedad formará parte de la recomendación CSS3: Módulo de Fondos y bordes, que actualmente (enero de 2011) se encuentra en fase de borrador.
Los ejemplos siguientes sólo funcionan en los navegadores que admitan estas propiedades (actualmente -enero de 2011-, Firefox o Google Chrome).
|
div {
border: black 2px solid;
background: url("naranja.png") repeat-x bottom, url("azul.png"), ;
}
|
Estos párrafos están en una división. Estos párrafos están en una división. Estos párrafos están en una división. Estos párrafos están en una división. |
Nota: Esta propiedad está comentada en http://helephant.com/2009/11/css3-multiple-background-images/.
Volver al principio de la página
Las propiedades column-width, column-count, column-gap (entre otras), permitirán definir columnas. Estas propiedades formarán parte de la recomendación CSS3: Módulo de columnas, que actualmente (enero de 2011) se encuentra en fase de candidata a recomendación.
A partir de la versión 1.5, Firefox admite unas propiedades que tienen una funcionalidad similar.
| p { -moz-column-count: 2; -moz-column-gap: 2em; } |
Desde la versión 1.5, Firefox es capaz de presentar un texto en columnas. Hasta que no se apruebe la recomendación CSS3, esta propiedad no será una propiedad oficial, pero supone un gran avance para el diseño de páginas web ya que facilita la lectura de textos largos en una misma página. |
Por completar.
Volver al principio de la página
La propiedad opacity permitirá hacer que un elemento sea parcialmente transparente. El valor de esta propiedad deberá ser un valor decimal entre 0 y 1. Estas propiedades formarán parte de la recomendación CSS3: módulo de color, actualmente (enero de 2011) en fase de propuesta de recomendación.
Esta propiedad funciona en Mozilla desde la versión 1.7 beta. En versiones anteriores existía la propiedad -moz-opacity, que ya no es necesario utilizar.
| p1 { opacity: 0.5; background-color: lightblue; } p2 { opacity: 0.5; background-color: lightyellow; } /* En el ejemplo también se utilizan propiedades de posicionamiento que no aparecen aquí. */ |
Este texto se encuentra situado a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda Este texto se encuentra situado a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha |
En Internet Explorer hay que utilizar una propiedad no estándar: filter:alpha(opacity=n) (n de 0 a 100).
Por terminar
Volver al principio de la página
Por terminar
Volver al principio de la página
Autor: Bartolomé Sintes Marco