Volver al índiceCSS: futuras propiedades

Algunas de las propiedades que aparecen en los borradores de las futuras recomendaciones de las hojas de estilo CSS3, actualmente (diciembre 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.

Referencias:


Propiedades futuras como propiedades no estándar

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


Bordes redondeados: border-radius

La propiedad border-radius permite definir bordes con esquinas redondeadas. El valor del la propiedad define el radio del círculo. Las propiedades border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius y border-top-left-radius permitiren definir los radios de cada una de las esquinas. Estas propiedades forman parte de la recomendación CSS3: Módulo de Fondos y bordes, que actualmente (diciembre de 2011) se encuentra en fase de candidata a recomendación.

Los ejemplos siguientes sólo funcionan en los navegadores que admitan estas propiedades.

Correcto en FirefoxCorrecto en IE9Incorrecto en IE8Correcto en Chrome
blockquote { 
  padding: 3px 10px; 
border: PowderBlue solid 5px;
border-radius: 20px; }

Si algo puede ir mal, irá mal.

Murphy

Correcto en FirefoxCorrecto en IE9Incorrecto en IE8Correcto en Chrome
blockquote { 
  padding: 3px 10px; 
border: PowderBlue solid 5px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px; }

Si algo puede ir mal, irá mal.

Murphy

Correcto en FirefoxCorrecto en IE9Incorrecto en IE8Correcto en Chrome
blockquote { 
  padding: 3px 10px; 
border: PowderBlue double 5px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px; }

Si algo puede ir mal, irá mal.

Murphy

Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
blockquote { 
  padding: 3px 10px; 
border: PowderBlue dashed 5px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px; }

Si algo puede ir mal, irá mal.

Murphy

Volver al principio de la página


Imágenes de fondo múltiples: background

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 (diciembre de 2011) se encuentra en fase de candidata a recomendación.

Los ejemplos siguientes sólo funcionan en los navegadores que admitan estas propiedades (actualmente -diciembre de 2011-, Firefox o Chrome).

Correcto en FirefoxCorrecto en IE9Incorrecto en IE8Correcto en 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


Columnas: column-width, column-count, etc.

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 (diciembre de 2011) se encuentra en fase de candidata a recomendación.

Firefox (desde la versión 1.5) y Chrome admiten unas propiedades no estándar que tienen una funcionalidad similar.

Incorrecto en FirefoxIncorrecto en Internet ExplorerIncorrecto en Chrome
p { 
  column-count: 2;
  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.

Correcto en FirefoxIncorrecto en Internet ExplorerIncorrecto en Chrome
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.

Incorrecto en FirefoxIncorrecto en Internet ExplorerCorrecto en Chrome
p { 
  -webkit-column-count: 2;
  -webkit-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.

Volver al principio de la página


Desbordamiento: overflow-x, overflow-y

Por escribir

Volver al principio de la página

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 5 de febrero de 2012

Creative Commons License
Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.