El truco de alternar propiedad personalizada de CSS

En julio de 2020, recibí un correo electrónico de James0x57 (siempre trato de referirme a las personas por su nombre, pero creo que tengo la sensación de que prefieren usar su nombre de usuario) que decía:

Todo el mundo de la lógica condicional de ramificación y la alternancia masiva de funciones para propiedades CSS personalizadas es posible y solo existe debido a una pequeña nota al pie en la especificación CSS que ha pasado desapercibida.

Esa línea es:

Nota: Si bien valor-declaración debe representar al menos un token, ese token puede ser un espacio en blanco.

En otras palabras, --foo: ;es válido.

Si eres como yo, esto no parece una revelación masiva que abra puertas enormes, pero para personas más inteligentes, como James0x57, ¡sí lo es! Comenzamos a trabajar en un borrador de publicación de blog, pero por varias razones no llegó hasta aquí. Una de esas razones es que simplemente no lo entendía. Llámame denso, lo siento James0x57. Sin embargo, una demostración que me enviaron cuando pedí un ejemplo súper simplificado fue útil y creo que me hizo clic. Aquí está mi interpretación:

Permítanme intentar explicar:

• El punto de interrupción que hemos configurado aquí es una max-widthconsulta de medios de 900 px. Puede ver que ahí es donde la variable --mq-smpasa initiala un valor de espacio vacío.
• Cuando la ventana del navegador tiene más de 900 px, el valor de --mq-smes initial.
  • Eso hace que la variable --padding-when-smallcontenga dos valores, initialy 2rem, supongo que no es válido .
  • Entonces, cuando configuramos el relleno y llamamos a esa variable como padding: var(--padding-when-small, var(--padding-when-large)), se usa el segundo valor (el “retroceso”) porque el primer valor no es válido.
• Cuando la ventana del navegador tiene menos de 900 px, el --mq-smvalor es un espacio.
  • Eso hace que el --padding-when-smallvalor de la variable "(space)2rem", supongo, sea válido .
  • Eso significa que cuando configuramos el relleno y llamamos a esa variable como , se usa padding: var(--padding-when-small, var(--padding-when-large))el primer valor.

Entonces, ahora podemos invertir el relleno entre dos valores cambiando una variable de marcador de posición.

Eso hace clic para mí.

Cuando veo esto como simplemente cambiar un valor único, es casi como , está bien, has encontrado una forma realmente compleja de cambiar algo de relleno, pero podrías haber cambiado simplemente el relleno en la consulta de medios. Pero el truco es que ahora tenemos esta variable de marcador de posición que ha cambiado y podemos ingresarla para cambiar otros valores ilimitados .

Podríamos tener una única consulta de medios (o un conjunto de consultas de medios) en nuestro CSS que solo alterne estas variables de marcador de posición y las usemos en otro lugar para alternar valores. Eso podría ser agradable y limpio en comparación con distribuir consultas de medios por todo el CSS. Es una alternancia adecuada en CSS, como una forma de lógica SI/ENTONCES que no hemos tenido antes.

James0x57 extendió ese pensamiento a todas las posibilidades lógicas, como AND, OR, XOR, NAND, NOR y XNOR, pero eso me hizo perder de nuevo. Aquí no soy realmente un informático. Pero puedes seguir su trabajo si quieres ver el uso de este material en el mundo real.

Esta variable es salvaje y se vuelve muy confusa. Lo noté en un artículo posiblemente reciente (¿pero la firma dice 2015?) de Patrick Brosset que cubre algunas cosas complicadas de propiedades personalizadas de CSS. Por ejemplo, las alternativas se pueden anidar infinitamente, como:

color: var(--foo, var(--bar, var(--baz, var(--are, var(--you, var(--crazy)))));

Además, los valores válidos para las propiedades personalizadas de CSS pueden tener comas como esta:

content: var(--foo, one, two, three);

¿Es realmente solo una alternativa con un one, two, three valor único? Esto es bastante alucinante.

De todos modos, han pasado varios meses y la maestra de los trucos de CSS, Lea Verou, ha puesto su mirada en este asunto de los espacios en blanco en propiedades personalizadas:

¿Qué pasaría si le dijera que puede usar un único valor de propiedad para activar y desactivar múltiples valores diferentes en múltiples propiedades diferentes e incluso en múltiples reglas CSS?

¡Es el mismo truco! Sin embargo, en el ejemplo de Lea, ella usa esta habilidad para:

• establecer variaciones en un botón, y
• establezca cuatro propiedades diferentes en lugar de una.

Esto realmente explica por qué este concepto es tan genial.

Lea señala algunas desventajas:

No hay forma de decir “el fondo debe ser rojo si --fooestá configurado y blanco en caso contrario”. Algunos de estos condicionales se pueden emular con el uso inteligente de anexos, pero no la mayoría.

Y, por supuesto, hay un cierto problema de legibilidad: --foo:;parece un error y --foo:initialparece bastante extraño, a menos que conozcas esta técnica.

Sin duda, estamos entrando en la próxima era de cómo se utilizan las propiedades personalizadas. Primero, los usamos como variables de preprocesador. Luego comenzamos a ver más uso en cascada y de respaldo. A continuación, lo usamos junto con JavaScript con más frecuencia. Ahora esto.

Se ha escrito aún más sobre cómo mantener las variables del preprocesador CSS disponibles, no tanto para los momentos en los que solo necesitas lo que ellos pueden hacer, sino para las cosas que solo ellos pueden hacer, como manipular sus valores de color.