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

Add [hidden] attribute support #53

Merged
merged 1 commit into from
Apr 20, 2020
Merged

Add [hidden] attribute support #53

merged 1 commit into from
Apr 20, 2020

Conversation

vltansky
Copy link
Member

@vltansky vltansky commented Apr 19, 2020

[hidden] attribute is a part of HTML 5 and widely supported (ie11+)
example usage:
<p hidden>this text is will have display: none set by browser</p>
it is hiding the element the same way as .hidden class do, but the trick is that if you have any style that applying display: block (or any other display value). it will override the [hidden] style
Source

the hidden rule is a User Agent style, which means it’s less specific than a moderate sneeze. This means that your favourite display style will override it:

<style>
  div { display: block; }
</style>
<div hidden>
  lol guess who's not hidden anymore
  hint: it's this thing
</div>

So I suggest to add [hidden] attr to a .hidden class.
I assume that if you want to merge this PR this should be added to docs. Let me know if you want me to add it there.

Example on html5-boilerplate:
image
After suggested fix:
image

Useful links:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
https://www.w3.org/TR/html51/editing.html#the-hidden-attribute
https://css-tricks.com/the-hidden-attribute-is-visibly-weak/

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

Pull requests should be thought of as a conversation. There will be some back and forth when trying to get code merged into this or any other project. With all but the simplest changes you can and should expect that the maintainers of the project will request changes to your code. Please be aware of that and check in after you open your PR in order to get your code merged in cleanly.

Thanks!

@roblarsen roblarsen merged commit 61a7724 into h5bp:master Apr 20, 2020
@roblarsen
Copy link
Member

thanks. That's a thoughtful addition.

@roblarsen roblarsen added this to the v2.1.0 milestone Apr 28, 2020
@coliff coliff mentioned this pull request Apr 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants