Elements can be visible even though their parent has set "visibility: hidden"
- Published at
- Updated at
- Reading time
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 (
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: 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
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. 😲
Regarding Scott's responsive pattern, it's incredibly smart but also feels super hacky. I'll have to sleep over all these discoveries...
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 9 days ago.