Usando @property para propiedades personalizadas de CSS

Una Kravetz profundiza en cómo Chrome ahora le permite declarar propiedades personalizadas de CSS directamente desde CSS con más información que solo una cadena.

Entonces, en lugar de algo como esto:

html {  --stop: 50%;}

…se puede declarar con más detalles como este:

@property --stop {  syntax: "percentage";  initial-value: 50%;  inherits: false;}

Entonces, el navegador sabe que esta propiedad personalizada específica es un porcentaje en lugar de una cadena. Pueden ser otras cosas útiles como integery color. Ahora que tenemos una forma de comunicar este tipo de información al navegador, tenemos algunas capacidades nuevas, como poder realizar la transición entre dos valores.

Mientras jugaba, noté que hay que mencionar muy específicamente la propiedad que se va a realizar en transición (porque un comodín transitionno sirve). Intente desplazarse sobre esta demostración, que es una recreación de lo que hizo Una en la publicación:

Tenga en cuenta que estoy animando la posición de la parada de color (que es un porcentaje), pero también estoy intentando animar el color, lo cual todavía no funciona. Supuse que así sería con esta nueva característica. Sé que la gente ha estado confundida por la imposibilidad de animar degradados durante mucho tiempo. (Ver artículo de Ana Tudor .)

Siempre puede volver a declarar las propiedades en algún lugar de alto nivel para “soportar” navegadores que no pueden leer propiedades personalizadas. Parece un momento divertido para hablar de eso. Safari parece mostrar un gran interés en este material basado en Houdini, pero aún no lo ha hecho. ¿Firefox? Eeeesh, no lo sé. Lo mejor que sabemos es que lo etiquetaron como “Vale la pena crear un prototipo” antes de todos los despidos.

Esto también ayudará con el extraño problema de respaldo con las propiedades personalizadas de CSS que mencionamos en el boletín :

Al igual que con cualquier otra propiedad personalizada, puede obtener (usando var) o establecer (escribir/reescribir) valores, pero con las propiedades personalizadas de Houdini, si establece un valor falso al anularlo, el motor de renderizado CSS enviará el valor inicial (su valor de reserva) en lugar de ignorar la línea.