El color actual: currentColor
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