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
The DevTools that will ship with Chrome 118 have the ability list all relevant
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.
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
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.
Exciting stuff! 😍