Elements can be visible even though their parent has set "visibility: hidden"
- Published at
- Updated at
- Reading time
- 2min
Responsive design can be a real challenge if you're coding something that needs more than just squishing and reordering some boxes. Scott O'Hara published an article describing how to build elements that act as buttons or spans depending on the viewport size.
The trick: Scott uses CSS visibility
to hide and show elements throughout the element tree conditionally.
<!-- Hide the button on smaller viewports
and only show the span -->
<button type="button">
<span>Do something</spin>
</button>
Wait what? As it turns out, nested elements with different visibility
properties (visible
/ hidden
) can be visible even though their parent is hidden. 😲
Here's the MDN section about this topic.
Descendants of the element will be visible if they have visibility set to visible.
That's pretty wild!
display
.Elements with display: none
and all its descendants are hidden and don't take up any space.
I'm not sure yet, what to make of this discovery. Other CSS properties such as color
or background
obviously have the same behavior, sure, wy shouldn't an element have a different background color than its parent element. But for visibility
(or as folks pointed out, pointer-events
) this behavior seems off.
And then there are CSS properties such as text-decoration
where I'd totally expect that you can overwrite the ascendant's CSS, but you can't. 😲
HTML
CSS
Regarding Scott's responsive pattern, it's incredibly smart but also feels super hacky. I'll have to sleep over all these discoveries...
Join 5.4k readers and learn something new every week with Web Weekly.