CSS tip – Visibility & Display

In this introductory class on WordPress we won’t be getting deep into the CSS code, however I do think that a little bit of CSS knowledge can help you make essential adjustments to your theme. In a previous post, CSS in 10 Minutes, I explained the basics of CSS, in this post I want to quickly show you two very useful properties: Display and Visibility.

Both of these properties have the ability to hide any targeted element on a page, but in slightly different ways.

In the class, as an example we hide the ugly Search Box in the Twenty Eleven theme. Using the Inspect Element we learn that this box is designated with the  ID of #searchform. The CSS we would then write would be this:

 #searchform {display:none;}
 #searchform {visibility:hidden;}

In this instance they will both have a similar effect.

But in another example we will see the difference between the two.  We’ll now hide the WordPress tag line in the footer “Proudly powered by WordPress.” Here the element has the ID of #site-generator and it is also a link so we will include the ‘a’ tag in our CSS statement:

#site-generator a {display:none;}
#site-generator a {visibility:hidden;}

Notice how when we use display:none that the footer space will shift up and be slightly shorter. This is because with the ‘display’ property we are not only hiding the appearance of the element, we are hiding it’s underlying structure as well. So when we made that sentence in the footer disappear with the Display command it took out the whole block height of that sentence, whereas in using Visibility command we only made it not-visible and  it still took up the space.

The way I remember the difference between the two is that Visibility:hidden is like a magician making something appear to be invisible when in reality it is still there, you just don’t see it. But, with Display, think of it as a ‘display cabinet’, it is an actual physical object, taking up space and when you take it out, it is gone, not present, and anything that was sitting on top of it will now fall to the floor.

In using these CSS commands on your theme chances are you will be using visibility:hidden most of the time. There is the danger in using display:none that you will remove a needed structural element for the formatting of your web-page. The deciding factor on which method to use can be a matter of taste. If in using visibility:hidden you discover that there is now a big empty space where that element was, then try display:none to see the appearance tightens up without breaking any surrounding layout elements.

As we’ve discovered in playing around with this using our Lazyest Stylesheet plugin is that you can try this out without any fear of doing damage to your website. If something you try out has an unintended consequence, simply remove that line of CSS and you are back to your functioning theme.

This post has already been read 2252 times!