Manipulating the CSS engine to make your code work in every browser on the market? That is now possible with the Houdini project.
What does Houdini CSS contain?
This project is a set of several APIs, each of which performs one or more actions on the CSS engine. Here is the list:
- Layout API: allows developers to create their own layout algorithms. Today we have Block Flow / Flex / Table. Thanks to this API, we could develop a Masonry-type layout module using the browser’s CSS engine.
- Parser API: makes it possible to retrieve the value of a CSS property of type string and manipulate it via an object. Makes it possible to extend already existing features (example: a new size unit).
- Paint API: which we will describe in the next paragraph.
- Properties & Values API: makes it possible to define CSS properties along with their associated values. This API uses the Parser API to define the data type (colour, size, etc.).
- AnimationWorklet: makes it possible to create scroll-type animations or complex animations via the CSS rendering engine, which guarantees high performance.
- CSS Typed Object Model: a new JavaScript interface for manipulating CSS. This object model uses types and methods and will eventually replace the old CSSOM interface, which is far less reliable.
- Font Metrics API: makes it possible to retrieve the document’s font size information for a given context (how big my text will be with a given font, a given size, a given context).
Did you enjoy this article? Discover all our other technical articles on the Numendo blog!
