MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

{{SeeCompatTable}}

 

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 la propiedad personalizada varía 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"></div>
    <div class="dos">Texto <span class="cinco">- mas texto</span></div>
    <input class="tres">
    <textarea class="four">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 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 y valores de fallback

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 la clase="dos" elemento: 10px
  • para la clase="tres" elemento: 2em
  • para la clase="cuatro" elemento: 10px (Heredado de su matriz)
  • para la clase="uno" elemento:Valor no válido, que es el valor predeterminado de cualquier propiedad personalizada.

 

Utilizando var () puede definir valores de falla mutiple cuando la variable dada no está definida aún, esto puede ser útil cuando se trabaja con Custom Elements y DOM de sombra.

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); /* Red if --my-var is not defined */
}

.tres {
  background-color: var(--my-var, var(--my-background, pink)); /* pink if my-var and --my-background are not defined */
}

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

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

Este método también se ha visto para causar problemas de rendimiento. Hace navegadores hacer páginas más lentamente de lo normal, ya que toma más tiempo para analizar a través de 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.

Compatibilidad del Navegador

{{Tabla de Compatibilidad}}

  

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte Básico {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
33.0
{{CompatNo}} 34.0[2]
{{CompatChrome(49.0)}}
{{CompatVersionUnknown}} {{CompatGeckoDesktop("29")}}[3]
{{CompatGeckoDesktop("31")}}
{{CompatNo}} {{CompatOpera(36.0)}} 9.1

  

Característica Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Soporte Básico {{CompatNo}} {{CompatChrome(49.0)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("29")}} {{CompatUnknown}} {{CompatUnknown}} 9.1 {{CompatChrome(49.0)}}

[1] Inicialmente, Chrome implementó esta característica utilizando una sintaxis diferente, que requería prefijar nombres de propiedades personalizadas con -webkit-var- para definirlos. A continuación, podrían utilizarse sin prefijar dentro de una función -webkit-var (). Además, la implementación se ocultó detrás de la opción Activar las características experimentales de WebKit en chrome: // flags, más tarde renombrada como Habilitar características experimentales de la Plataforma Web.

[2] Chrome 34.0 eliminó esta función debido a problemas de rendimiento.

[3] Esta característica se implementa detrás de la preferencia layout.css.variables.enabled, por defecto a false y usando la antigua sintaxis var-variablename en Gecko 29. A partir de Gecko 31 la preferencia está habilitada por defecto y la nueva sintaxis --variablename Se utiliza. Desde Gecko 55, la preferencia layout.css.variables.enabled se ha eliminado por completo, de modo que la característica está activada todo el tiempo y ya no se puede desactivar.

Etiquetas y colaboradores del documento

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