CSS Archive

You have an element in your html that you want to temporarily hide. should you change it’s visibility to hidden or its display to none? Is there any difference? How will the rest of the page respond to your element that’s sometimes seen and sometimes not?

The css properties visibility and display may seem to do the same thing on the surface, but they are very different and often confuse those new to web development. I thought a quick walkthrough of the main values associated with each property along with a demo of each in action would help remove that confusion.

Visibility and Display Properties in Action

Here’s a simple demo of visibility and display in action that will open in a new window. Click the two links at the top to toggle the visibility and the display to see how each affects the other elements on the page. I’ll explain what’s going on with each property below.

How the CSS Visibility Property Works

The visibility property has four values associated with it, but let’s focus on the two used most often, visible and hidden.

From W3Schools

visibility: visible
The element is visible. This is default

visibility: hidden
The element is invisible (but still takes up space)

Both values are rather straightforward and behave exactly as you think. You see elements that are visible and don’t see elements that are hidden. That important point to note is that when hidden the element still takes up space.

How the CSS Display Property Works

The display property has quite a few values associated with it, but again let’s focus on a smaller subset. The two values that concern us here are block and none, but I want to quickly mention the inline value too.

Again from W3Schools

display: none
The element will generate no box at all

display: block
The element will generate a block box
(a line break before and after the element)

display: inline
The element will generate an inline box
(no line break before or after the element)

On the surface display: none might seem to be the same is visibility: hidden, but it isn’t. The big difference is in that point I called out above.

visibility: hidden - the element stays in the normal document flow

display: none - the element is removed from normal document flow so surrounding html elements collapse to close the space

Elements set to display as block or inline both fill a space. The difference being that block elements have line breaks around them and inline elements don’t. Some elements are block elements by default and some are inline elements.

When Should You Use Visibility and When Should You Use Display?

While both can be used to “hide” an element each does so in a different way. Again that difference is in how each responds to the normal document flow.

You want to use visibility when you want the element to hold its space even when it’s not seen. You want to use display when you want the element to give back its space allowing the other elements on your page to collapse around it.

In practice I tend to use display more than visibility. Usually when you want an element not to show you don’t want to leave an empty space in its place. You do need to understand that other html elements will move to fill the now unoccupied space and develop your layout accordingly.

SEO Effects of Visibility and Display

A sometimes used spam tactic is to stuff keywords on a page and make them invisible in some way. Often this is done not through either of the css properties above, but rather by giving the text the same color as the background it sits on or making the font so small as to render it invisible.

Because these tactics are frowned up by search engines, some people worry about using either the visibility or the display property to “hide” html.

There are many good reasons why you want some elements in your design to sometimes be seen and sometimes not be seen and search engines understand that. As long as you aren’t trying to trick search engines in any way you shouldn’t encounter any problems using either visibility or block to show and hide an element.

Popularity: 2%

Most of the time when designing your site navigation you’ll turn to an image to give it that something extra. However images add weight to a web page and make additional http requests leading to longer load times. Ever since I began developing websites, I’ve looked for ways to replace images with code. Today I want to share a simple way to style navigation buttons sans images and using css only.
(more…)

Popularity: 5%

Have you ever run into the situation where you’re trying to apply a css style to an element, but it won’t take? Your page it seems to be ignoring your css, but you can’t figure out why. Maybe you found yourself using !important or adding an inline style as a last resort. There’s a good chance the problem you encountered was one of css precedence.
(more…)

Popularity: 6%

You might have noticed the title of this post is phrased as a question. That’s because this post isn’t meant as a me telling you how to organize your css, but rather it’s intended as an open discussion. I’ll share some thoughts and I hope those of you who are css coders will chime in with some thoughts of your own.
(more…)

Popularity: 12%

Last week I asked you to ask me some of your css related question. You did and now it’s my turn. Please feel free to ask more questions in the comments below and I’ll respond in kind. I’ll be happy to turn this CSS Q&A into a regular post if enough questions keep coming in.

If you scan this post you’ll see there is quite a lot so let’s get to your questions
(more…)

Popularity: 13%

Looking over at the latest poll running in the sidebar, I see quite a few of you consider yourselves css newbies. Seems like a good opportunity to ask you to ask me some of your css questions. I’ll do what I can to help increase your skills.
(more…)

Popularity: 12%

I get a good amount of requests asking me to do things like exchange links or mention a specific piece of content. Normally I don’t respond, since the majority aren’t worth talking about, but a couple of days ago I had a request from Rich McIver asking me to take a look at a list of 100 Free CSS Resources. I did take a look and there are a lot of very useful resources worth calling to your attention.
(more…)

Popularity: 10%

One of the reasons I’ve often given for using css is that it gives you more control over your design. You can create with css in ways that html attributes never allow. Case in point is Chris Hester’s CSS House, an artistic creation styled solely with cascading style sheets.

(more…)

Popularity: 9%

Anyone who has ever developed a website is aware of cross browser inconsistencies. This is especially true for those of you rightfully working to eliminate table based layouts and make the move to an all css layout. Often what works in one browser won’t work in another or more precisely when you follow the standards like you should it often won’t work in Internet Explorer. Fortunately it’s not too hard to workaround the problem. The two methods I use most often are the underscore hack and Conditional Comments.

(more…)

Popularity: 12%

I’ve been working on a site the last couple of days where my design calls for some large blocks of color that aren’t in rectangular shape. I didn’t want to use images for those trapezoidal shaped blocks, in part because I prefer to use code whenever I can to save download time and in part because using images would reduce the fluidity of the design somewhat. Fortunately the css border property comes to the rescue and with it the ability to create shapes other than simple rectangles. Add some JavaScript and the results can be pretty amazing.

(more…)

Popularity: 21%