- 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
- 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
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
});
/* 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
- CSS definition syntax https://web.dev/at-property/#syntax
<length>, eg: 1px, 2rem, 3vw<percentage>, eg: 4%<length-percentage>- superset of length + percentage
- you can use
calc() of mixing percentage and length, eg: calc(100% - 35px)
<angle>, eg: 1deg<time>, eg: 1s<resolution> , eg: 300dpi<integer>, positive / negative whole number<number><color><transform-function>, 2d / 3d transform function<custom-ident>
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"