La variable CSS currentColor

9/feb/2016 0

Estos días se anunció que Google Chrome incluye soporte para CSS Variables, lo que finalmente abre las puertas a que los nuevos features de CSS sean finalmente adquirido por los browsers. Pero una variable poco conocida y con buen soporte crossbrowsing ha existido por años: currentColor. Esta capacidad tiene muchas aplicaciones las que veremos en este artículo.

Uno de las características menos conocidas de CSS es que si defines color en una declaración junto al border (por ejemplo) sin especificar el color, este border va a adquirir el color del texto por defecto, por ejemplo:

p { 
   color: #f00;
   border-bottom: 4px solid; 
}

JS Bin on jsbin.com

Así si cambias el color de texto el color del borde también heredará el cambio del color (y además funciona con propiedades como outline y box-shadow):

JS Bin on jsbin.com

Creo que se entendió el concepto. Veamos ahora un ejemplo práctico: dado un párrafo, es usual que los enlaces <a> se les entregue el mismo color que el texto:

p {
   color: #666;
}
p a {
   color: currentColor;
   font-weight: bold;
}

JS Bin on jsbin.com

Con el valor currentColor podremos reducir las declaraciones de colores de nuestro código CSS, e inclusive podremos construir un conjunto de interfaces (componentes) que dependan y hereden el color automágicamente:

p {
  color: #34495e;
}
p a {
  color: currentColor;
  font-weight: bold;
}
p .btn {
  display: inline-block;
  border-radius: 10px;
  border: 1px solid;
  text-decoration: none;
  padding: .1em 1em;
  line-height: 1.5;
}

JS Bin on jsbin.com

Links:

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab