Umbrella term that covers a set of low-level APIs that exposes parts of the CSS rendering engine
Give developers access to CSS Object Model.
Enable developers to extends CSS by hooking into the styling and layout processes
No need to wait for browsers to implement CSS primitives
Write your own painting and layout algorithm using worklet
Write less JS dependencies and polyfills, allow users write true CSS polyfills that browser can better understand
Allow more semantic CSS, allow performance optimisations in how the browser actually reads and parses CSS
Allow typechecking CSS
Properties and Values API
create rich and typed property
error free, error gracefully, fallback to initial value
provide semantic meaning to the variable
custom property values are no longer a string
allow you to interpolate the value as you transition from 1 value to another
be known and passed to the function as accepted and identified parameter
cascade still applies
2 ways to register houdini custom properties
CSS.registerProperty in JS
@property in CSS
CSS.registerProperty({name:'--colorPrimary',// start with `--`syntax:'<color>',// syntax valueinitialValue:'magenta',// initial value if not definedinherits:false,// inherit from parent});
/* Included in Chromium 85 */@property--colorPrimary{syntax:'<color>';/* syntax value */initial-value:magenta;/* does not need to be a string */inherits:false;/* inherit from parent */}
enforces it the --colorPrimary to be a value of color
if it is not a color, will error gracefully by fallback to its initial value
trying to see the console, but haven't see it in the console yet
Top comments (0)