CSS Houdini APIs
A set of low-level APIs that expose parts of the CSS engine, enabling developers to extend CSS with custom features.
Available APIs
Houdini includes several APIs that let you extend different parts of CSS:
- CSS Painting API
Create custom background images and patterns with JavaScript. This lets you draw graphics that can respond to CSS variables and be used anywhere images are allowed in CSS.
- CSS Layout API
Build your own layout systems beyond what CSS provides. This works like flexbox or grid, but with your own custom positioning logic.
- CSS Properties and Values API
Define custom CSS properties with type checking and default values. This creates more powerful CSS variables that understand data types and have built-in validation.
- CSS Typed OM
Work with CSS values as JavaScript objects instead of strings. This makes CSS manipulation faster, more consistent, and less error-prone.
- Worklets
Run JavaScript code in specialized mini-environments optimized for graphics and layout tasks. These are lightweight alternatives to Web Workers for visual operations.
- CSS Parser API
Add new CSS syntax to the browser. This lets you create custom units, functions, and at-rules that the browser will understand.
- Font Metrics API
Access detailed information about fonts to create precise text layouts. This helps with advanced typography needs like baseline alignment and glyph positioning.