CSS @property improvements in​ Chrome DevTools (Chrome 118)

The Chrome DevTools included with Chrome 118 – to be released in October – include some very nice improvements when it comes to working with @property registered Custom Properties. Let’s take a look …


🤔 Don’t know what @property is or why you should use it? Check out this quick intro to @property.


The DevTools that will ship with Chrome 118 have the ability list all relevant @property declarations that apply to a selected element. Also included are registrations done via JavaScript using CSS.registerProperty(…).

Screenshot of Chrome DevTools showing all relevant Registered Custom Properties

Upon hovering a registered Custom Property in a declaration, DevTools will not only show the Computed Value but also the registration details. You can use the link included in the tooltip to jump to the definition.

Screenshot of Chrome DevTools showing what happens when you hover over a registered custom property: it gives a little tooltip with the Computed Value and the registration details.

This tooltip comes in handy when hovering a Custom Property that is set to a value that is not allowed. In the screenshot below I have set --stop to yes even though the registration requires a <percentage>. Because of this, the Computed Value falls back to the declared initial-value, which is 50%, and DevTools will show a warning triangle.

Chrome DevTools when hovering a Registered Custom Property with its value set to a not-allowed type.

Exciting stuff! 😍


This post originally was a thread on Twitter and on Mastodon. Feel free to repost those threads to give them more reach.


Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.