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>
display: none
declaration and hidden
attribute work in the same way. But the hidden
attribute provides better semantic. display: none
works in the old browsers, but hidden
isn't supported natively in IE 10 and below.[hidden] {
display: none;
}
display
property to something else (such as display: flex
) will override the behavior
of the hidden
attribute. !important
:[hidden] {
display: none !important;
}