Elements can be visible even though their parent has set "visibility: hidden" (#tilPost)

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!

[Interactive component: visit the article to see it...]

I'm not sure yet, what to make of this discovery. Scott's responsive pattern seems incredibly smart but also super hacky. I guess I have to sleep over it...