Reset breaks the hidden-attribute on semantic elements

[Rasmus Schultz]

The CSS reset appears to break the hidden attribute for numerous semantic elements, such as <section>.

For example, <section hidden> leads to a visible element after applying the reset, because the display: block property of that rule apparently trumps the effect of the hidden attribute in terms of specificity.

If it has to reset the display property of semantic block elements - and I'm not convinced that it needs to, because the semantic block elements should have display: block by default - but assuming it has to, it probably needs to include a more specific rule to restore the expected behavior of the hidden attribute, e.g. for example:

section[hidden] {
  display: none;
}

[Shannon Moeller]

Firstly, thanks, I agree with you. This reset was originally created in 2008 and updated in 2011. The web landscape has changed pretty drastically since then and the argument can be made that setting display: block on HTML5 elements has reached the point of cruft.

That said, the intent of this repo is to be an unmodified copy of @meyerweb's original reset. There is only one deviation, but it was specifically approved by Mr. Meyer (#7). There are many other forks out there that may better serve your purposes in 2018. I still like this one.

To solve the issue you mention here, I generally include this block right after I @import the reset:

[hidden] {
    display: none;
}

As attribute selectors have the same specificity as class names and those are higher than element names, this is generally sufficient to restore the semantics.

[Rasmus Schultz]

the intent of this repo is to be an unmodified copy of @meyerweb's original reset [...] There are many other forks out there that may better serve your purposes in 2018

Perhaps the readme should clarify the fact that this repo is more of a historical archive than a relevant utility for today? Perhaps consider providing links to some of these modern alternatives.

Under the NPM package name reset.css, it's terribly prominent, and the package is actually rising in popularity - and probably not because a lot of people are interested in building historical archives of CSS resets, but more likely because it's misunderstood.

To solve the issue you mention here, I generally include this block right after I @import the reset

I wonder if @meyerweb would approve of this change?

And would that be enough to make the original reset.css relevant again?

[Shannon Moeller]

Perhaps the readme should clarify the fact that this repo is more of a historical archive than a relevant utility for today?

I don't consider it a historical archive, but a pristine, stable, battle-tested, installable copy. It's still relevant as IE11 has not yet reached official end-of-life.

Perhaps consider providing links to some of these modern alternatives.

Most other variants I've seen introduce some opinionated additions that I don't generally want in a reset for my projects.

I wonder if @meyerweb would approve of this change?

Great question!

And would that be enough to make the original reset.css relevant again?

I think so, especially as the case can be made that this is a bugfix.

[Eric A. Meyer]

Recommended addition:

*[hidden] {display: none;}

That will catch any element that has a hidden attribute. This follows in the footsteps of the suggested styling in WHATWG’s HTML LS 5.1, section 14.3.1.

[Shannon Moeller]

Thanks! Added and released as v3.0.0.