@propiedad

Es @propertytotalmente nuevo para mí, pero veo que se dirige a Chrome, así que supongo que es bueno saberlo.

Hay un borrador de especificaciones y un documento de "intención de envío". El código de ese documento muestra:

@property --my-property {  syntax: "color";  initial-value: green;  inherits: false;}

Tenemos más información sobre todo esto ahora en nuestra Guía completa de propiedades personalizadas.

Ese es el CSS exacto equivalente a a CSS.registerProperty(), la sintaxis de JavaScript para declarar propiedades personalizadas de CSS, también algo nuevo (al parecer bajo el paraguas de Houdini).

Parece que los declara no dentro de un bloque selector, sino fuera (como una consulta @media), y una vez que lo ha hecho, todavía no ha creado una nueva propiedad personalizada, simplemente ha registrado el hecho de que probablemente lo hará. más tarde. Cuando realmente va a crear/usar la propiedad personalizada, la crea dentro de un bloque selector como ya lo hace ahora.

El “caso de uso comúnmente citado” es bastante interesante. En este momento, esto no es posible en CSS:

.el {  background: linear-gradient(white, black);  /* this transition won't work */  transition: 1s;}.el:hover {  background: linear-gradient(red, black);}

Podrías pensar que el blanco en ese degradado se desvanecerá a rojo con eso transition, pero no, no se puede hacer transición de esa manera. Si necesitáramos esto en el pasado, recurriríamos a trucos como desvanecer un pseudoelemento con los nuevos colores de degradado o hacer la transición background-positionde un degradado más amplio que el elemento para simularlo.

Parece que ahora podemos...

@property --gradient-start {  syntax: "color";  initial-value: white;  inherits: false;}.el {  --gradient-start: white;  background: linear-gradient(var(--gradient-start), black);  transition: --gradient-start 1s;}.el:hover {  --gradient-start: red;}

Presumiblemente, eso funciona ahora porque le hemos dicho a CSS que esta propiedad personalizada es colorasí, puede ser tratada/animada como un color de una manera que no era posible antes.

Me recuerda cómo cuando usamos la attr()función para extraer data-size="22px"un elemento, en realidad no podemos usar length22px, es solo una cadena. Pero que tal vez algún día lo consigamos.attr(data-size px);

No tengo idea de cuándo @propertyestará realmente disponible, pero parece que Chrome se lanzará primero y hay señales positivas de Safari y Firefox.