Variables CSS (propiedades personalizadas)

Descubra las propiedades personalizadas de CSS, también llamadas Variables CSS, una nueva y poderosa característica de los navegadores modernos que lo ayudan a escribir mejor CSS

Introducción

En los últimos años, los preprocesadores de CSS han tenido mucho éxito. Era muy común que los nuevos proyectos comenzaran con Less o SASS. Y sigue siendo una tecnología muy popular.

Los principales beneficios de esas tecnologías son, en mi opinión:

  • Permiten anidar selectores
  • Proporcionan una funcionalidad de importación sencilla
  • Te dan variables

El CSS moderno tiene una nueva característica poderosa llamadaPropiedades personalizadas de CSS, también conocido comoVariables CSS.

CSS no es un lenguaje de programación comoJavaScript, Python, PHP, Ruby o Go donde las variables son clave para hacer algo útil. CSS es muy limitado en lo que puede hacer, y es principalmente una sintaxis declarativa para decirle a los navegadores cómo deben mostrar una página HTML.

Pero una variable es una variable: un nombre que se refiere a un valor, y las variables en CSS ayudan a reducir la repetición y las inconsistencias en su CSS, al centralizar la definición de valores.

E introduce una característica única que los preprocesadores de CSS nunca tendrán:puede acceder y cambiar el valor de una variable CSS mediante programación usando JavaScript.

Los fundamentos del uso de variables

Una variable CSS se define con una sintaxis especial, anteponiendodos guionesa un nombre--variable-name), luego dos puntos y un valor. Como esto:

:root {
  --primary-color: yellow;
}

(más en:rootmás tarde)

Puede acceder al valor de la variable usandovar():

p {
  color: var(--primary-color)
}

El valor de la variable puede ser cualquier valor CSS válido, por ejemplo:

:root {
  --default-padding: 30px 30px 20px 20px;
  --default-color: red;
  --default-background: #fff;
}

Crea variables dentro de cualquier elemento

Las variables CSS se pueden definir dentro de cualquier elemento. Algunos ejemplos:

:root {
  --default-color: red;
}

body { –default-color: red; }

main { –default-color: red; }

p { –default-color: red; }

span { –default-color: red; }

a:hover { –default-color: red; }

Lo que cambia en esos diferentes ejemplos es elalcance.

Alcance de las variables

Agregar variables a un selector las pone a disposición de todos sus hijos.

En el ejemplo anterior, vio el uso de:rootal definir una variable CSS:

:root {
  --primary-color: yellow;
}

:rootes una pseudoclase CSS que identifica el elemento raíz de un árbol.

En el contexto de un documento HTML, utilizando el:rootel selector apunta alhtmlelemento, excepto que:roottiene mayorespecificidad(tiene prioridad).

En el contexto de una imagen SVG,:rootapunta alsvgetiqueta.

Agregar una propiedad personalizada de CSS a:rootlo pone a disposición de todos los elementos de la página.

Si agrega una variable dentro de un.containerselector, solo estará disponible para los hijos de.container:

.container {
  --secondary-color: yellow;
}

y usarlo fuera de este elemento no funcionará.

Las variables pueden serreasignado:

:root {
  --primary-color: yellow;
}

.container { –primary-color: blue; }

Afuera.container,--primary-colorestaránamarillo, pero por dentro estaráazul.

También puede asignar o sobrescribir una variable dentro del HTML usandoestilos en línea:

<main style="--primary-color: orange;">
  <!-- ... -->
</main>

Las variables CSS siguen lo normalReglas en cascada de CSS, con precedencia establecida segúnespecificidad

Interactuar con un valor de variable CSS usando JavaScript

Lo mejor de las variables CSS es la posibilidad de acceder a ellas y editarlas mediante JavaScript.

Así es como establece un valor de variable usando JavaScript simple:

const element = document.getElementById('my-element')
element.style.setProperty('--variable-name', 'a-value')

Este código a continuación se puede usar para acceder a un valor de variable en su lugar, en caso de que la variable esté definida en:root:

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--variable-name')).trim()

O, para que el estilo se aplique a un elemento específico, en el caso de las variables establecidas con un alcance diferente:

const element = document.getElementById('my-element')
const styles = getComputedStyle(element)
const value = String(styles.getPropertyValue('--variable-name')).trim()

Manejo de valores inválidos

Si se asigna una variable a una propiedad que no acepta el valor de la variable, se considera inválida.

Por ejemplo, puede pasar un valor de píxel a unpositionpropiedad, o un valor rem a una propiedad de color.

En este caso, la línea se considera inválida y se ignora.

Soporte de navegador

El soporte del navegador para variables CSS esMuy bueno,de acuerdo con puedo usar.

Las variables CSS llegaron para quedarse, y puede usarlas hoy si no necesita ser compatible con Internet Explorer y las versiones anteriores de otros navegadores.

Si necesita admitir navegadores más antiguos, puede usar bibliotecas comoPostCSSoMito, pero perderá la capacidad de interactuar con las variables a través de JavaScript o las herramientas de desarrollo del navegador, ya que se trasladan al buen CSS sin variables (y como tal, pierde la mayor parte del poder de las variables CSS).

Las variables CSS distinguen entre mayúsculas y minúsculas

Esta variable:

--width: 100px;

es diferente a:

--Width: 100px;

Matemáticas en variables CSS

Para hacer matemáticas en Variables CSS, debe usarcalc(), por ejemplo:

:root {
  --default-left-padding: calc(10px * 2);
}

Consultas de medios con variables CSS

Nada especial aqui. Las variables CSS normalmente se aplican a las consultas de medios:

body {
  --width: 500px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) { –width: 800px; }

.container { width: var(width); }

Establecer un valor de respaldo para var ()

var()acepta un segundo parámetro, que es el valor de respaldo predeterminado cuando no se establece el valor de la variable:

.container {
  margin: var(--default-margin, 30px);
}

Descarga mi gratisManual de CSS


Más tutoriales de CSS: