visibility: visible undoes visibility: hidden

If you set an element to display: none the browser ignores all of its children, if a child sets itself to display: block it will remain hidden. This isn't true of visibility.

Serious?

Serious.

html.show-only-the-button {
  visibility: hidden;
}
html.show-only-the-button .the-button {
  visibility: visible;
}

So says the spec:

hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

CSS 2.1

I've found this useful when testing paint-related issues, as you can isolate a particular element without disrupting layout.

Further reading

View this page on GitHub

Comments powered by Disqus

Jake Archibald in a garden with a black cat

Hello, I'm Jake and that's me there. The one that isn't a cat. I'm a developer of sorts.

Elsewhere

Contact

Feel free to throw me an email, unless you're a recruiter, or someone trying to offer me 'sponsored content' for this site, in which case write your request on a piece of paper, and fling it out the window.