Variables nativas de css ¿qué son y por qué utilizarlas?

Variables nativas de css

Variables nativas de css ¿qué son y por qué utilizarlas?

Variables nativas de css

Las variables nativas de css, también conocidas como propiedades css no estándar, son reglas de css o valores personalizados que podemos utilizar a nuestro antojo en la hoja de estilos css. Mediante estas variables podemos crear una propiedad con el nombre que elijamos y llamarla  tantas veces como sea necesario para que actúe en nuestros selectores.

Variables nativas de css

Variables nativas de css

Para crearlas simplemente utilizamos este código:

:root {

    --MiColor: #CCCCCC;

}

Y utilizarlas es tan sencillo como:

body {

    background-color: var(--MiColor);

}

En el ejemplo, hemos almacenado un valor que hace referencia a un color. Podremos utilizar esta variable siempre y cuando la propiedad css que estemos creando admita un color como valor.

Si ponemos algo como:

body {

    Font-size: var(--MiColor);

}

No dará error, pero obviamente no funcionará. Simplemente la regla no se aplica.

Los que conozcan preprocesadores de css como SASS o LESS reconocerán esta tecnología. Ya era posible almacenar valores en variables personalizadas, pero hacerlo con css plano nos da una ventaja sobre los preprocesadores y es que podemos ver los cambios en tiempo real.

Por ejemplo, podremos combinar esta herramienta con JavaScript para que sea el propio usuario el que modifique el estilo de la web a su antojo. Pero esta es sólo una de las ventajas que nos ofrecen las variables nativas de css. Tanto con css plano como con la ayuda de JavaScript podemos hacer cosas realmente útiles.

¿Qué aplicaciones tiene el uso de estas variables?

Imaginaos que estamos finalizando un proyecto web. Para este proyecto hemos seleccionado un color principal (#7AA4F8) y lo hemos utilizado en muchas partes de nuestra web (links, bakgrounds, cabeceras, títulos…). Una vez finalizado, el cliente nos pide que cambiemos este color, porque ya no le gusta. Aquí solía venir el drama. La única solución era abrir nuestra hoja de estilos y utilizar la función “Buscar y reemplazar” en el editor de textos, con cuidado de no olvidar alguna de las reglas que queríamos sustituir.

La ventaja principal de las variables nativas es ahorrarnos precisamente esta tarea. Si aplicamos una variable para el color principal de la página (–MiColor: 7AA4F8) y luego la utilizamos a lo largo y ancho de nuestro proyecto, no sufriremos ante los posibles cambios que puedan presentarse. Modificando el valor de nuestra variable estaremos afectando a todas las demás.

¿No es fantástico?

Pero esto no es todo. Imaginaos las ventajas de usar estas variables con el uso de media queries. Pues sí, esto es una realidad, ya que la declaración de estas variables sigue la herencia en cascada de las propiedades estándar, por lo que podremos asignar distintos valores a nuestra variable y siempre mandará la última regla decretada. Si por ejemplo asignamos  un tamaño de fuente para los títulos h1, podemos modificar esta regla en las distintas resoluciones de pantalla para conseguir un diseño responsive. Al mismo tiempo (en este ejemplo) modificaremos el tamaño de unos bloques.

Ejemplo:

:root {

    --h1Size: 32px;

    --itemSize: 33%;

}

 

h1 {

    font-size: var(--h1Size);

}

.item {

    width: var(--itemSize)

}

@media screen and (max-width: 768px) {

    :root {

        --h1Size: 26px;

        --itemSize: 50%;

    }

}

@media screen and (max-width: 480px) {

    :root {

        --h1Size: 18px;

        --itemSize: 100%;

    }

}

Como veis, gracias a la variables de css, podemos crear reglas responsive mucho más breves y sencillas. Sólo con el selector :root  estaremos aplicando cambios responsive a todas las líneas que utilicen nuestras variables, sin la necesidad de llamar una y otra vez a los mismos selectores, generando miles de líneas de código innecesarias.

Compatibilidad con los navegadores.

Actualmente casi todos los navegadores soportan esta función. (Firefox 43+, Safari 9.1+, iOS Safari 9.3+, Chrome 49+). El único navegador importante que no admite el uso de variables nativas es Internet Explorer. Pero actualmente se está trabajando para implementarlas en el nuevo navegador de Microsoft Edge. Esperemos que con el tiempo se consolide esta tecnología, también a medida que los usuarios vayan abandonado Internet Explorer para utilizar Edge u otros navegadores modernos.

Para saber más:

https://www.w3.org/TR/css-variables-1/

http://librosweb.es/tutorial/como-usar-las-nuevas-variables-css/

2Comentarios

  • César Gorgorita
    27/02/2018

    Hola buen día será que me podrías explicar como cambiar la variable desde JavaScript, me sería de gran ayuda.

Escribe un comentario