What do italics in Chrome devtools elements mean?

I'm looking at the elements in the hamburger menu of this site:

using Chrome devtools, and the CSS in Elements is in red italics and uneditable. What does this mean? Is there a way to make them editable?

3 Answers

It seems to be using some kind of JS generated CSS injected in the page. styled-components is known to do this and the styles are then read-only in the Dev tools.

Source: Impossible to edit styles in Chrome?

I think you're probably seeing the styles injected via "speedy mode" in production. This uses a special DOM API that Chrome DevTools currently only shows in a read-only capacity. We haven't put in an escape hatch to disable this injection method yet, but it's being considered.

This seems to happen for some styles if you reload the page with Chrome Dev Tools already open on that page. Try closing Dev Tools, reload the page, and then reopen Dev Tools and see if you can then make them editable.

This is happening for me in the last several builds of Chromium. Only happens when I edit a css rule on a file within an iframe, then reload the iframe. Then I see the locked italicized rule (only for the rule I edited).

I do not think "speedy mode" is in play.

I have reported the behaviour @ Chromium Bugs