Comprender la palabra clave currentColor en CSS

Ahora que tenemos propiedades personalizadas en CSS, prácticamente tenemos pleno control sobre nuestras propias variables en CSS. Pero incluso antes de que sean útiles, podemos usar una palabra clave disponible desde el Módulo de color CSS de nivel 3, , currentColorpara mantener los colores consistentes dentro de los elementos.

currentColoractúa como una variable para el valor actual de la colorpropiedad en el elemento. Y elEn cascadaparte de CSS sigue siendo efectiva, por lo que si no hay coloruna propiedad definida en un elemento, la cascada determinará el valor de currentColor.

Uso

currentColores útil cuando se desea que un determinado color sea uniforme en un elemento. Por ejemplo, si se desea que un elemento tenga un color de borde que sea el mismo que el color del texto del elemento, el uso currentColortiene mucho sentido porque, si se decide el color del texto principal, se puede cambiar el valor en un solo lugar.

Un ejemplo

Las palabras están muy bien, pero nada supera a un ejemplo. Vamos a utilizarlas currentColoren diferentes lugares en un ejemplo sencillo. Verás cómo currentColortambién pueden resultar muy útiles como valor para las fillpropiedades de los SVG.

Así es como se ve nuestro ejemplo final (pasa el cursor sobre él si puedes):

Primero, nuestro marcado:

div  svg viewBox="0 0 322 322"    g fill="none" fill-rule="evenodd"      circle cx="161" cy="161" r="161"/      circle fill="#6A76C0" cx="108" cy="109" r="25"/      path d="M112 239h99a49.5 49.5 0 0 1-99 0zM161 201c13.8 0 25-26.2 25-40 0-9.2-8.3-17.5-25-25-16.7 7.5-25 15.8-25 25 0 13.8 11.2 40 25 40z" fill="#51BAB6"/      circle fill="#6A76C0" cx="221" cy="109" r="25"/    /g  /svg/div

Como puedes ver, no hay nada especial en el marcado, solo un exterior divy un gráfico SVG simple.

La magia ✨ sucede en los estilos CSS:

.outer-circle {  color: gold;  border: 10px solid currentColor;  box-shadow: 0px 0px 15px currentColor;  width: 200px;  height: 200px;  border-radius: 50%;  margin: 2rem auto;  display: flex;  align-items: center;  justify-content: center;}.main-circle {  /* inherited from parent */  fill: currentColor;}.outer-circle:hover .left-eye {  fill: currentColor;}

Es más, el valor de colorpuede ser una variable CSS y currentColoraún así terminará con nuestro valor esperado:

El marcado es básicamente el mismo, excepto por una clase adicional en el círculo exterior:

div  !-- ... --/div

Y luego, en los estilos, anulamos el color .outer-circley usamos el valor de una de las variables CSS disponibles en este sitio:

.alternative {  color: var(--code);}

Terminando

Tus resultados currentColorpueden variar, porque muchas propiedades que incluyen un color tendrán como valor predeterminado el valor actual de colortodos modos ( border, box-shadow, text-decoration…). Si a eso le sumamos el hecho de que ahora tenemos variables CSS completas, es posible que descubras que no recurres currentColora tu bolsa de trucos muy a menudo en estos días. De todos modos, está ahí si alguna vez surge la necesidad. Puede resultar especialmente útil asegurarse de que los íconos SVG se rellenen con el mismo color que el color del texto actual.

Compatibilidad con navegadores

¿Puedo usar currentcolor? Datos sobre la compatibilidad de la función currentcolor en los principales navegadores de caniuse.com.