Remove default [hidden] style in preflight

[stefanr]

Is there any reason why this style is still kept in preflight?

/*
Ensure the default browser behavior of the `hidden` attribute.
*/

[hidden] {
  display: none;
}

All supported browsers should be capable of handling the default behavior: https://caniuse.com/hidden

Restoring the actual default behavior with this style is non-trivial and destroys upcoming functionality: https://developer.chrome.com/blog/hidden-until-found/

[adamwathan]

Great catch, definitely looks like we can ditch this: https://github.com/necolas/normalize.css/blob/master/normalize.css#L343-L349

If you want to open a PR for it I'm happy to merge it 👍

[stefanr]

Sure 🙂 , here #8248

[Russel476]

Appreciative for sharing such mind blowing information.

Flare Account

[snaptopixel]

Unfortunately this is not quite as simple as “all browsers support this default behavior” if you look deeper you’ll see:

The hidden state can be easily overridden with a CSS display property set to anything other than none

So in those cases hidden is inert and your element will still be visible. I’m sure that’s why this rule existed in the first place.

[adamwathan]

Classes would have overridden it even before we removed it, because it was defined in the base layer and had the same specificity as a class. So <div class=“block” hidden> was still rendered even before the change.

[snaptopixel]

OIC, thanks for teh clarification @adamwathan, I didn't realize this was in the reset... we have our own with !important 😬

[thibaudcolas]

Not sure if this is worth a proper bug report but thought I’d mention this is causing style regressions in Tailwind 3.1.1. The preflight styles force replaced elements to display: block;, which was previously overridden by the [hidden] styles, and no longer is.

Here is a simple example where this happens (see Tailwind Play demo). In Tailwind 3.1, this image is visible. In previous releases, it’s hidden, just like in vanilla HTML when no styles are applied:

<img src="404.png" width="64" height="64" alt="" hidden>

In my case this was happening with a <svg hidden> (see Tailwind Play demo), which used to work thanks to Tailwind’s preflight. SVG elements technically don’t support this attribute, so having an opinionated reset adding a [hidden] { display: none } is valuable.

---

Considering this is changing existing styles I would expect this kind of change to only be done in a major release, ideally with note of the breakage and instructions on what to do about it. For now, it would be nice to revert this in 3.1 so people can confidently upgrade and benefit from the new features without having to worry about this type of breakage.

Alternatively, go for a change like this PR to normalize.css, which preserves the previous behavior (I think?) while making it possible to use hidden="until-found".