El color actual: currentColor

facebook-svg gplus-svg twitter-svg

En un futuro mas o menos lejano podremos utilizar variables CSS. Hasta entonces, podemos utilizar algunas palabras clave ( keywords ) que se comportan casi como si fueran variables. Probablemente la más conocida de estas palabras clave es em. Sabemos que si utilizamos em en lugar de pixeles para las longitudes,  lo tendremos mucho más fácil a la hora de cambiar el código.
Algo muy parecido pasa con currentColor ( el color actual ).

¿Cómo funciona?

1. Definimos el color del elemento en curso.

div.actual{ color: green;}

2. Volvemos a utilizar el mismo color.

div.actual button{
  border: 1px solid currentColor;
  box-shadow: 0 0 1px solid currentColor; 
  }

Observación: si no declaramos el color del borde, este tendrá el color actual .

Algunos ejemplos

1. Podemos subrayar texto utilizando la propiedad text-decoration. Pero a veces queremos algo un poco más sofisticado, como por ejemplo no cortar las astas descendentes de las letras. Veamos cómo nos puede ayudar currentColor en este caso:

ejemplo


.resultado p{color:yellow;}
#ejemplo {
  color: #222299;
  text-align:center;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 2em;
  text-shadow: .04em .04em 0 #fff, -.04em -.04em 0 #fff;
  background-position: 0 95%;
  -webkit-background-size: .1em .1em;
  background-size: .1em .1em;
  background-image: linear-gradient( to right, currentColor 0%, currentColor 100%);
  background-repeat: repeat-x;
}

ejemplo

2.  También podemos crear grupos de elementos que comparten el mismo estilo ( color ), y con una sola regla CSS podemos cambiar el aspecto de todo un grupo.



.resultado .color{ 
	display:inline-block; 
	position:relative; 
	width:250px; 
	height:200px; 
	margin:.5em 1em;
} 
.resultado .verde p{
  color: green;
}
.resultado .rojo p {
  color: #cc0000;
}
.resultado .azul p {
  color: #222299;
}
.resultado .boton {
  width: 5em;
  margin:0;
  color: currentColor;
  border: 1px solid currentColor;  
  text-align: center;
  font-size: 1.5em;
  padding: .3em;
  background-color: white;
  border-radius: .25em;
}
.resultado .boton:hover {
  background-color: currentColor;
  opacity: .7;
}
.resultado .boton:before {
  content: "boton \025b8";
}
.resultado .boton:hover:before {
  color: white;
}
.resultado input[ type=checkbox],
.resultado input[ type=radio] {
  position: absolute;
  left: -1000em;
}
.resultado input[ type=checkbox] + label,
.resultado input[ type=radio] + label {
  height: 2em;
  margin-left: 1.6em;
  color: currentColor;
}
.resultado input[ type=checkbox] + label:before,
.resultado input[ type=radio] + label:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1.3em;
  border: 1px solid currentColor;
  text-align: center;
  line-height: .8em;
  padding: 0;
  position: absolute;
  left: 0em;
}
.resultado input[ type=radio] + label:before {
  border-radius: 50%;
  background-color: white;
}
.resultado input[ type=checkbox]:checked + label:before {
  content: "\02713";
  color: currentColor;
}
.resultado input[ type=radio]:checked + label:before {
  padding:.2em;
  background-clip: content-box;
  background-color: currentColor;
}
.resultado input[ type=checkbox]:focus + label:before,
.resultado input[ type=radio]:focus + label:before {
  box-shadow: 0px 0px 3px 1px currentColor;
}

El soporte en los navegadores

El soporte en los navegadores para currentColor es muy bueno