visibility: visible undoes visibility: hidden
source link: https://jakearchibald.com/2014/visible-undoes-hidden/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
visibility: visible undoes visibility: hidden
Posted 01 April 2014 - hey at least it's not another promises articleIf 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
Hello, I’m Jake and that is my tired 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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK