soy Kseso y esto EsCSS

CSS custom properties acotadas y polivalentes

El alcance (cascada) de las propiedades CSS de autor o CSS custom properties en función de donde se declaren y la posibilidad de usar el mismo nombre con distintos valores en diferentes reglas CSS.

CSS custom properties acotadas y polivalentes

·Por Kseso ✎ 1

A estas alturas ya es sabido por todos (y si no calla y sigue leyendo ;-) que el alcance de las CSS custom properties o "declaraciones CSS de autor" depende de dónde se declare la equivalencia --nombre: valor;

Así, según en qué regla lo hagamos podemos clasificar las custom properties en función de su alcance en dos grupos:

  • Globales
  • Locales o acotadas (scoped)
Custom properties acotadas y polivalentes

Custom properties globales

Sólo necesitamos declarar la equivalencia --customName: valor; o bien en :root {}, html {} o body {} para que podamos usarla en cualquier elemento del documento. Estaríamos ante una "propiedad de autor" de alcance global.

Su uso propiedad: var(--valor) en cualquier regla CSS será computado y usado (siempre que no sea pisado por ningún otro valor ya sea por herencia o cascada).

Custom properties acotadas (scoped)

Otra forma de usar las custom properties es establecer la equivalencia en el bloque de declaraciones CSS de un selector concreto distinto de los anteriores:

article { --miProp: blue; } p { color: var(--miProp); }

Haciéndolo así única y exclusivamente los párrafos contenidos algún article serán mostrados en azul. En cualquier otro párrafo color: var(--miProp) no será computada. O mejor dicho, su cómputo será nulo y por lo tanto de no aplicación.

Estamos ante una "declaración de autor" de alcance local o acotada (CSS scoped).

Esta particularidad con los valores usados en el ejemplo no parece tener "mucha chicha", ¿verdad? Bueno, espera y sigue leyendo.

Custom properties polivalentes

Hace unas fechas Furoya en un intercambio epistolar me planteaba un pequeño reto relativo a uno de sus iconos CSS "single element". En concreto uno que me permite compartir contigo en primicia:

Newton's Cradle ['bolas de Newton animadas']

Autor: Furoya

La animación requiere 2 reglas @keyframes

Antes de seguir con "lo nuestro" te invito a que te fijes cómo crea las cinco bolas siendo un single element".

La cuestión es la siguiente: como tenemos dos elementos (las dos bolas de los extremos) con un movimiento (rotate) igual pero de signos opuestos (una gira hacia la izquierda y la otra a la derecha) se necesitan dos reglas @keyframes iguales pero con una transformación de giro de signo contrario en la segunda:

@keyframes pendulumI { 0%, 50%, 100% {transform: rotate(0);} 25% {transform: rotate(25deg);} } @keyframes pendulumD { 0%, 50%, 100% {transform: rotate(0);} 25% {transform: rotate(-25deg);} } .izquierda { animation: pendulumI .... ; } .derecha { animatión: pendulumD ... ; }

Y el reto consistía, ya que estaba minimizando el marcado HTML a un sólo elemento, hacer lo mismo con el CSS y lograr el mismo efecto con una sola regla @Keyrame.

Mi primer intento fue emplear las propiedades rotate y/o scale en una de las bolas para invertirla (a semejanza del "truco" base del post "Rueda la rueda del ratón ¿hacia dónde va el scroll?") y así poder usar en la animación la propiedad transform sin que se viese afectada la inversión previa.

Custom properties: mismo nombre, múltiples valores diferentes

Intento que deseché nada más meditarlo un poco y porque recordé las "propiedades de autor". En concreto dos de sus particularidades:

  1. Las "custom properties" acotadas sólo son computadas para el elemento al que apunta la regla CSS en la que están declaradas.
  2. Una consecuencia de lo anterior es que nada impide que una "custom property" con el mismo nombre se use en dos reglas distintas con valor diferente en cada una de ellas.

Volvamos al Código 1, el ejemplo del apartado Custom properties acotadas y a su semejanza declaremos:

article { --miProp: blue; } footer { --miProp: red; } p {color: var(--miProp);}

La consecuencia de ello es que los párrafos contenidos en los article se mostrarán en azul y aquellos que se encuentren en el footer serán rojos.

Recuerda que el nombre oficial del documento que las desarrolla es "CSS Custom Properties for Cascading Variables". Y la expresión cascading variables es la clave.

Aplicación práctica

Retomemos el reto de Furoya y apliquemos esta particularidad de las variables en cascada a sus bolas:

.izq, .dch { animation: pendulem ...; /*misma animación para ambos*/ } .izq { --miGiro: rotate(25deg); } .derecha { --miGiro: rotate(-25deg); } @keyframes pendulum { 0%, 50%, 100% {transform: rotate(0);} 25% {transform: var(--miGiro);} /*el valor computado está en función del declarado para cada --miGiro que hayamos establecido en cada regla*/ }

El resultado lo puedes ver a continuación. Y aunque el resultado (el efecto visual logrado) es exáctamente igual que el anterior...

Newton's Cradle ['bolas de Newton animadas']

Autor: Furoya

Usando custom properties sólo es necesaria una animación

...si le hechas un vistazo al inspector verás que sólo se necesita una (y la misma) regla @keyframes para obtener dos movimientos diferentes de las bolas (igual rotación con signo contrario).

Captura inspector de código
"CSS custon property" acotada y polivalente

Pese a ser la misma animación para ambos elementos, el valor computado de transform: var(--miGiro); es distinto en cada uno de ellos.

Porque recuerda: a diferencia de lo que ocurre con las 'variables' nativas de los procesadores CSS que son sustituidas por su valor al mandar los estilos al navegador (y por lo tanto desaparecen como tales del código CSS) las 'custom properties" nativas de CSS se mantienen inmutables en el código recibido por el navegador; y en vez de sustituirlas lo que ocurre es que su valor es computado cada vez que el navegador se topa con ellas.

Lecturas complementarias

Las Custom Properties no son variables CSS. Pero molan
CSS Custom Properties for Cascading Variables Module Level 1 llamadas erróneamente en ocasiones como variables CSS. El porqué, un poco de su historia, cómo usarlas y diferencia con las variables de las herramientas para manejar CSS (procesadores).

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso