display: none vs [hidden]
HTML5 adds the hidden
attribute which has the same affect as the CSS display: none
declaration. An element will not be displayed if the hidden
attribute is used regardless of its value:
<div hidden>
<!-- This will disappear from the screen -->
</div>
Both hides the content from the screen reader as well.
Differences
- Both
display: none
declaration andhidden
attribute work in the same way. But thehidden
attribute provides better semantic. display: none
works in the old browsers, buthidden
isn't supported natively in IE 10 and below.
To get around the problem, we can simply set
[hidden] {
display: none;
}
It's included in modern CSS normalizing libraries such as Normalize.css.
Changing the value of display
property to something else (such as display: flex
) will override the behavior of the hidden
attribute.
Popular libraries prevent it from being overridden by using !important
:
[hidden] {
display: none !important;
}
The implementation can be found in Bootstrap 4's Reboot, PureCSS.