Propiedades personalizadas (--*): variables CSS

Los nombres de las propiedades que tiene el prefijo --, como --ejemplo-nombre, representan las propiedades personalizadas que contienen un valor que puede ser usado en otras declaraciones usando la función var.

Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.

Valor inicialsee prose
Applies toall elements
Heredableyes
Valor calculadoas specified with variables substituted
Animation typediscrete

Sintaxis

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaración-valor>
Este valor coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga un token no permitido.

Nota: Los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas — --mi-color se tratará como una propiedad personalizada separada de --Mi-color.

Sintaxis formal

<declaration-value>

Ejemplo

HTML

<p id="firstParagraph">Este párrafo debe tener un fondo azul y un texto amarillo.</p>
<p id="secondParagraph">Este párrafo debe tener un fondo amarillo y un texto azul.</p>
<div id="container">
  <p id="thirdParagraph">Este párrafo debe tener un fondo verde y un texto amarillo.</p>
</div>

CSS

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

Resultado

Especificaciones

Especificación Estado Comentario
CSS Custom Properties for Cascading Variables Module Level 1
La definición de '--*' en esta especificación.
Candidate Recommendation Initial definition.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
--*Chrome Soporte completo 49
Soporte completo 49
Soporte completo 48
Deshabilitado
Deshabilitado From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 15Firefox Soporte completo 31
Soporte completo 31
Sin soporte 29 — 55
Notas Deshabilitado
Notas From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
Deshabilitado From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 36Safari Soporte completo 9.1WebView Android Soporte completo 49Chrome Android Soporte completo 49
Soporte completo 49
Soporte completo 48
Deshabilitado
Deshabilitado From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Soporte completo 31
Soporte completo 31
Sin soporte 29 — 55
Notas Deshabilitado
Notas From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
Deshabilitado From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 36Safari iOS Soporte completo 9.3Samsung Internet Android Soporte completo 5.0
env()
Experimental
Chrome Soporte completo 69Edge Soporte completo 79Firefox Soporte completo 65IE Sin soporte NoOpera Soporte completo 56Safari Soporte completo 11.1
Soporte completo 11.1
Sin soporte 11 — 11.1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : constant
WebView Android Soporte completo 69Chrome Android Soporte completo 69Firefox Android Soporte completo 65Opera Android Soporte completo 48Safari iOS Soporte completo 11.3
Soporte completo 11.3
Sin soporte 11 — 11.3
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : constant
Samsung Internet Android Soporte completo 10.0
var()Chrome Soporte completo 49
Soporte completo 49
Soporte completo 48
Deshabilitado
Deshabilitado From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 15Firefox Soporte completo 31
Soporte completo 31
Sin soporte 29 — 55
Deshabilitado
Deshabilitado From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 36Safari Soporte completo 9.1WebView Android Soporte completo 50Chrome Android Soporte completo 49
Soporte completo 49
Soporte completo 48
Deshabilitado
Deshabilitado From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Soporte completo 31
Soporte completo 31
Sin soporte 29 — 55
Deshabilitado
Deshabilitado From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 36Safari iOS Soporte completo 9.3Samsung Internet Android Soporte completo 5.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Usa un nombre no estandar.
Usa un nombre no estandar.

Ver también