NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Referéncia CSS : Variables

28 de Junio del 2016 por Josep Antoni Bover, 189 visitas, 0 comentarios, 0 votos
Categorías : CSS, JavaScript, HTML, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Referéncia CSS : Variables

Recientemente se han vuelto a habilitar las variables css en chrome, y me parece un tema a empezar a tener en cuenta ya que a mi entender es algo que debería haber existido desde el CSS1. Por ejemplo en cualquier diseño web se acaban utilizando siempre unos determinados colores, estos colores se pueden llegar a repetir decenas e incluso cientos de veces en una o varias hojas de estilo, y si llega el caso de querer modificar uno de esos colores vamos a tener una ardua tarea por delante.

Con las variables CSS este problema desaparece, ya que podemos declarar dicho color y enlazar todos los elementos que lo van a utilizar a la variable. Además podemos llegar a modificar la variable desde JavaScript, lo que nos da aún mas versatilidad. Por ultimo también ayuda mucho a la hora de leer el código, ver una variable del estilo --ColorFondo que ver #632784.

En definitiva todo son ventajas, excepto por una cosa... no funciona ni funcionará en ninguna versión de Internet Explorer. Por suerte he leído en alguna parte que desde hace poco funcionan las variables css en Edge (el nuevo navegador de windows 10), pero es algo que no he podido comprobar.

Puede que con algún script tipo Modernizr se pueda hacer algo con variables css en Internet Explorer, pero seguimos con la misma tónica respecto a los navegadores huérfanos de microsoft. Cada vez que sale una nueva versión de windows sale con su navegador mejorado, pero van dejando los navegadores de las versiones anteriores de windows sin actualizar.

Declaración de variables CSS

Lo primero que debemos entender antes de nada es que las variables se declaran en un ámbito, y este ámbito puede ser global o restringido solo para ciertos elementos.

Los nombres de las variables CSS siempre deben empezar con -- seguido del nombre, por ejemplo :

--Variable : valor;

El valor puede ser cualquier cosa en principio...

Digo en principio, ya que parece que aguanta bien cualquier tipo de parámetro, incluso he probado --Variable : var(--Variable); que mi para mi mente retorcida es algo que podría acabar en un bucle infinito o incluso en un crash, y oye me ha sorprendido... no he roto nada, ni ha pasado nada.

A continuación un par de ejemplos de creación de variables :

/* -[INICIO devildrey33.global]- */
/* Variable global accesible desde todas las etiquetas */
:root { 
    --MiVariable:calc(100% - 6px); 
}
/* -[FIN devildrey33.global]- */    
    
/* -[INICIO devildrey33.local]- */
/* Variable local accesible solo para las etiquetas que estén dentro de #MiID, o .MiClase */
#MiID, .MiClase { 
    --MiVariable:blue; 
}
/* -[FIN devildrey33.local]- */
        
1
2
3
4
/* Variable global accesible desde todas las etiquetas */
:root {
--MiVariable:calc(100% - 6px);
}
1
2
3
4
/* Variable local accesible solo para las etiquetas que estén dentro de #MiID, o .MiClase */
#MiID, .MiClase {
--MiVariable:blue;
}

En el primer ejemplo se ha creado --MiVariable dentro del selector :root de forma que todas las etiquetas del documento podrán tener acceso a ella. En el segundo ejemplo la variable --MiVariable solo existe para la etiquetas #MiID, .MiClase, y para todas las etiquetas que estén dentro de estas.

Para comprender mejor como funcionan las variables globales y locales os he preparado un ejemplo en el que el color del texto de las etiquetas <span> se determina por una variable CSS.

Vamos a tener la variable --ColorTexto con el mismo nombre en varios ámbitos, y con distintos valores. Fijaros en las líneas 10, 12, y 14 donde podemos ver 3 variables con valores distintos.

Ejemplo :


Si creamos una variable solamente para un ámbito local, y una propiedad intenta acceder a ella en otro ámbito desde el que no tiene acceso, no sucederá absolutamente nada y la propiedad permanecerá igual que antes.

