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

feature: If hidden="until-found", it's not display: none. #879

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

yamanoku
Copy link

hidden attribute, which used to have only a boolean value, now also has a new until-found value.

ref: whatwg/html@f5def65

Elements with hidden="until-found" will have content-visibility: hidden applied instead of display: none.
If specified with display: none, it may not be found in in-page searches.

ref: HTML の hidden 属性が列挙型に変更され hidden="until-found" が追加

To avoid this problem, the style specification for hidden case has been modified.

sample: https://codepen.io/yamanoku/pen/YzYpoqG

Copy link

@thibaudcolas thibaudcolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I came here looking exactly for this change, great to see this is already being worked on!

Just wanted to also suggest updating the comment to make it clear this isn’t just for legacy browser support – hidden also isn’t supported by SVG elements inline in HTML, which is very surprising. I’m not sure if this was considered when creating this specific bit of the reset, but now that this code is widely used it’d be problematic to remove this for projects that don’t care about IE10 support.

See for example Tailwind discussion on a similar change.

normalize.css Show resolved Hide resolved
normalize.css Outdated Show resolved Hide resolved
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
*/

[hidden] {
display: none;
}

[hidden="until-found"] {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good

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.

None yet

3 participants