Smarter custom properties with the new Houdini API

Transitions and data protection in CSS

Sep 19, 2019

Propiedades personalizadas de CSS, también conocidas como CSS variables, allows you to define your own properties in CSS and use their values throughout your CSS. While they are incredibly useful today, they have shortcomings that can make it difficult to work with them: they can take on any value, so they can be accidentally overridden with something unexpected, they always inherit their values from their parents, and you can't transition. With Houdini's CSS Property and Values API Level 1, now available in Chrome 78, these shortcomings are overcome, making CSS custom properties incredibly powerful!

What is Houdini?

Antes de hablar sobre la nueva API, 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 Houdini Specifications están diseñados para abrir el poder del motor de renderizado del browser, 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 JavaScript y polyfilling o inventar un nuevo CSS sin un impacto en el rendimiento. Houdini tiene el potencial de potenciar la creatividad en la Web.

CSS Property and Values API Level 1

the CSS Property and Values API Level 1 (Houdini Props and Vals) allows us to give structure to our custom properties. This is the current situation when using custom properties:

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

Since custom properties do not have types, they can be overridden in unexpected ways. For example, consider what happens if you define --my-color with a Url.

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

Here because --my-color it is not written, it does not know that a url is not a valid color value. When we use it, it reverts to defaults (black for color, transparent to background). With Houdini Props and Vals, custom properties can be registered so the browser knows what should to be!

Now the custom property --my-color is registered as a color! This tells the browser what types of values are allowed and how it can write and handle that property!

Anatomy of a registered property

Registering a property looks like this:

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

Supports the following options:

name: string

The name of the custom property.

syntax: string

How to parse the custom property. You can find a complete list of possible values in the CSS values and units specification. Default to *.

inherits: boolean

If he inherits the value from his father. Default to true.

initialValue: string

Initial value of the custom property.

Taking a closer look at syntax. There are a number of valid options
ranging from numbers to colors to

types. These syntax can also be modified using the following values

• Appending + means that it accepts a space-separated list of values from that syntax. For example, + would be a list of lengths separated by spaces
• Appending# means that it accepts a comma separated list of values from that syntax. For example, # it would be a list of colors separated by commas
• Adding | between syntax or identifiers means that any of the provided options are valid. For example, # | | magic would allow a list of colors separated by commas, a url, or the word magic.

Gotchas

There are two traps with Houdini Props and Waltz. The first is that once defined there is no way to update an existing registered property, and attempting to reregister a property will return an error indicating that it has already been defined.

Second, unlike standard properties, registered properties are not validated when parsed. Rather, they are validated when they are calculated. That means that invalid values will not appear as invalid when inspecting the element's properties, and including an invalid property after a valid one will not revert to a valid one; an invalid property, however, will revert to the registered property's default value.

Animating custom properties

A registered custom property provides a fun bonus beyond type checking - the ability to animate it! A basic animation example looks like this:

<script>
CSS.registerProperty({
yam: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color: 1s;
}
button:hover {
--stop-color: green;
}
</style>

When you hover over the button, it will animate from red to green! Without registering the property, it will jump from one color to another because, without being registered, the browser does not know what to expect between one value and the next and therefore cannot guarantee the ability to transition. However, this example can be taken a step further to animate CSS gradients. The following CSS can be written with the same registered property:

button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}

This will animate our custom property that is part of the linear-gradient, thus animating our linear gradient. Take a look at the Glitch below to see the full code in action and play around with it yourself.

conclusion

Houdini is on the way a los browsers y, con ello, formas completamente nuevas de trabajar y ampliar CSS. Con el Paint API already shipped and now Custom Props and Waltz, our creative toolbox is expanding, allowing us to define written CSS properties and use them to create and animate new and exciting designs. More are on the way too, in the Houdini's problem queue where you can give your opinion and see what's next for Houdini. Houdini exists to develop features that explain the "magic" of style and design on the web, so get out there and take advantage of those magical features.

Photo by
Maik jonietz
in
Unsplash