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 futura recomendación CSS Módulo de color 3, actualmente (noviembre de 2009) en fase de borrador, 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. |
Internet Explorer no es capaz de interpretar esta propiedad.
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 (diciembre de 2009) 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 cada imagen. Esta propiedad formará parte de la recomendación CSS3: Módulo de Fondos y bordes, que actualmente (diciembre de 2009) se encuentra en fase de borrador.
Los ejemplos siguientes sólo funcionan en los navegadores que admitan estas propiedades (actualmente -diciembre de 2009-, Google Chrome, aunque está previsto que funcione en la versión posterior a Firefox 3.5).
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 (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.
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 (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
Volver al principio de la página
Por terminar
Volver al principio de la página
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
Volver al principio de la página
Autor: Bartolomé Sintes Marco