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

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La función var() puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).

Sintaxis

El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.

var( <custom-property-name> [, <declaration-value> ]? )

Valores

<custom-property-name>
El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.
<declaration-value>
El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .

Ejemplos

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

body {
  background-color: var(--main-bg-color);
}
/* Fallback */
/* En el estilo del componente: */
.component .header {
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/* En el estilo de la aplicación: */
.component {
  --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
}

Especificaciones

Especificación Estado Comentario
CSS Custom Properties for Cascading Variables Module Level 1
La definición de 'var()' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad con navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica  Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 48[2]
49
29 (29)[1]
31 (31)
Sin soporte 36 9.3[3]
Característica  Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 50 29 (29) Sin soporte 37 9.3[3]

[1] Esta característica es activada con la preferencia layout.css.variables.enabled, por defecto, con valor false y usando la sintaxis angituga en Gecko 29. Desde Gecko 31 esta preferencia está activada por defecto y utiliza la sintaxis --nombredevariable.

[2] Chrome 48 activable a través de el flag "Experimental Web Platform features" flag en chrome://flags.

[3] Ver WebKit bug 19660.

Ver también

Etiquetas y colaboradores del documento

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