CSS Houdini is a total game changer in the CSS world. It empowers you to achieve things that you never imagined were possible with CSS. To build unique CSS layout and background approaches, you may write your own JavaScript. In addition, you may define your own custom CSS attributes. Houdini will have a much larger impact on CSS than flexbox or grid ever could. Today in this blog we will discuss everything about CSS Houdini is and why it’s going to be such a game changer for CSS.
What is Houdini CSS?
CSS Houdini is a set of 7 very cool APIs that discloses the various aspects of Google. These APIs make it easier for the developer to develop different extensions for CSS.
- Paint API
- Properties & Values API
- Typed OM
- Layout API
- AnimationWorklet
- Parser API
- Font Metrics API
However, last four of the seven APIs are still in the development stage. The good news is that the two most significant APIs, Paint API and Properties & Values API, are already implemented for chrome users and will soon be available for Firefox and Safari users. Because they are already in existence, we can start working on them.
1. CSS Paint API
Pani API allows you to create an image programmatically whenever a CSS property expects an image. Rather than using the traditional properties like background-color or linear-gradient(), you can now use paint(myWork) to refer to a paint worklet.
To define a paint worklet called myWork, we need to load a CSS paint worklet file using CSS.paintWorklet.addModule(‘my-work-worklet.js’). In that file, we can use the registerPaint() function to register a paint worklet class:
class MyPainter {
paint(ctx, geometry, properties) {
// ...
}
}
registerPaint('myPainter', MyPainter);In the paint() callback function we are using ctx which is the same as CanvasRenderingContext2D as we know in canva(). So if you are kind of familiar with how to use canva inside of HTML then this works exactly the same as canva.
Note: For now the paint worklet is not 100% the same as <canva> content. As text rendering methods are missing and due to some security issues you cannot read back pixels from canvas.
Lets look at example to understand the concept of paint API clearly. As when you see examples, things become more clear.
index.html
<!doctype html>
<style>
textarea {
background-image: paint(checkerboard);
}
</style>
<textarea></textarea>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
checkerboard.js
class CheckerboardPainter {
paint(ctx, geom, properties) {
// Use `ctx` as if it was a normal canvas
const colors = ['red', 'green', 'blue'];
const size = 32;
for(let y = 0; y < geom.height/size; y++) {
for(let x = 0; x < geom.width/size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
}
}
Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);
If you want to explore more paint API examples, head over to houdini.how it has a bunch of fun demos for the Paint API. The houdini.how is developed by Google and various guest contributors. Here you will find the NPM, CDN, and CodePen links for each design, allowing you to properly examine and master the design.
Note: With almost all new APIs the CSS Paint API available with HTTPS or localhost only.
2. CSS Properties & Values API
The Properties and Values API allows us to clearly specify our custom CSS properties, enabling us to check property type, provide default values, and define properties that do not inherit their value.
The normal CSS custom property consists of a property name and value:
.box-color {
--my-color: blue;
}
As custom properties don’t have types so anyone can easily override them in unexpected ways.
.box-color{
--my-color: 12px;
color: var(--my-color);
}
Anywhere the property is used would have the color as 12px. As soon as the browser encounters the CSS they don’t know, they throw that line into garbage.
To avoid this problem use @property, through which you can declare a custom property with a syntax of color. This will tell a browser that this property need to have a valid color value.
@propert –my-color {
syntax: ‘<color>’;
inherits: false;
initial-value: blue;
}
Lets look at example to understand the concept of properties and value API clearly. As I already told you, when you see examples, things become more clear.
<!DOCTYPE html>
<html>
<head>
<style>
@property --scale {
syntax: "<color>";
inherits: false;
initial-value: 1;
}
button{
width: 10%;
font-size: 1rem;
padding: 0.5rem;
margin: 150px;
transform: rotate(30deg) scale(var(--scale));
--my-color: black;
color: var(--my-color);
animation: pulse 500ms alternate infinite;
}
@keyframes pulse {
0% {
--my-color: red;
--scale: 2;
}
100%{
--my-color: blue;
--scale: 3;
}
</style>
</head>
<body>
<button>Button</button>
</body>
</html>
CSS Houdini Browser Compatibilty
The website named as Is Houdini Ready Yet? shows the latest information about all the Houdini features how are implemented in different browser.
As you can see the first three properties are available in all of the chromium browsers like Chrome, edge and so on, and Firefox is, under consideration for implementing these. So hopefully it’s coming soon. In Safari, some of these are available behind like feature flags and some have like partial support, but it’s really not there for the most part. These are only really available in the chromium based browsers. And then as you get to the bottom four things on this list, they’re really not available anywhere yet, but hopefully they’re going to be coming soon.
Was CSS Houdini a game changer for you? Tell us about it in the comments section below.
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
