NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Referéncia CSS : Variables

28 de Junio del 2016 por Josep Antoni Bover1838 visitas, 2 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.

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.


[#2] devildrey33 20 Septiembre del 2016 a las 17:42, votos 0 de 0.
1 Buenas Gonzalo, gracias por comentar.

Antes de nada debo advertirte que el WormHole esta hecho en 3D utilizando la librería Three.js, y quizás antes de entrar en temas de 3D deberías empezar con 2D.

Yo me considero una persona autodidacta, y aunque no he seguido ningun tutorial de canvas desde el principio hasta el fin, si que en algunos casos concretos lo mejor es buscar algo similar a lo que quieres en google, y empezar a partir de allí.

Donde he aprendido mas sobre canvas, ha sido a base de toquetear ejemplos en http://codepen.io
Es una red social para programadores web, donde hay gente con mucho nivel que comparte sus ejemplos con todo el mundo.
Lo bueno es que viendo ejemplos de otra gente, tienes una nueva fuente de inspiración, y descubres trucos interesantes.
Sin ir mas lejos, la idea del WormHole se me ocurrió a partir de un ejemplo de codepen.

Yo te recomendaría mirarte ejemplos fáciles (con poco código), e intentarlos entender y reproducir por ti mismo. Cuando te quedes atascado con algún problema siempre puedes consultar el ejemplo original para ver cómo está hecho.

Una vez tengas el tema del 2D mas asimilado, si deseas empezar a hacer cosas en 3D yo te recomiendo encarecidamente utilizar la librería Three.js, ya que te simplificara mucho el código, y no necesitaras tantas matemáticas comparado a si programaras 3D de forma nativa en el canvas.

En fin, espero que te sirva de ayuda, Saludos!

[#1] Gonzalo 20 Septiembre del 2016 a las 16:12, votos 1 de 1.
Hola Josep, cómo te va?

Gracias por todos tus aportes, la verdad que me sirvieron mucho. Yo estoy aprendiendo diseño web front end y me atrae mucho la parte visual o las animaciones en canvas como el wormhole por ejemplo. 
Lamentablemente voy a un paso muy lento, se me hace complicado la parte de las matemáticas ademas de que creo que todavía necesito desarrollar esa parte visual del cerebro.
Podrías recomendarme algo para empezar a meterme en ese mundo de una manera más fluida o con una mejor transición?  O simplemente me queda meterme a ensuciarme las manos y entender todo a la fuerza?

Saludos!