Does opacity:0 have exactly the same effect as visibility:hidden

html

css-properties

browser-compatibility

layout-implications

byAnton Shumikhin·Nov 21, 2024

opacity:0 and visibility:hidden show different behaviors in interaction and document flow. Elements disguised with opacity:0 are invisible yet clickable, and reserve their layout space. On the other hand, visibility:hidden makes elements invisible and untouchable while still holding their space in the layout.

.transparent { opacity: 0; }   /* Now you see me, now you don't! */
.hidden { visibility: hidden; } /* Playing hide and seek with CSS */

Key Features:

opacity:0 = Ghostly Presence + Interactable
visibility:hidden = Ghost Mode + Unreachable
Neither remove elements from flow but have unique interaction styles.

Interaction vs. Accessibility

When balancing between user accessibility and interactivity, the distinction becomes stark:

Keyboard Accessibility: visibility:hidden elements can't be focused, thus evading keyboard navigation. But opacity:0 lets elements stay in the tab sequence.
Handling Events: Both can interact with events in JavaScript. But opacity:0 could be a little tricky as they still respond to clicks despite being invisible.
Screen Readers: visibility:hidden is recognized by screen-readers and the content is not announced, unlike elements hidden with opacity:0.

Impact on Document flow and Rendering

Understanding unique layout implications is key when making elements disappear:

opacity:0 elements are actually rendered, just not visibly, influencing layout calculations like margin collapsing.
visibility:hidden also maintains space, but in tables, it morphs into display: none, in a truly magic trick called visibility: collapse.

Browser-specific behaviors and Support

Every CSS property has its own quirks and support issues. For opacity:0, keep these in mind:

Browser Compatibility: opacity had infamous issues with Internet Explorer. Documentation suggests it's risky to click a ghost or feed an invisible dinosaur. Remember to check the lowest browser version you need to support.
Print Issues: When printing a page, opacity:0 elements may make a surprise appearance, while visibility:hidden elements choose to play it safe.

Practical Scenarios and Considerations

When choosing between opacity:0 and visibility:hidden, factor in:

Animating Transitions: With opacity you can fade elements in/out, while visibility can't transition between visible and hidden states, as it only knows now-you-see-me, now-you-don’t.
Stacking Order: Applying opacity less than 1 creates a new stacking context, which might mess with your z-index values and change the visibilities of overlaid elements.
Performance: opacity:0 can cause some painting issues that may put a damper on your performance. Modern web sleuths (aka browsers) have gotten better at handling this though!