DEV Community

loading...

Notes: The CSS Podcast #026 - "Houdini Series: Properties & Values"

tanhauhau profile image Tan Li Hau Originally published at lihautan.com ・3 min read

Podcast

Link to the Podcast

Notes

CSS Houdini

  • 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 value
  initialValue: 'magenta', // initial value if not defined
  inherits: false,         // inherit from parent
});
Enter fullscreen mode Exit fullscreen mode
/* 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 */
}
Enter fullscreen mode Exit fullscreen mode
  • 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

Syntax

Multipliers

Component value multipliers

  • <length>+, length can appear one or more times, eg: "1px 2px 3px"
  • <length>#, length appear one or more times with comma separated, eg: "1px, 2px 3px"

Combinators

Component value combinators

  • |, eg: <percentage> | <length>, must be either percentage or length, and appear only once

References

Discussion (0)

pic
Editor guide