soy Kseso y esto EsCSS

currentColor Palabra clave de Css

currentColor Palabra clave de Css

·Por Kseso ✎ 1

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 no IE 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.

avatar del Editor del blog

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 Don Kseso Kseso