Elements can be visible even though their parent has set "visibility: hidden"

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.

That's pretty wild!

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. 😲

<div>
 Hello <span>world</span>
</div>
<div>
 Hello <span>world</span>
</div>

body {
 color: white;
}

div {
 text-decoration: underline;
}

div span {
 text-decoration: none;
}
body {
 color: white;
}

div {
 text-decoration: underline;
}

div span {
 text-decoration: none;
}

Regarding Scott's responsive pattern, it's incredibly smart but also feels super hacky. I'll have to sleep over all these discoveries...