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.