Propiedades personalizadas como estado

Aquí hay una idea divertida de James Stanley: un archivo CSS (que presumiblemente se actualiza diariamente) que contiene propiedades personalizadas de CSS para colores “estacionales” (por ejemplo, la primavera es verde, el otoño es naranja). Luego usarías los valores para crear un tema en tu sitio, sabiendo que esos colores cambian ligeramente de un día a otro.

Esto es lo que obtuve mientras escribía esto:

:root {  --seasonal-bg: hsl(-68.70967741935485,9.419354838709678%,96%);  --seasonal-bgdark: hsl(-68.70967741935485,9.419354838709678%,90%);  --seasonal-fg: hsl(-68.70967741935485,9.419354838709678%,30%);  --seasonal-hl: hsl(-83.70967741935485,30.000000000000004%,50%);  --seasonal-hldark: hsl(-83.70967741935485,30.000000000000004%,35%);}

Creo que sería más divertido si el archivo CSS proporcionado fuera solo las propiedades personalizadas y no los otros estilos obstinados (como lo que establece el fondo del cuerpo y demás). De esa manera, podrás implementar los colores de la forma que elijas sin efectos secundarios.

¿CSS como API?

Esto me hace pensar que un archivo CSS alojado en CDN como este podría tener otras cosas útiles, como la fecha de hoy para su uso en pseudocontenido u otras cosas especiales urgentes. ¿Quizás la fase de la luna? ¿Resultados deportivos? ¡¿Sopa del Día?!

/* divThe soup of the day is: /div */.soup::after {  content: var(--soupOfTheDay); /* lol kinda */}

Es casi como una API de datos tremendamente fácil de usar. El pseudocontenido es incluso contenido accesible hoy en día, pero no se puede seleccionar el texto de los pseudoelementos, así que no lee esto como un respaldo real al uso de CSS como API de contenido.

Flexibilidad de propiedad personalizada

Will Boyd acaba de escribir en su blog sobre lo que es posible incluir en una propiedad personalizada. Son tremendamente flexibles. Casi cualquier cosa es un valor de propiedad personalizado válido y luego el uso tiende a comportarse tal como usted cree.

body {  /* totally fine */  --rgba: rgba(255, 0, 0, 0.1);  background: var(--rgba);  /* totally fine */  --rgba: 255, 0, 0, 0.1;  background: rgba(var(--rgba));  /* totally fine */  --rgb: 255 0 0;  --a: 0.1;  background: rgb(var(--rgb) / var(--a));}body::after {  /* totally fine */  --song: "I need quotes to be pseudo content A and can't have line breaks without this weird hack A but still fairly permissive ( ) ";  content: var(--song);  white-space: pre;}

Bram Van Damme se aferró a esa flexibilidad mientras cubría el artículo de Will:

Es por eso que puedes usar Propiedades personalizadas de CSS para:

• realizar cálculos condicionales

• pasar datos desde su CSS a su JavaScript

• inyectar modificadores de tono de piel/color de cabello en Emoji

• alternar múltiples valores con una propiedad personalizada ( --foo: ;truco)

Bram señala esta cualidad de cambio de estado “básico” que una propiedad personalizada puede lograr:

:root {  --is-big: 0;}.is-big {  --is-big: 1;}.block {  padding: calc(    25px * var(--is-big) +    10px * (1 - var(--is-big))  );  border-width: calc(    3px * var(--is-big) +    1px * (1 - var(--is-big))  );}

Agregue un par de cucharadas de complejidad y obtenga The Raven (consultas de medios con propiedades personalizadas).

Me encantaría ver que suceda algo en CSS para hacer esto más fácil. Usar propiedades personalizadas de CSS para estados genéricos sería fantástico. ¡Podríamos aplicar estilos arbitrarios cuando la interfaz de usuario esté en estados arbitrarios! Piense en lo útil que son ahora las consultas de medios, o en lo que serán las consultas de contenedor, pero agravadas porque es un estado arbitrario, no solo un estado que exponen esas cosas.

Bram también cubrió eso, mencionando lo que Lea Verou llamó “propiedades personalizadas de nivel superior” :

/* Theoretical! */.square {  width: 2vw;  padding: 0.25vw;  aspect-ratio: 1/1;  @if (var(--size) = big) {    width: 16vw;    padding: 1vw;  }}.my-input {  @if(var(--pill) = on) {    border-radius: 999px;   }}

Sobre ese nombre

Will las llama “variables CSS”, lo cual es muy común y comprensible. A menudo leerás (y yo he escrito) oraciones como “variables CSS (también conocidas como propiedades personalizadas de CSS)” o “Propiedades personalizadas de CSS (también conocidas como variables CSS). Šime Vidas señaló recientemente que existe una forma bastante correcta de referirse a estas cosas: --this-partes la propiedad personalizada y var(--this-part)es la variable, que proviene directamente del uso en la específica.

Estado de la biblioteca de JavaScript… ¿Automáticamente?

Recuerdo esta propuesta de Vue. No estoy seguro de si llegó a alguna parte, pero la idea es que el estado de un componente se exponga automáticamente como propiedades personalizadas de CSS.

template  divHello/div/templatescriptexport default {  data() {    return {      color: 'red'    }  }}/scriptstyle vars="{ color }".text {  color: var(--color);}/style

En virtud de tenerlo colorcomo parte del estado de este componente, --colorestá disponible como estado para el CSS de este componente. Creo que es una gran idea.

¿Qué pasaría si cada vez que usara useStateReact, las propiedades personalizadas de CSS se colocaran :rooty se actualizaran automáticamente? Por ejemplo, si hicieras esto:

import React, { useState } from 'https://cdn.skypack.dev/react@^16.13.1';import ReactDOM from 'https://cdn.skypack.dev/react-dom@^16.13.1';const App = () = {  const [ activeColor, setActiveColor ] = useState("red");  return(    div className="box"      h1Active Color: {activeColor}/h1      button onClick={() = {setActiveColor("red")}}red/button      button onClick={() = {setActiveColor("blue")}}blue/button    /div  );}ReactDOM.render(App /,document.getElementById("root"))

Y sabías que podías hacer como:

.box {  border-color: 2px solid var(--activeColor);}

Porque el estado se asignó automáticamente a una propiedad personalizada. Alguien debería hacer un useStateWithCustomPropertiesgancho o algo para hacer eso. #ideallibre

Bibliotecas como React y Vue sirven para crear UI. Creo que tiene mucho sentido que el estado que administran esté expuesto automáticamente a CSS.

¿Podrían los navegadores darnos más estados de página como variables de entorno?

Hablando del estado que CSS debería conocer, he visto muchas demostraciones que hacen cosas divertidas al mapear cosas, como la posición actual del mouse o la posición de desplazamiento, en CSS. No creo que sea del todo descabellado solicitar que esos datos estén expuestos de forma nativa a CSS. Ya tenemos el concepto de variables de entorno, como env(safe-area-inset-top), y pude ver que se usan para exponer el estado de la página, como env(page-scroll-percentage)o env(mouseY).