CSS: The difference between display and visibility

CSS contains two properties that affect visibility.  If you aren’t fully familiar with the difference, you might assumed the following were basically identical:

h1.hidden {visibility:hidden;}

h1.hidden {display:none;}

However, these two class definitions will do two very different things. The visibility attribute actually only affects the visibility of some content. That is, if the user will be able to view the content. The space that that content occupies however, is still held by that content. So, if a large block of text for example occupied a large space on the page, setting its visibility to hidden will only hide the text. The space it takes up still remains. This is quite useful for error messages that might pop up on your page. It also doesn’t create a jarring affect to the user once the content appears and restructures the layout of the page.

The display attribute works by actually removing the item from the DOM. When you set the display of an element to “none”, the browser will reorganize the content as though that item had never been there. This is quite useful for such things as collapsible menus that need to be removed from the page once they have ceased being useful. It can also help reclaiming page space once an elements content is no longer useful to the user.

It’s also good to note which of these jQuery uses in its .show() and .hide() methods. If you’ve used it before, based on the above information you might have guessed that it affects the “display” CSS attribute and completely removes the element from the DOM. jQuery also add’s the additional functionality of .toggle() which allows you to toggle between showing and hidden without having to query an element for its current state. jQuery also allows for fading and sliding animations when calling these functions, to make these elements slide and fade in and out of your page in a less jarring way they straight removal from the DOM.

Both attributes have their place in different situations. A general rule would probably be that to keep your highly valuable website space well utilized, only set visibility on very small, 10 px or less elements, otherwise your users might be seeing a lot of empty real estate on their website.

131 replies on “CSS: The difference between display and visibility”

I like the valuable information you provide in your articles. I will bookmark your weblog and check again here frequently. I am quite certain I will learn lots of new stuff right here! Good luck for the next!

Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a bit, but other than that, this is great blog. A great read. I’ll definitely be back.

I’m not sure where you are getting your info, but good topic. I needs to spend some time learning more or understanding more. Thanks for great information I was looking for this information for my mission.

Howdy! I know this is kinda off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!

hi!,I love your writing so much! percentage we communicate more approximately your post on AOL? I need an expert in this area to solve my problem. May be that is you! Looking forward to see you.

I was wondering if you ever considered changing the layout of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two images. Maybe you could space it out better?

Undeniably consider that that you stated. Your favourite justification appeared to be at the internet the simplest thing to keep in mind of. I say to you, I definitely get irked even as other people consider worries that they plainly do not recognize about. You controlled to hit the nail upon the top as welland also defined out the whole thing with no need side effect , other people can take a signal. Will likely be back to get more. Thank you

Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a bit, but other than that, this is wonderful blog. An excellent read. I’ll definitely be back.

Leave a Reply

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