88. Hiding and Showing Elements Responsively

It is common in responsive design to hide complex elements (like sidebars or large menus) on mobile, only revealing them on wider screens, or vice versa.

1. Using display: none

display: none completely removes the element from the document flow, meaning it takes up no space and is ignored by screen readers.

css /* Mobile-First: Hide the sidebar initially */ .sidebar { display: none; }

/* Show the sidebar only on desktop / @media (min-width: 1024px) { .sidebar { display: block; / or flex, or grid */ } }

2. Using visibility: hidden

visibility: hidden hides the element, but it still occupies its space in the layout. It's often ignored by screen readers, but still impacts layout.

3. Using opacity: 0

opacity: 0 makes the element fully transparent, but it remains fully in the document flow and is still interactive (can be clicked) and still read by screen readers.

Accessibility Concern: For completely hiding content that should not be read or interacted with, display: none is the most effective method, although the modern pattern is to avoid adding complex content that is hidden by default unless it's a navigational necessity (like a modal).