CSS3: futuras propiedades CSS3: futuras propiedadesAlgunas 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 Mozilla, 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 del módulo de bordes de la recomendación CSS3, cuya última versión se encuentra desde noviembre de 2002 en fase de borrador.
Los ejemplos siguientes sólo pueden funcionar en los navegadores que admitan las propiedades (actualmente ninguno, que yo sepa).
| 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; } |
|
Mozilla admite unas propiedades que tienen una funcionalidad similar. La propiedad -moz-border-radius funciona en Mozilla 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.
Si los estilos del borde son dasehd o dotted, el borde se muestra en estilo solid
| 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; } |
|
| 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 del módulo de color de la recomendación CSS3, cuya última versión se encuentra desde enero de 2001 en fase de borrador de trabajo.
A partir de la versión 1.5, Mozilla Firefox admite unas propiedades que tienen una funcionalidad similar.
| p { -moz-column-count: 2; -moz-column-gap: 2em; } |
Desde la versión 1.5, Mozilla 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 del módulo de color de la recomendación CSS3, cuya última versión se encuentra desde mayo de 2003 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 Mozilla 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