Transitions and data protection in CSS
CSS custom properties, also known as 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?
Before we talk about the new API, let's talk about Houdini quickly. The CSS-TAG Houdini working group, better known as CSS Houdini or simply Houdini, exists to "develop functions that explain the 'magic' of style and design on the web." The collection of Houdini Specifications They are designed to unlock the power of the browser's rendering engine, allowing a deeper insight into our styles and the ability to extend our rendering engine. With this, it is finally possible to write CSS values in JavaScript and polyfilling or invent a new CSS without a performance impact. Houdini has the potential to empower creativity on the 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 ( {
name : '--my-color' ,
syntax : ' ' ,
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,+ - Appending
#means that it accepts a comma separated list of values from that syntax. For example,# - Adding
|between syntax or identifiers means that any of the provided options are valid. For example,# | | magic 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 ( {
name : '--stop-color' ,
syntax : ' ' ,
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 to browsers and with it completely new ways of working and extending CSS. With the 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
