CSS3: futuras propiedadesCSS3: futuras propiedadesAlgunas de las propiedades que aparecen en los borradores de las futuras recomendaciones de las hojas de estilo (CSS3, actualmente -octubre de 2007- 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.
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 2007) 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; } |
|
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.
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 2007) 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
Por terminar
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