Custom properties with Houdini’s new API

The CSS Properties and Values API Level 1 (Houdini Props and Vals) allows us to give structure to our custom properties. It will protect custom properties' format and fallback value.

Web developers could use JavaScript > CSS.registerProperty method or CSS @property init custom properties. With Houdini Props and Vals supported, browser will have animation effect with transition-property which set as custom properties. Such as transition:--inline-size 1s;.

Just hover / tap the following element and you will see "magic".

Houdini Props and Vals's setup

Here comes sample code with JavaScript > CSS.registerProperty method. --gradient-start & --gradient-end had already set format with color. So there will have perfect transition animation with custom properties mutation.

<style> .target { --gradient-start: #fcda19; --gradient-end: #ffe762; inline-size: 400px; block-size: 266px; background-image: linear-gradient(to right bottom, var(--gradient-start) 0%, var(--gradient-end)); transition: --gradient-start 1s, --gradient-end 1s ; } .target:hover { --gradient-start: #7759ff; --gradient-end: #f26591; } </style> <div class="target"></div> <script> if ('registerProperty' in CSS) { CSS.registerProperty({ name: '--gradient-start', syntax: '', inherits: false, initialValue: '#000', }); CSS.registerProperty({ name: '--gradient-end', syntax: '', inherits: false, initialValue: '#000', }); } </script>

Otherwise you could use pure CSS to setup Houdini Props and Vals.

<style> @property --gradient-start { syntax: ''; inherits: false; initial-value: #000; } @property --gradient-end { syntax: ''; inherits: false; initial-value: #000; } .target { --gradient-start: #fcda19; --gradient-end: #ffe762; inline-size: 400px; block-size: 266px; background-image: linear-gradient(to right bottom, var(--gradient-start) 0%, var(--gradient-end)); transition: --gradient-start 1s, --gradient-end 1s ; } .target:hover { --gradient-start: #7759ff; --gradient-end: #f26591; } </style> <div class="target"></div>