Although it’s not a core task of my role as Chrome DevRel, I took the time to build something that I needed into Chrome DevTools: debugging support for CSS @starting-style rules.

The feature is enabled by default in Chrome Canary 143 or newer.

~

The design I went for is detailed in https://goo.gle/devtools-starting-style-debugging-design and differs a bit from how other browsers approach this problem.

I expect correctness from DevTools, and have it show only what you are actively seeing on the screen.

When inspecting a square in https://codepen.io/bramus/pen/MWPLgjy for example, we don’t show the @starting-style { background-color: yellow } rule by default because that doesn’t match the state on the page

Screenshot of DevTools inspecting a square with starting-styles. DevTools does not show the @starting-style rule because the element is currently not affected by the declarations in that rule. 1.

To easily discover elements that are affected by a @starting-style rule, a new pill is shown next in the elements tree.

We chose using this adorner over tucking it away in the :hov panel, because that one is collapsed by default.

Screenshot of DevTools inspecting a square with starting-styles. You can tell the element is affected by a @starting-style rule because it has an adorner (pill) shown next to it. 1.

To allow you to inspect and edit these @starting-styles, you can click the pill to force the element into its @starting-style-state.

The element will be painted with its @starting-style rules applied, and DevTools will therefore also shows those style rules.

Screenshot of DevTools inspecting a square with starting-styles. You can tell the element is affected by a @starting-style rule because it has an adorner (pill) shown next to it. Upon clicking the adorner, the element goes into its starting-style state, and the Styles tab also shows the relevant rule.

~

You can try out the feature in tomorrow’s Chrome Canary build, which has the feature enabled by default. To try it out in earlier Chrome Canary release (including Chrome Beta and Chrome Dev), launch Chrome with the --enable-features=DevToolsStartingStyleDebugging CLI flag, or go to chrome://flags and flip on “DevTools @starting-style debugging” feature flag.

If you find a bug, or have a demo where it’s not working as you’d expect it to work, or have feedback about this in general: feel free to file a Chromium bug on https://crbug.com/new or reach out to me on social media.

The one thing I am currently aware of is that toggling @starting-style on pseudo-elements is not working (see crbug/450197220). What need to here – until I get this fixed – is force @starting-style on the originating element.

Thanks go out to pfaffe and alexrudenko on the DevTools team, and futhark on the Style team for guiding me through this 🙏

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

Post navigation