What is the difference between display: none and visibility: hidden?

What is the difference between display: none and visibility: hidden?

The display: none and visibility: hidden CSS properties are often used to control the visibility of elements on a webpage, but they behave differently in terms of layout and rendering.

• display: none: When an element is set to display: none, it is completely removed from the layout. This means the element does not take up any space on the page and is not rendered at all. Any children of this element are also not rendered and do not affect the layout. The space that would have been occupied by the element is closed up, and other elements shift to fill the gap.
• visibility: hidden: When an element is set to visibility: hidden, it is not visible to the user but still affects the layout of the page. The space that the element would normally occupy remains, as if the element were still there but invisible. The element's children can also be set to visibility: visible, which allows them to be displayed despite their parent being hidden.

In summary, display: none removes the element from the layout entirely, while visibility: hidden hides the element but keeps its space in the layout.

How does the use of display: none affect the layout of a webpage?

When you use display: none on an element, it significantly affects the layout of the webpage in the following ways:

• Space Removal: The element does not occupy any space on the page. The layout adjusts as if the element was never there. This means that other elements may shift up, down, or to the side to fill the space that would have been occupied by the hidden element.
• Reflow: The removal of the element can trigger a reflow of the page's layout. Reflow is the process where the browser recalculates the positions and dimensions of elements on the page. This can be an intensive operation, especially if the change affects a large portion of the page.
• Parent and Sibling Elements: The parent container of the element with display: none may shrink or expand depending on the remaining content. Sibling elements will adjust their positions based on the absence of the hidden element.
• Child Elements: Any child elements inside the element set to display: none are also not rendered and do not affect the layout in any way.

Using display: none is useful when you want to dynamically show and hide elements without affecting the flow of other content on the page, such as in tabbed interfaces or modal dialogues.

What are the performance implications of using visibility: hidden versus display: none?

The performance implications of using visibility: hidden versus display: none can be broken down into several key areas:

• Rendering Performance: Using visibility: hidden is generally faster because the browser still renders the element and its children, but simply hides them from view. This avoids triggering a reflow of the layout, which can be computationally expensive. On the other hand, display: none causes the element to be removed from the rendering tree, which may lead to a reflow of the page layout, potentially impacting performance, especially if the hidden element is large or if the layout is complex.
• Memory Usage: Elements set to visibility: hidden still exist in the DOM and consume memory, as they are still part of the rendering tree. In contrast, elements with display: none do not take up rendering resources but are still in the DOM, which can save some memory compared to visibility: hidden.
• JavaScript and Event Handling: Elements with visibility: hidden can still receive events and be manipulated by JavaScript, whereas elements with display: none cannot. This can impact performance in applications where many hidden elements are still being interacted with or manipulated.
• Accessibility: Elements with visibility: hidden can still be accessible to screen readers (if not explicitly set otherwise), which may affect performance in the case of voice navigation and other assistive technologies.

Overall, visibility: hidden tends to be less taxing on performance in terms of layout recalculations, but display: none can be more efficient in terms of memory usage and rendering resources.

Does visibility: hidden still allow an element to be accessible to screen readers?

Yes, visibility: hidden generally allows an element to remain accessible to screen readers, provided the element is still part of the document's tab order or has not been explicitly excluded from the accessibility tree. This is because the element still exists in the DOM and is part of the rendering tree, albeit visually hidden.

However, there are some considerations to keep in mind:

• Tab Order: If the element with visibility: hidden is focusable (e.g., a form element), screen readers can still access it if it's part of the tab order.
• ARIA Attributes: You can use ARIA (Accessible Rich Internet Applications) attributes to control whether an element is exposed to assistive technologies. For instance, aria-hidden="true" can be used in conjunction with visibility: hidden to ensure that the element is also hidden from screen readers.
• CSS and JavaScript: If you are using CSS to set visibility: hidden, and the element is still part of the DOM and not manipulated by JavaScript to remove it from the tab order or set aria-hidden, it will likely be accessible to screen readers.

It's important to test your web applications with screen readers to ensure that hidden elements behave as intended in terms of accessibility.

The above is the detailed content of What is the difference between display: none and visibility: hidden?. For more information, please follow other related articles on the PHP Chinese website!