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 & a black cat

Hello, I’m Jake and one of those faces is my face. I’m a developer advocate for Google Chrome.

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.