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


This content originally appeared on Jake Archibald's blog and was authored by Jake Archibald's blog

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


This content originally appeared on Jake Archibald's blog and was authored by Jake Archibald's blog


Print Share Comment Cite Upload Translate Updates
APA

Jake Archibald's blog | Sciencx (2014-04-01T00:00:00+00:00) visibility: visible undoes visibility: hidden. Retrieved from https://www.scien.cx/2014/04/01/visibility-visible-undoes-visibility-hidden/

MLA
" » visibility: visible undoes visibility: hidden." Jake Archibald's blog | Sciencx - Tuesday April 1, 2014, https://www.scien.cx/2014/04/01/visibility-visible-undoes-visibility-hidden/
HARVARD
Jake Archibald's blog | Sciencx Tuesday April 1, 2014 » visibility: visible undoes visibility: hidden., viewed ,<https://www.scien.cx/2014/04/01/visibility-visible-undoes-visibility-hidden/>
VANCOUVER
Jake Archibald's blog | Sciencx - » visibility: visible undoes visibility: hidden. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2014/04/01/visibility-visible-undoes-visibility-hidden/
CHICAGO
" » visibility: visible undoes visibility: hidden." Jake Archibald's blog | Sciencx - Accessed . https://www.scien.cx/2014/04/01/visibility-visible-undoes-visibility-hidden/
IEEE
" » visibility: visible undoes visibility: hidden." Jake Archibald's blog | Sciencx [Online]. Available: https://www.scien.cx/2014/04/01/visibility-visible-undoes-visibility-hidden/. [Accessed: ]
rf:citation
» visibility: visible undoes visibility: hidden | Jake Archibald's blog | Sciencx | https://www.scien.cx/2014/04/01/visibility-visible-undoes-visibility-hidden/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts