/this-vs-that GitHub 1316★

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

  1. Both display: none declaration and hidden attribute work in the same way. But the hidden attribute provides better semantic.
  2. display: none works in the old browsers, but hidden 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.

Follow me on and to get more useful contents.