Enlazar variables a las propiedades

Una vez tenemos creadas las variables hay que enlazarlas a las propiedades, para ello se utiliza la función var.

Sintaxis

var ( --Variable [requerido] , ValorInicial [opcional]  ) 
--Variable Nombre de la variable a enlazar. Las variables siempre empiezan por --
ValorPorDefecto Valor que recibirá la propiedad en el caso de no existir la variable. Este parámetro es opcional, si no se especifica este parámetro y la variable no existe, la propiedad permanecerá intacta.

Veamos un ejemplo :

/* -[INICIO devildrey33.var]- */
:root { --MargenIzquierdo : 2em; }
p     { margin-left       : var(--MargenIzquierdo); }
/* -[FIN devildrey33.var]- */

/* -[INICIO devildrey33.borde]- */
article { --ColorBorde : #000; }
button  { border       : 1px solid var(--ColorBorde, #000); }
/* -[FIN devildrey33.borde]- */
/* -[INICIO devildrey33.obtenervariable]- */
function ObtenerVariableCSS(Variable) {
    var EstilosComputados = window.getComputedStyle(document.body);
    return EstilosComputados.getPropertyValue(Variable);
}
/* -[FIN devildrey33.obtenervariable]- */
/* -[INICIO devildrey33.asignarvariable]- */
function AsignarVariableCSS(Variable, Valor) {
    document.body.style.setProperty(Variable, Valor);
}
/* -[FIN devildrey33.asignarvariable]- */

        
1
2
:root { --MargenIzquierdo : 2em; }
p { margin-left : var(--MargenIzquierdo); }

En la primera línea creamos la variable --MargenIzquierdo con un valor de 2em. En la segunda línea asignamos a la propiedad margin-left la variable --MargenIzquierdo utilizando la función var.

1
2
article { --ColorBorde : #000; }
button { border : 1px solid var(--ColorBorde, #000); }

En este ejemplo tenemos una variable con el color del borde, y aplicamos la función var en el último parámetro de la propiedad border. Como la variable --ColorBorde solo existe dentro del ámbito de una etiqueta article, nos aseguramos de que el borde será negro en el segundo parámetro de la función var.

Obtener y modificar variables CSS desde JavaScript

Hasta ahora hemos visto como crear y utilizar variables en el CSS, pero que pasa si necesitamos mostrar o modificar una variable via JavaScript? Aquí la cosa se complica ya que nos va a tocar acceder a los estilos computados por el navegador.

El siguiente ejemplo nos muestra como obtener una variable global desde los estilos computados por el navegador :

Obtener una variable global del CSS
1
2
3
4
function ObtenerVariableCSS(Variable) {
var EstilosComputados = window.getComputedStyle(document.body);
return EstilosComputados.getPropertyValue(Variable);
}

La función del ejemplo anterior nos devuelve el contenido de la variable global que especifiquemos.

En la segunda línea obtengo los estilos computados con la función window.getComputedStyle, para después en la línea 3 utilizar la función getPropertyValue, que nos devolverá el valor de la propiedad o en este caso variable especificada.

El problema de los estilos computados es que no podemos acceder al CSS de forma abstracta y solo disponemos del CSS que ha sido computado para cada elemento. Si queremos acceder a una variable que no esté en el ámbito global, vamos a tener que especificar en la función getComputedStyle una etiqueta bajo ese ámbito en vez del document.body.

Veamos como asignar un valor a una variable global del CSS :

Asignar un valor a una variable global del CSS
1
2
3
function AsignarVariableCSS(Variable, Valor) {
document.body.style.setProperty(Variable, Valor);
}

Como veis en el ejemplo anterior se utiliza la función style.setProperty, de un elemento que se encuentre dentro del ámbito de la variable. En este caso como la variable es global podemos utilizar document.body directamente.

Por último os dejo un ejemplo que modifica vía JavaScript cuatro variables que contienen los colores de los cuatro marcos que tiene el ejemplo.

Ejemplo :