As a big fan of CSS Houdini, I was so happy that Safari team decided to take Paint API in development. The first implementation was shipped with Safari Technology Preview (TP) 69. But in the version 72 release the changelog I saw exciting news – it is possible to pass <image> as an input property to the Paint Worklet 🤩. I wanted to play with it here and now. Unfortunately, it wasn’t that easy.
Houdini “Custom Properties and Values” spec gives us the strictly typed CSS variables. It has a significant potential and as new technology is a pretty unknown field. Today, I’m going to have the in-depth overview of what types available in the first version of the spec, and show the usage on real examples.
“CSS Properties and Values API Level 1” is a brand new draft for CSS specification module. It gives developers the power to extend stylesheet dictionary. I have already mentioned custom properties in my previous articles: “Exploring the CSS Paint API” and “CSS Paint in Action: Bar Chart”. But today I want to introduce them in as many details as possible. So let’s start our journey into properties and values far depths ⚓!
In my previous article, we discovered CSS Paint API basics. Today, with this knowledge arsenal we are going to create data visualizations that could be used in production projects – bar chart. More than 65% of humans are visual learners. Visualization makes it easier to understand, compare, and analyze data. Using CSS Paint API, we can encapsulate all logic related to drawing charts on canvas and expose the high-level declarative interface.
CSS Paint API is the first part of the Houdini project that is available in the stable version of the browser. It Google Chrome team added it to Chrome 65 on March 6th. That is why it is an excellent time to try it out and start experimenting. I want you to get started and start own experimenting with it.
