CSS Houdini es un término general que abarca un un conjunto de APIs de bajo nivel que exponen partes del motor de renderización de CSS y brindan desarrolladores acceden al modelo de objetos de CSS. Esta es una gran cambio en el ecosistema de CSS, ya que permite a los desarrolladores indicarle al navegador cómo para leer y analizar código CSS personalizado sin esperar que los proveedores del navegador compatibilidad integrada para estas funciones. ¡Qué emocionante!
Una de las incorporaciones más interesantes al CSS en Houdini es la Propiedades y valores API
Esta API potencia las propiedades personalizadas de CSS (también conocidas como variables de CSS) al proporcionarles un significado semántico (definido por una sintaxis) e incluso de resguardo, lo que habilita las pruebas de CSS.
Escribe propiedades personalizadas de Houdini
Este es un ejemplo de cómo configurar una propiedad personalizada (piensa en una variable CSS), pero
con una sintaxis (tipo), un valor inicial (resguardo) y un booleano de herencia (no
hereda el valor de su elemento superior o no?). La manera actual de hacerlo es
mediante CSS.registerProperty()
en JavaScript, pero en navegadores compatibles, puedes usar
@property
CSS.registerProperty({ name: '--colorPrimary', syntax: '<color>', initialValue: 'magenta', inherits: false });
@property --colorPrimary { syntax: '<color>'; initial-value: magenta; inherits: false; }
Ahora puedes acceder a --colorPrimary
como a cualquier otra propiedad personalizada de CSS, a través de
var(--colorPrimary)
Sin embargo, la diferencia aquí es que --colorPrimary
no es
solo se lee como una cadena. ¡Tiene datos!
Valores de resguardo
Al igual que con cualquier otra propiedad personalizada, puedes obtener (con var
) o configurar
(escribir/reescribir), pero con propiedades personalizadas de Houdini, si estableces una
cuando se anula, el motor de renderización de CSS enviará el valor inicial
(su valor de resguardo) en lugar de ignorar la línea.
Considera el siguiente ejemplo. La variable --colorPrimary
tiene un
initial-value
de magenta
. Pero el desarrollador le dio el token no válido
valor “23”. Sin @property
, el analizador de CSS ignoraría el elemento
un código no válido. Ahora, el analizador recurre a magenta
. Esto permite que
resguardos reales y pruebas en CSS. ¡Bravo!
.card {
background-color: var(--colorPrimary); /* magenta */
}
.highlight-card {
--colorPrimary: yellow;
background-color: var(--colorPrimary); /* yellow */
}
.another-card {
--colorPrimary: 23;
background-color: var(--colorPrimary); /* magenta */
}
Sintaxis
Con la función de sintaxis, ahora puedes escribir CSS semántica especificando un tipo. Entre los tipos actuales que se permiten, se incluyen los siguientes:
length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident
(una string de identificador personalizado)
Configurar una sintaxis permite que el navegador compruebe el tipo de propiedades personalizadas. Esto tiene muchos beneficios.
Para ilustrar este punto, les mostraré cómo animar un gradiente. Actualmente, no hay forma de animar (o interpolar) con fluidez entre valores de gradiente, ya que cada declaración de gradiente se analiza como una cadena.
En este ejemplo, el porcentaje de parada de gradiente se anima a partir de una del 40% a un valor final del 100% cuando se coloca el cursor sobre un elemento. Deberías ver un mensaje suave transición del color del gradiente superior hacia abajo.
El navegador de la izquierda admite la API de Houdini Properties and Values. lo que permite una transición suave de parada de gradiente. El navegador de la derecha, no. El un navegador no compatible solo puede entender este cambio como una cadena del punto A al punto B. No hay oportunidad de interpolar los valores y por lo que no se ve una transición fluida.
Sin embargo, si declaras el tipo de sintaxis cuando escribes propiedades personalizadas y, luego, usas
esas propiedades personalizadas para habilitar la animación, verás la transición. Tú
Puedes crear una instancia de la propiedad personalizada --gradPoint
de la siguiente manera:
/* Check for Houdini support & register property */
@supports (background: paint(something)) {
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
}
Luego, cuando sea momento de animarlo, podrás actualizar el valor del 40%
inicial a 100%
:
@supports (background: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}
Esto ahora habilitará esa transición de gradiente suave.
Conclusión
La regla @property
hace que una tecnología interesante sea aún más accesible para los
lo que te permite escribir elementos CSS con significado semántico dentro del mismo estilo CSS. Para aprender
más sobre CSS Houdini y la API de propiedades y valores, consulta estos
recursos:
- ¿Houdini ya está listo?
- Referencia de MDN Houdini
- Propiedades personalizadas más inteligentes con la nueva API de Houdini
- Cola de problemas del CSSWG de Houdini
Foto de Cristian Escobar en Unsplash.