Propiedades personalizadas más inteligentes con la nueva API de Houdini

Propiedades personalizadas de CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a más, también conocidas como Variables CSS, le permite definir sus propias propiedades en CSS y usar sus valores en todo su CSS. Si bien son increíblemente útiles hoy en día, tienen deficiencias que pueden dificultar el trabajo con ellos: pueden tomar cualquier valor, por lo que pueden ser anulados accidentalmente con algo inesperado, siempre heredan sus valores de sus padres y no puede realizar la transición. Con Houdini’s API de valores y propiedades de CSS nivel 1, ahora disponible en Chrome 78, estas deficiencias se superan, ¡lo que hace que las propiedades personalizadas de CSS sean increíblemente poderosas!

¿Qué es Houdini?

Antes de hablar sobre la nueva APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene más, hablemos de Houdini rápidamente. El grupo de trabajo CSS-TAG Houdini, más conocido como CSS Houdini o simplemente Houdini, existe para «desarrollar funciones que expliquen la ‘magia’ del estilo y el diseño en la web». La colección de Especificaciones de Houdini están diseñados para abrir el poder del motor de renderizado del navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más, lo que permite una visión más profunda de nuestros estilos y la capacidad de ampliar nuestro motor de renderizado. Con esto, finalmente es posible escribir valores CSS en JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar más y polyfilling o inventar un nuevo CSS sin un impacto en el rendimiento. Houdini tiene el potencial de potenciar la creatividad en la web.

API de valores y propiedades de CSS nivel 1

los API de valores y propiedades de CSS nivel 1 (Houdini Props and Vals) nos permite dar estructura a nuestras propiedades personalizadas. Esta es la situación actual cuando se utilizan propiedades personalizadas:

.thing {
--my-color: green;
}

Dado que las propiedades personalizadas no tienen tipos, pueden anularse de formas inesperadas. Por ejemplo, considere lo que sucede si define --my-color con una URLEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo más.

.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}

Aquí, porque --my-color no está escrito, no sabe que una URL no es un valor de color válido. Cuando lo usamos, vuelve a los valores predeterminados (negro para color, transparente para background). Con Houdini Props y Vals, las propiedades personalizadas se pueden registrado para que el navegador sepa lo que debería ¡ser!

Ahora, la propiedad personalizada --my-color está registrado como un color! ¡Esto le dice al navegador qué tipos de valores están permitidos y cómo puede escribir y tratar esa propiedad!

Anatomía de una propiedad registrada

El registro de una propiedad se ve así:

window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});

Admite las siguientes opciones:

name: string

El nombre de la propiedad personalizada.

syntax: string

Cómo analizar la propiedad personalizada. Puede encontrar una lista completa de posibles valores en el Valores y unidades CSS especificación. Predeterminado a *.

inherits: boolean

Si hereda el valor de su padre. Predeterminado a true.

initialValue: string

Valor inicial de la propiedad personalizada.

Echando un vistazo más de cerca a syntax. Hay una serie de opciones válidas
que van desde números hasta colores para
<custom-ident>

tipos. Estas sintaxis también se pueden modificar utilizando los siguientes valores

• Anexando + significa que acepta una lista de valores separados por espacios de esa sintaxis. Por ejemplo, <length>+ sería una lista de longitudes separadas por espacios
• Anexando# significa que acepta una lista de valores separados por comas de esa sintaxis. Por ejemplo, <color># sería una lista de colores separados por comas
• Añadiendo | entre sintaxis o identificadores significa que cualquiera de las opciones proporcionadas es válida. Por ejemplo, <color># | <url> | magic permitiría una lista de colores separados por comas, una URL o la palabra magic.

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, e intentar volver a registrar una propiedad arrojará un error que indica que ya se ha definido.

En segundo lugar, a diferencia de las propiedades estándar, las propiedades registradas no se validan cuando se analizan. Más bien, se validan cuando se calculan. Eso significa que los valores inválidos no aparecerán como inválidos al inspeccionar las propiedades del elemento, y que incluir una propiedad inválida después de una válida no volverá a la válida; una propiedad inválida, sin embargo, volverá al valor predeterminado de la propiedad registrada.

Animando propiedades personalizadas

Una propiedad personalizada registrada proporciona un bono divertido más allá de la verificación de tipos: ¡la capacidad de animarla! Un ejemplo de animación básico se ve así:

<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 pasas el cursor sobre el botón, ¡se animará de rojo a verde! Sin registrar la propiedad, saltará de un color a otro porque, sin estar registrado, el navegador no sabe qué esperar entre un valor y el siguiente y, por lo tanto, no puede garantizar la capacidad de realizar la transición. Sin embargo, este ejemplo puede llevarse un paso más allá para animar gradientes CSS. 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 es parte del linear-gradient, animando así nuestro gradiente lineal. Echa un vistazo al Glitch a continuación para ver el código completo en acción y juega con él tú mismo.

Conclusión

Houdini está en camino a los navegadoresConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet más y, con ello, formas completamente nuevas de trabajar y ampliar CSS. Con el API de pintura ya enviado y ahora Custom Props and Vals, nuestra caja de herramientas creativas se está expandiendo, lo que nos permite definir propiedades CSS escritas y usarlas para crear y animar diseños nuevos y emocionantes. También hay más en camino, en el Cola de problemas de Houdini donde puede dar su opinión y ver qué sigue para Houdini. Houdini existe para desarrollar funciones que expliquen la «magia» del estilo y el diseño en la web, así que sal y aprovecha esas funciones mágicas.

Foto por
Maik Jonietz
en
Unsplash