Disabled CSS test using all: revert !important

[ffoodd]

Where could this stand:

• webextension only?
• a new info / manual checks level?

Related to ffoodd/a11y.css#344 #17 #16

FWIW, inspiration from Miriam Suzanne on Twitter — and it all started with a joke :D

Here's the code to try:

#no-css {
    all: revert !important
}

[PhilippeVay]

I've good results with this selector:

:not(#ch4 > #co2),
:not(#ch4 > #co2)::before,
:not(#ch4 > #co2)::after,
:not(#ch4 > #co2)::marker {
  all: revert !important;
}

1. specificity is at least (2,0,0) thanks to :not()
2. takes ::marker and pseudo-elements into account

Tested with this article from CSS Tricks where ordered lists use :marker.
Of course it isn't injected in Codepen iframes...

Also tested with this snippet where specificity is (1, 0, 1+)

<p id="id1">lorem ipsum</p>

<style>
p#id1 { background: hotpink !important; }

p#id1::before {
  content: '::BEFORE' !important;
  color: white !important;
  background-color: darkblue !important;
  background: red !important; /* shorthand property */
}
</style>

[PhilippeVay]

Just FORGET about this lesser selector 😝

@layer with !important is so much powerful!
Only other @layer declared sooner with !important declarations can win the specificity race.

/* UnCSS */
@layer debug {
  *,
  ::before,
  ::after,
  ::marker {
    all: revert !important;
  }
}

Hadn't read anything about this feature yet because I hadn't any use case for front end dev stuff (I'm not writing a CSS framework) but with accessibility in mind, I do have a dozen of use cases! 😸 And regrets I didn't read about it sooner ^^
You already mentioned it in ffoodd/a11y.css#435
Reference article: The Future of CSS: Cascade Layers (CSS @layer) by bram.us. Long article that covers everything so you won't need to read another one...

The only possible improvement to this UnCSS snippet is making sure the @layer is declared first in HTML markup, in case there would be other @layer. You don't even need to write the CSS rules there, just declare with a one-liner. Generating it server-side or injecting it via a bookmarklet/extension is sufficient.
That's the sole interest of naming the @layer: appending as many CSS rules as needed later in the page.

<!-- ... -->
<title>Page title</title>
<style>@layer over9000;</style>
<!-- ... -->
<style>@layer over9000 { * { property: value !important; } }</style>
</body>
</html>

has more specificity than anything else.

Related: hope postcss-safe-important still works