Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

Visibility: hidden vs. Display: none

Karissa Wingate

During a recent project I kept coming up against strange issues with layout. It was in a windows 8 store app, and therefore using some advanced CSS3 techniques, so I assumed I was just having issues with those. The DOM explorer is quite different from the web developer tools I am used to.  I came to realize though that during the course of development, some of our error messages were getting set with Javascript to visibility: hidden instead of display:none like I was expecting. This led to a conversation which revealed that there is some confusion about the two. Here I’ll point out the differences, just so we’re all on the same page. This concept is particularly confusing to developers who know jQuery, because jQuery uses .hide as a function to set things to display:none. When we’re writing in plain javascript though, the distinction is an important one to make because myElement.visibility = “hidden”; is very different from myElement.display = “none”;.

Visibility isn’t a super commonly used CSS property. It serves a purpose, but usually that is when you want to make something disappear without disrupting your layout. For my purposes with this past project, I was trying to move new things into the space that the now “hidden” element was taking up.

Here’s an example of how we started. Everything is set to visible.

Here’s how this text would look if we didn’t want to render the image and set it to “Visibility: hidden”:

As you can see, the image may not be visually there, but the footprint of it still is.

The desired look is above. The image is set to display:none. It never gets rendered into the Render Tree. The content next to it flows like it doesn’t exist. This is easy to see when the example is so simple, but not so easy when you’re jugging multiple elements, margins, floats and grids.

1 Comment. Leave new

[…] was originally posted on blog.tallan.com This entry was posted in Uncategorized on May 9, 2013 by […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\