Understanding display: none in CSS and Its Effect on the DOM
The display: none property in CSS completely hides an element from both the visual layout and the accessibility tree. While the element remains in the HTML document (the DOM), it is not rendered visually and does not take up any layout space.
The element is still part of the DOM structure but is not visible or interactive.
It is removed from the normal document flow and does not affect layout or stacking order.
Child elements of a
display: noneparent are also hidden and inaccessible.Screen readers typically do not read elements with
display: none.
In this example, the #menu element is hidden initially because of display: none. When the button is clicked, the script changes its display to block, making it visible again. The element always exists in the DOM—it just isn’t displayed.
Use
display: nonewhen you need to completely hide elements from all users, including assistive technologies.If you only want to hide an element visually but keep it accessible, use a visually hidden technique instead.
Avoid animating between
display: noneand visible states; instead, useopacityorvisibilityfor smoother transitions.Remember that
display: nonediffers fromvisibility: hidden, which hides an element but still preserves its space in the layout.