Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reset breaks the hidden-attribute on semantic elements #12

Closed
mindplay-dk opened this issue Feb 28, 2018 · 5 comments
Closed

Reset breaks the hidden-attribute on semantic elements #12

mindplay-dk opened this issue Feb 28, 2018 · 5 comments

Comments

@mindplay-dk
Copy link

@mindplay-dk mindplay-dk commented Feb 28, 2018

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;
}
@shannonmoeller

This comment has been minimized.

Copy link
Owner

@shannonmoeller shannonmoeller commented Feb 28, 2018

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.

@mindplay-dk

This comment has been minimized.

Copy link
Author

@mindplay-dk mindplay-dk commented Mar 11, 2018

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?

@shannonmoeller

This comment has been minimized.

Copy link
Owner

@shannonmoeller shannonmoeller commented Mar 12, 2018

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.

@meyerweb

This comment has been minimized.

Copy link

@meyerweb meyerweb commented Mar 13, 2018

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.

@shannonmoeller

This comment has been minimized.

Copy link
Owner

@shannonmoeller shannonmoeller commented Mar 14, 2018

Thanks! Added and released as v3.0.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.