Screenshot of the demo featured in the article. In Chrome 122 the backdrop is light purple because it can access the custom property from the dialog element.
If you ever struggled with ::backdrop not having access to custom properties, here’s some good news:
As of Chrome 122 – and also in Firefox 120 and soon Safari 17.4 – ::backdrop is a tree-abiding pseudo-element, meaning that it inherits any inheritable properties from its originating element.
Go check out the article I wrote for developer.chrome.com for all details + a demo.
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 …)
View more posts
