What is the CSS display: none property and how does it differ from visibility: hidden?
Benjamin C
The CSSdisplay: none andvisibility: hidden properties are both used to hide elements on a web page, but they have different effects and behaviors. Here's a detailed explanation of each property and how they differ:
1.display: none:
Thedisplay: none property completely removes an element from the page's layout. When an element is set todisplay: none, it is not rendered and does not take up any space on the page. Other elements will fill the space previously occupied by the hidden element. The element is effectively removed from the document flow, and its dimensions and content are not accessible through CSS or JavaScript. This property is commonly used to hide elements that should not be visible or interactable.
Example:
1
2
3
4
.my-element {
display: none;
}
2.visibility: hidden:
Thevisibility: hidden property hides an element from view but still preserves its space in the layout. The element remains in the document flow, and its dimensions and content are still accessible through CSS and JavaScript. The hidden element takes up space on the page as if it were visible, and other elements do not fill the space it occupies. This property is useful when you want to hide an element while still maintaining its layout position.
Example:
1
2
3
4
.my-element {
visibility: hidden;
}
3. Differences:
- Layout Behavior: Withdisplay: none, the element is removed from the document flow, and other elements adjust to fill the space it occupied. Withvisibility: hidden, the element is still part of the document flow, and other elements do not shift to fill its space.
- Space Occupied: Withdisplay: none, the element does not take up any space on the page. Withvisibility: hidden, the element still occupies space as if it were visible.
- Accessibility: Elements hidden withdisplay: none are not accessible to CSS or JavaScript, as they are effectively removed from the document flow. Elements hidden withvisibility: hidden are still accessible to CSS and JavaScript.
- Event Handling: Elements hidden withdisplay: none do not receive any events, such as click or hover events. Elements hidden withvisibility: hidden can still receive and respond to events.
- Transitions and Animations: Elements hidden withdisplay: none cannot transition or animate their visibility. Elements hidden withvisibility: hidden can still transition or animate their visibility property.
It's worth noting that changing an element'sdisplay orvisibility property dynamically using JavaScript can have performance implications, especially if the element is frequently toggled between hidden and visible states. In such cases, it's recommended to use CSS classes and apply them to the element to control visibility.
Overall, the choice betweendisplay: none andvisibility: hidden depends on the specific use case and desired behavior. If you want to completely remove an element from the layout and document flow, usedisplay: none. If you want to hide an element while preserving its layout position, usevisibility: hidden.
