We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Hubo un error de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver una parte del contenido más abajo.

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Las variables CSS son entidades definidas por autores CSS que contienen valores específicos que se pueden volver a utilizar en un documento. Se establecen mediante la notación de propiedades personalizadas (por ejemplo, --main-color: black;) y se accede mediante la función var() (por ejemplo, color: var (- main-color);).

Sitios web complejos tienen cantidades muy grandes de CSS, a menudo con una gran cantidad de valores repetidos. Por ejemplo, el mismo color se puede utilizar en cientos de lugares diferentes, que requieren búsqueda global y reemplazar si ese color necesita cambiar. Las variables CSS permiten que un valor se almacene en un lugar y luego se haga referencia en varios otros lugares. Un beneficio adicional son los identificadores semánticos. Por ejemplo --main-text-color es más fácil de entender que #00ff00, especialmente si este mismo color también se utiliza en otro contexto.

Las variables CSS están sujetas a la cascada, y heredan su valor de sus padres

Uso Básico

Declaración de una variable

elemento {
  --main-bg-color: brown;
}

Utilizando la variable

elemento {
  background-color: var(--main-bg-color);
}

Nota: El prefijo de propiedad personalizada era var- en la especificación anterior, pero posteriormente cambió a --. Firefox 31 y superiores siguen la nueva especificación. ({{Bug (985838)}}

Primeros Pasos con Variables CSS

Comencemos con este simple CSS que colorea elementos de diferentes clases con el mismo color:

.uno {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.dos {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.tres {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.cuatro {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.cinco {
  background-color: brown;
}

Lo aplicaremos a este HTML:

<div>
    <div class="uno">1:</div>
    <div class="dos">2: Texto <span class="cinco">5 - mas texto</span></div>
    <input class="tres">
    <textarea class="four">4: Lorem Ipsum</textarea>
</div>

Que nos lleva a esto:

{{EmbedLiveSample("sample1",600,180)}}


Observe la repetición en el CSS. El color de fondo se pone a marrón (brown) en varios lugares. Para algunas declaraciones CSS, es posible declarar esto más alto en la cascada y dejar que la herencia CSS resuelva este problema de forma natural. Para proyectos no triviales, esto no siempre es posible. Al declarar una variable en la pseudo-clase raíz, un autor CSS puede detener algunas instancias de repetición usando la variable.

:root {
  --main-bg-color: brown;
}

.uno {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.dos {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.tres {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.cuatro {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.cinco {
  background-color: var(--main-bg-color);
}

<div>
    <div class="uno"></div>
    <div class="dos">Text <span class="cinco">- more text</span></div>
    <input class="tres">
    <textarea class="cuatro">Lorem Ipsum</textarea>
</div>

Esto conduce al mismo resultado que el ejemplo anterior pero permite una declaración canónica de la propiedad deseada.

Herencia de variables CSS

Las propiedades personalizadas heredan. Lo que significa que si no se establece ningún valor para una propiedad personalizada en un elemento dado, se utiliza el valor de su elemento principal

<div class="uno">
  <div class="dos">
    <div class="tres"></div>
    <div class="cuatro"></div>
  </div>
</div>

Con el siguiente CSS:

.dos {
  --test: 10px;
}

.tres {
  --test: 2em;
}

En este caso, los resultados de var(--test) son:

  • Para el elemento class="two": 10px
  • Para el elemento class="three": 2em
  • Para el elemento class="four": 10px (Heredado de su padre)
  • Para el elemento class="one": valor no válido, que es el valor predeterminado de cualquier propiedad personalizada.

Tenga en cuenta que estas son propiedades personalizadas, no variables CSS reales. El valor se calcula donde sea necesario, no se almacena para su uso en otras reglas. Por ejemplo, no se puede establecer una propiedad para un elemento y esperar recuperarla en la regla del descendiente de un hermano. La propiedad sólo está configurada para el selector de emparejamiento y sus descendientes, como cualquier CSS normal.

Valores de sustitución (fallback) de propiedades personalizadas

Utilizando var() puede definir múltiples valores de sustitución (fallback) cuando la variable dada no está definida aún, esto puede ser útil cuando se trabaja con Custom Elements y Shadow DOM.

El primer argumento a la función es el nombre de la propiedad personalizada que se va a sustituir. El segundo argumento a la función, si se proporciona, es un valor de reserva, que se utiliza como valor de sustitución cuando la propiedad personalizada referenciada no es válida. P.ej:

.dos {
  color: var(--my-var, red); /* Rojo (red) si --my-var no esta definida */
}

.tres {
  background-color: var(--my-var, var(--my-background, pink)); /* Rosa (pink) si my-var y --my-background no están definidas */
}

.tres {
  background-color: var(--my-var, --my-background, pink); /* Invalido: "--background, pink" */
}

La sintaxis del fallback (), como la de las propiedades personalizadas, permite comas. Por ejemplo, var(--foo, red, blue) define un fallback de rojo, azul; Es decir, cualquier cosa entre la primer coma y el final de la función se considera un valor de fallback.

También se ha visto que este método causa problemas de rendimiento. Hace que los navegadores rendericen las páginas más lentamente de lo normal, ya que toma más tiempo para analizar las variables.

Validez y Valores

El clásico concepto CSS de validez, vinculado a cada propiedad, no es muy útil con respecto a las propiedades personalizadas. Cuando se analizan los valores de las propiedades personalizadas, el explorador no sabe dónde se utilizarán, por lo que debe considerar casi todos los valores como válidos.

Desafortunadamente, estos valores válidos se pueden usar, a través de la notación funcional var(), en un contexto en el que tal vez no tengan sentido. Propiedades y variables personalizadas pueden llevar a declaraciones CSS no válidas, dando lugar al nuevo concepto de válido en tiempo calculado.

Valores in JavaScript

Para utilizar los valores de las propiedades personalizadas en JavaScript, es como las propiedades estándar.

// Obtener la variable desde el estilo inline
element.style.getPropertyValue("--my-var");
// Obtener variable desde cualquier lugar
getComputedStyle(element).getPropertyValue("--my-var");

// Establecer variable en estilo inline
element.style.setProperty("--my-var", jsVar + 4);

Compatibilidad del Navegador

{{Tabla de Compatibilidad}}

 
Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
 Soporte Básico 49.0 (Si) 42 (42) Sin soporte 36.0 9.1 
  
Característica Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome para Android
Soporte Básico (Yes) 29 (29) ? ? 9.1 49.0

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: Creasick, Maseria38, FlorTello
Última actualización por: Creasick,