Fun with Visbility
What happens with nesting and visibility?
By default when you make an element
visible: hidden; it becomes hidden along with all of
the elements children. It doesn’t have to stop there though:
Hidden Parent and Visible Child
If you make an element explicitly visible it shows up, regardless of an ancestor elements visibility setting.
The specification for visbility explicitly calls out that (emphasis added):
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’.
So, lets see the basic setup:
You can see the glorious result here:
This works in any browser you’re likely to work with. It is a cool tool, not something I use all that often, but it is a nice tool to have around.
Hidden Parent and Pseudo Elements
Alright, so what happens if we want to use a pseudo element
And again, the result:
Works great, well for most of you it worked great. Unfortunately if you’re in IE it doesn’t work. I would show you a screenshot, but it’s just blank. This holds for all IE versions I’ve been able to test, all the way up through IE 11.
This one is a bummer, I was really excited when it worked so well in Chrome and FireFox, but IE dashed my hopes.
This may all seem really theoretical, but I discovered this as I was trying to build out an error display. There was an
error icon, the before pseudo element, and the error contents, the content of the
.hidden-parent. The ask from the
designers was to have the messages hidden until certain interactions happened. I was able to get this working using just
html and css without the need for an additional element for the error display.
You can see a rough version of it here. Works great, but to get IE support you need to avoid using the pseudo element.