Transiciones y protección de datos en CSS
Propiedades personalizadas de CSS, también conocidas como CSS variables, te permiten definir tus propiedades en CSS y usar sus valores en toda tu o CSS. Si bien son increíblemente útiles hoy, tienen deficiencias que pueden hacerlas trabajar con ellos: pueden tener cualquier valor y pueden anulada por algo inesperado, siempre heredan sus valores de de su madre o padre, y no puedes realizar la transición. Con las propiedades de CSS y Valores de nivel de API 1 ahora disponibles en Chrome 78, se trascienden estas deficiencias, lo que hace que CSS propiedades personalizadas son muy útiles.
¿Qué es Houdini?
Antes de hablar sobre la nueva API, hablemos rápidamente sobre Houdini. El CSS-TAG El Grupo de trabajo de Houdini, mejor conocido como CSS Houdini o simplemente Houdini, existe para "desarrollar funciones que expliquen la "magia" del estilo y el diseño en la Web". El conjunto de especificaciones de Houdini es el siguiente: diseñada para ampliar la potencia del motor de renderizado del navegador, lo que permite que tanto más detalles sobre nuestros estilos y la capacidad de extender nuestro motor de renderizado. De esta forma, los valores de CSS escritos en JavaScript y polyfills o la creación de nuevos CSS sin un acierto de rendimiento. Houdini tiene el potencial potenciar la creatividad en la Web.
Nivel de API 1 de propiedades y valores de CSS
El nivel de API de propiedades y valores de CSS 1 (Houdini Props y Vals) nos permite estructurar nuestras propiedades personalizadas. Esta es la actual cuando se usan propiedades personalizadas:
.thing {
--my-color: green;
}
Dado que las propiedades personalizadas no tienen tipos, se pueden anular de forma
maneras. Por ejemplo, piensa en lo que sucede si defines --my-color con una URL.
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
En este caso, dado que no se escribe --my-color, no se detecta si una URL no es válida.
valor del color. Cuando lo usamos, recurre a los valores predeterminados (negro para color,
transparente para background). Con Houdini Props y Vals, las propiedades personalizadas pueden
registrarse para que el navegador sepa lo que debe ser.
Ahora, la propiedad personalizada --my-color se registra como un color. Esto le indica al
navegador qué tipos de valores están permitidos y cómo puede escribirlos y tratarlos
propiedad.
Anatomía de una propiedad registrada
El registro de una propiedad se ve de la siguiente manera:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
Se admiten las siguientes opciones:
name: string
Es el nombre de la propiedad personalizada.
syntax: string
Cómo analizar la propiedad personalizada En la especificación de Unidades y valores de CSS, encontrarás una lista completa de posibles valores. La configuración predeterminada es *.
inherits: boolean
Indica si hereda el valor de su elemento superior. La configuración predeterminada es true.
initialValue: string
Valor inicial de la propiedad personalizada.
Analiza syntax con más detalle. Existen varios certificados válidos
Opciones
que van desde números hasta colores
<custom-ident>
de tipos de datos. Estas sintaxis también se pueden modificar usando los siguientes valores
- Adjuntar
+significa que acepta una lista de valores separados por espacios de esa sintaxis. Por ejemplo,<length>+sería una lista separada por espacios de largos - Agregar
#significa que acepta una lista de valores separados por comas de esa sintaxis. Por ejemplo,<color>#sería una lista separada por comas de colores - Agregar
|entre sintaxis o identificadores significa que cualquiera de los valores proporcionados de ese tipo sean válidas. Por ejemplo,<color># | <url> | magicpermitiría cualquiera de las siguientes opciones: una lista de colores separados por comas, una URL o la palabramagic.
Gotchas
Hay dos trampas con Houdini Props y Vals. La primera es que, una vez definida, no hay forma de actualizar una propiedad registrada existente, y tratar de volver a registrar una propiedad, se mostrará un error que indica que ya se definido.
En segundo lugar, a diferencia de las propiedades estándares, las propiedades registradas no se validan cuando cuando se las analiza. En cambio, se validan cuando se calculan. Eso significa que tanto que los valores no válidos no aparezcan como no válidos cuando se inspeccionan propiedades e incluir una no válida después de una válida no tendrá resguardo. al válido; una propiedad no válida, sin embargo, recurrirá a la cuenta predeterminado de la propiedad.
Cómo animar propiedades personalizadas
Una propiedad personalizada registrada ofrece una bonificación divertida más allá de la verificación de tipo: y la capacidad de animarlos. Un ejemplo básico de animación se ve de la siguiente manera:
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
Cuando te desplaces sobre el botón, la animación se moverá de rojo a verde. Sin pero pasará de un color a otro. sin estar registrado, el navegador no sabe qué esperar entre una valor y el siguiente y, por lo tanto, no pueden garantizar la capacidad para realizar la transición. Sin embargo, este ejemplo puede ir un paso más allá para animar los gradientes de CSS. El El siguiente CSS se puede escribir con la misma propiedad registrada:
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
Esto animará nuestra propiedad personalizada que forma parte de linear-gradient, por lo que
animando nuestro gradiente lineal. Consulta el problema a continuación para ver el código completo
en acción y jugar con ella tú mismo.
Conclusión
Houdini está en camino a los navegadores y, con él, formas completamente nuevas de trabajar con CSS y extenderlo. Con la pintura Ya se envió la API y ahora Custom Props and Vals, nuestra caja de herramientas de creatividad se está expandiendo, lo que nos permite definir las propiedades de CSS escritas y usarlas para crear y animar nuevas los diseños. También hay más temas en camino, en la edición de Houdini en la fila, en la que puedes otorgar comentarios y ver qué sigue para Houdini. Houdini existe para desarrollar funciones que explican la "magia" del estilo y el diseño en la Web, así que, sal y darles un buen uso a esas funciones mágicas.
Foto de Maik Jonietz activado Eliminar salpicadura