currentColor Palabra clave de Css 19.5.14
currentColor. Explicación y uso del valor Css currentColor y relación de las palabras clave de la propiedad color.
currentColor Palabra clave de Css
Desde el inicio de Css hay una serie de propiedades que incluyen en su valor el color. Algunas sólo admiten el valor del color y otras el color forma parte de un valor compuesto.
Ejemplo de las primeras sería la propiedad color y entre las segundas border que necesita un valor compuesto por tres variables: anchura, tipo y color del borde. Otras de este tipo son aquellas que admiten múltiples valores, como box-shadow o text-shadow.
En un grupo de propiedades, si no se declaran, el valor del color no es aplicado en base a la herencia o la cascada de dicha propiedad, sino que toma el valor de la propiedad color del elemento. Como por ejemplo el color con el que se dibujan los bordes o las sombras.
Un ejemplo de esto último en forma de código. Tomemos un padre y su hijo:
.padre {
color: black;
box-shadow: 2px 2px 2px green;
}
.hijo {
box-shadow: 2px 2px 2px;
}
En el elemento ".hijo" al no declarar un color para la sombra de su caja no toma el verde de la misma propiedad de su padre sino que la dibujará negra como el valor de la propiedad color.
currentColor
Tradicionalmente Css no proveía una forma de referirse al valor de la propeidad colorde un elemento. Esto fue paliado en la recomendación CSS Color Module Level 3 (2011) donde se define la palabra clave currentColor como:
currentColor es el valor de la propiedad color. El valor computado de "currentColor" es el mismo que el computado para la propiedad 'color'.
EN caso de usarse la palabra clave 'currentColor' en la propiedad 'color' equivale a 'inherit'.
Como decía antes, el valor del color es computado de forma automática en base a la propiedad 'color' en algunas propiedades, pero en otras no. Necesitan una declaración expresa y no había forma de indicarle que tomase el de la propeidad color, como por ejemplo background-color.
Pese a que Css no es case-sensitive (no influye el que se usen mayúsculas o minúsculas) la sugerencia del consorcio es poner la "C" de "color" en mayúsculas para mejorar y facilitar la lectura.
Soporte a currentColor
- Opera desde 2009
- Firefox 3.5+
- Chrome 1+
- Safari 4+
Ie 9 noIE 10+
José Oliveras, aka @joliveras vía twitter me comenta que en IE10 y 11 (en browserstack) sí le da soporte. No tengo ocasión ahora de probar en IE10 y posteriores, así que las gracias por anticipado a quien pueda hacer una prueba y decirnos el resultado en los comentarios.
Otras palabras claves del color
currentColor ha sido la última (por ahora) palabra clave en incorporarse para referenciar el color sin declarar un color específico. Sin embargo no es la única.
Aunque en desuso, Css recoge desde siempre una serie de palabras claves para vincular el color con otros aspectos del sistema operativo en el que se ejecuta. Las recogidas en el documento de nivel 3 sobre el color son:
- ActiveBorder
- Active window border.
- ActiveCaption
- Active window caption.
- AppWorkspace
- Background color of multiple document interface.
- Background
- Desktop background.
- ButtonFace
- The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.
- ButtonHighlight
- The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
- ButtonShadow
- The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
- ButtonText
- Text on push buttons.
- CaptionText
- Text in caption, size box, and scrollbar arrow box.
- GrayText
- Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
- Highlight
- Item(s) selected in a control.
- HighlightText
- Text of item(s) selected in a control.
- InactiveBorder
- Inactive window border.
- InactiveCaption
- Inactive window caption.
- InactiveCaptionText
- Color of text in an inactive caption.
- InfoBackground
- Background color for tooltip controls.
- InfoText
- Text color for tooltip controls.
- Menu
- Menu background.
- MenuText
- Text in menus.
- Scrollbar
- Scroll bar gray area.
- ThreeDDarkShadow
- The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
- ThreeDFace
- The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
- ThreeDHighlight
- The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
- ThreeDLightShadow
- The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
- ThreeDShadow
- The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
- Window
- Window background.
- WindowFrame
- Window frame.
- WindowText
- Text in windows.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Nunca entendí por qué a esa lista no le agregaron los colores de enlace. Alguna vez (previa al CSS) estuvieron incluídos en el HTML como atributos para personalizarlos, y ya entonces era difícil capturar sus valores default. Y creo que aún no existía el 'HOVER', pero no lo puedo asegurar; mi memoria es inversamente proporcional a mi edad.
ResponderEliminar