Ya se ha convertido en una realidad. ¡Ya podemos hacer uso de Propiedades Personalizadas o CSS Custom Properties!
Pero primero de todo, empecemos con un buen <h2>, seguido de un buen <p> a modo de resumen.
Las CSS Custom Properties o Propiedades Personalizadas
O cómo hacer magia dentro de una hoja de estilos css.
Las Propiedades Personalizadas de CSS, es un «nuevo» concepto en el uso de las hojas de estilo CSS. Resumiendo y simplificando, se trata del uso de variables accesibles dentro del documento CSS e incluso desde Javascript, de forma NATIVA.
¿Por qué «nuevo» entre comillas? Pues seguramente conoceréis los CSS Preprocessors. Han estado muy de moda, pero con el nacimiento de las Custom Properties y conforme los diferentes navegadores vayan ofreciendo el soporte a éstas nuevas propiedades, están condenados a desaparecer tarde o temprano. Al final del escrito, tenéis una tabla del soporte entre navegadores, pero avanzo, que un 70% de los usuarios ya tiene un navegador con soporte a las Propiedades Personalizadas.
CSS y las Propiedades Personalizadas
Para ver la ventaja que supone entre una hoja de estilos CSS convencional, vamos a poner un ejemplo de una hoja de estilo CSS sin hacer uso de las Custom Properties y ésta misma, la «traduciremos» haciendo uso de las mismas.
Suponemos que queremos un body con un determinado color de fondo, el cual más tarde usaremos para pintar el color del texto en una capa y también haremos uso del color de texto del body para el color de fondo de la capa.
La capa1, tendrá un padding de 20px. La misma medida que tendrá el margin-top de la capa 2.
body{
background-color:#1b1b1b;
color:#fff;
}
.capa1{
padding:20px;
color:#1b1b1b;
background-color:#fff;
}
.capa2{
margin-top:20px;
}
Ahora replicaremos el mismo ejemplo, pero esta vez, haciendo uso de las Propiedades Personalizadas.
:root{
--color1:#1b1b1b;
--color2:#fff;
--mainSpacing:20px;
}
body{
background-color:var(--color1);
color:var(--color2);
}
.capa1{
padding:var(--mainSpacing);
color:var(--color1);
background-color:var(--color2);
}
.capa2{
margin-top:var(--mainSpacing);
}
Mediante :root, declaramos dentro las variables, que serán accesibles a lo largo de todo el documento CSS, introducimos el doble guión — para declarar una variable y su valor. Luego, para hacer uso de las variables declaradas, usamos var(–VARIABLE);.
Imaginemos ahora el uso que le podemos dar en una hoja de estilos CSS con más de 1000 lineas de código y en la facilidad en el momento de modificar valores. Tan solo tendremos que cambiar un valor, para que se refleje en todo el documento CSS.
Un paso más allá
O dos. Ya que las CSS Custom Properties, nos permiten hacer cálculos, realizar operaciones condicionales y aplicar valores por defecto, en caso de que cierta variable no esté definida. ¿Parce Javascript no? Pues todo esto lo hacemos dentro de la misma Hoja CSS.
Podemos sumar, multiplicar, comparar diferentes valores y aplicar un valor u otro en caso de darse el condicional.
.caja{
/*En caso de no tener declarada la variable1, se aplicarán 10px*/
margin-top:var(--variable1, 10px);
/*También podemos hacer uso de variables para establecer un valor por defecto*/
padding-top:var(--variable1,var(--variable2));
/*Podemos sumar, restar, multiplicar y dividir (*importante el espaciado en la suma y la resta)*/
padding-top:calc(var(--variable1) + 10px);
height:calc(var(--variable1) - 5px);
line-height:calc(var(--variable1) * 2);
width:calc((var(--variable1) - 5px)/2);
}
Otros ejemplos:
:root{
/*Podemos crear texto para ser insertado en un :before más tarde*/
--texto:"Click para ver";
}
.caja:before{
content:var(--text);
}
.caja2:before{
/*Podemos añadir más texto después de nuestra variable declarada (por ejemplo, un link a proyecto)*/
content:var(--text)' nuestro proyecto al completo';
}
.caja2:before{
/*Ahora lo usaremos para un link a una noticia*/
content:var(--text)' nuestra noticia';
}
Ejemplo condicional:
:root{
/*Podremos acceder mediante Javascript*/
--variableCond: if(x > 5) this.width = 10;
}
Soporte entre navegadores
Como veis, prácticamente, todos los navegadores lo soportan… ¡Salvo Explorer! ¡Que raro, NO ME LO ESPERABA ESO! Todo sea por recordar aquellos maravillosos años en que teníamos que hacer malabares maquetando para Explorer 6.
Por suerte, a diferencia de entonces, ahora tan solo son menos del 4% de usuarios utilizando Explorer. No big deal.
El total de usuarios que utilizan un navegador con soporte a las Custom Properties es del 70.9%. Muy elevado.
