Las variables CSS son siempre un tema candente cuando se habla de “el futuro de CSS”. En realidad, vienen de forma nativa, pero su uso en producción (sin un marco de preprocesador CSS) está muy lejos. Sin embargo, hay una función que en realidad tiene algo de compatibilidad con el navegador ahora que tiene una sensación de variable CSS, y esa es la currentColor valor.
Funciona así:
div {
color: red;
border: 5px solid currentColor;
box-shadow: 0 0 5px solid currentColor;
}Aprendí sobre esto en un panel en SXSW 2011 sobre CSS3 con Stephanie & Greg Rewis, Estelle Weyl y Christopher Schmitt. Al buscarlo en Google, apareció el artículo de Divya Manian que dice:
… puede usar este valor para indicar que desea usar el valor de color para otras propiedades que aceptan un valor de color: bordes, sombras de cuadro, contornos o fondos.
Este valor fue admitido por primera vez por Opera en 2009, desde entonces, Firefox 3.5+, Chrome 1+ y Safari 4+.
Aquí están las especificaciones y la información de ¿Puedo usar?
Seguirá la cascada
body { color: red; }
div { border: 5px solid currentColor; }No puedes engañarlo.
Digamos que desea aprovechar la calidad de la variable, pero luego restablece el color del texto real … esto no funcionará:
div {
color: red;
border: 5px solid currentColor;
box-shadow: 0 0 5px currentColor;
color: black;
}Todo será negro.
Casos de uso
- Usándolo en animación
- Bordes de botones y rellenos SVG que coinciden con el texto
- Diseño de interfaz que hereda el color en todos los componentes.
De simurai