# CSS3: futuras propiedades

Algunas de las propiedades que aparecen en los borradores de las futuras recomendaciones de las hojas de estilo (CSS3, actualmente en elaboración), ya funcionan en los navegadores. En general, no conviene utilizarlas, ya que los borradores de las recomendaciones todavía pueden modificarse, o incluso no llegar a ser aprobados nunca.

En Firefox, las propiedades que ya han sido implementadas utilizan el nombre que aparecen en los borradores. Las que todavía no han sido completamente implementadas, suelen utilizar el nombre de la propiedad precedido del prefijo -moz-. Con mayor motivo no conviene utilizarlas, ya que estos nombres nunca formarán parte de una recomendación.

En Internet Explorer, no se utiliza un prefijo para distinguir las propiedades no-estándar.

## Bordes redondeados: border-radius

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 (octubre de 2006) 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; } | Si algo puede ir mal, irá mal. Murphy
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

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; } | Si algo puede ir mal, irá mal. Murphy
blockquote { padding: 3px 10px; border: PowderBlue solid 5px; -moz-border-radius: 30px 30px 15px 15px; } | Si algo puede ir mal, irá mal. Murphy
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; } | Si algo puede ir mal, irá mal. Murphy

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 dotted 5px; -moz-border-radius: 20px; } | Si algo puede ir mal, irá mal. Murphy
blockquote { padding: 3px 10px; border: PowderBlue dotted 5px; -moz-border-radius: 20px; } | Si algo puede ir mal, irá mal. Murphy

## 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 (octubre de 2006) se encuentra en fase de borrador.

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.

## Opacidad: opacity

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 (octubre de 2006) en fase de candidata a 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

## Desbordamiento: overflow-x, overflow-y

Por terminar

## Lista de propiedades -moz-

No sé si hay un listado oficial de propiedades -moz-.

En el código fuente de Firefox hay un archivo con una lista de propiedades

En XulPlanet he encontrado esta página con una lista comentada de algunas propiedades.

En esta página he encontrado esta lista obtenida de Firefox en mayo de 2004. He tachado las propiedades que están comentadas en los párrafos anteriores.

-moz-activehyperlinktext -moz-alias -moz-all -moz-anchor-decoration -moz-appearance -moz-arabic-indic -moz-background-clip -moz-background-inline-policy -moz-background-origin -moz-bengali -moz-bg-inset -moz-bg-outset -moz-bg-solid -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-radius -moz-border-radius-bottomleft -moz-border-radius-bottomright -moz-border-radius-topleft -moz-border-radius-topright -moz-border-right-colors -moz-border-top-colors -moz-box -moz-box-align -moz-box-direction -moz-box-flex -moz-box-ordinal-group -moz-box-orient -moz-box-pack -moz-box-sizing -moz-bulletinboard -moz-button -moz-buttondefault -moz-cell -moz-center -moz-cjk-earthly-branch -moz-cjk-heavenly-stem -moz-compact -moz-context-menu -moz-copy -moz-count-down -moz-counter-increment -moz-counter-reset -moz-count-up -moz-count-up-down -moz-deck -moz-desktop -moz-devanagari -moz-dialog -moz-dialogtext -moz-document -moz-dragtargetzone -moz-editor-invert-value -moz-ethiopic-halehame -moz-ethiopic-halehame-am -moz-ethiopic-halehame-ti-er -moz-ethiopic-halehame-ti-et -moz-ethiopic-numeric -moz-field -moz-fieldtext -moz-fixed -moz-float-edge -moz-force-broken-image-icon -moz-grab -moz-grabbing -moz-grid -moz-grid-group -moz-grid-line -moz-groupbox -moz-gujarati -moz-gurmukhi -moz-hangul -moz-hangul-consonant -moz-hidden-unscrollable -moz-hsla -moz-hyperlinktext -moz-image-region -moz-info -moz-initial -moz-inline-block -moz-inline-box -moz-inline-grid -moz-inline-stack -moz-inline-table -moz-japanese-formal -moz-japanese-informal -moz-kannada -moz-key-equivalent -moz-khmer -moz-lao -moz-list -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-malayalam -moz-margin-end -moz-margin-start -moz-marker -moz-math-columnline -moz-math-firstcolumn -moz-math-firstrow -moz-math-font-size -moz-math-font-style -moz-math-lastcolumn -moz-math-lastrow -moz-math-rowline -moz-math-symbol -moz-math-text -moz-myanmar -moz-opacity -moz-oriya -moz-outline -moz-outline-color -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -moz-outline-style -moz-outline-width -moz-padding-end -moz-padding-start -moz-page-break -moz-persian -moz-popup -moz-pre-wrap -moz-pull-down-menu -moz-rgba -moz-right -moz-run-in -moz-scrollbars-horizontal -moz-scrollbars-none -moz-scrollbars-vertical -moz-show-background -moz-simp-chinese-formal -moz-simp-chinese-informal -moz-spinning -moz-stack -moz-tamil -moz-telugu -moz-thai -moz-trad-chinese-formal -moz-trad-chinese-informal -moz-urdu -moz-user-focus -moz-user-focus -moz-user-focus -moz-user-input -moz-user-modify -moz-user-select -moz-use-text-color -moz-visitedhyperlinktext -moz-window -moz-workspace -moz-zoom-in -moz-zoom-out