Which to Use? display or visibility CSS Property

The CSS display property has more values available than the visibility property.

There is a major difference, however, when it comes to content that is currently unpublished but may become viewable while the user is perusing the web page:

• The display property collapses the space the content would use if it were published. The space is expanded when the content becomes viewable.

• The visibility property keeps the space open where the content would be published. When the content becomes viewable, it's published within the space kept ready for it.

The CSS values this article addresses are those that unpublish content and make the content viewable.

Details

Here are some details about the display and visibility properties.

This first table provides values used to unpublish content and making content viewable.

The display property can accept any of a number of values for how to display content. Only three are addressed on this page:

The none value is the only value the display property has for unpublishing content.

The visibility property can accept any of two values for unpublishing content.

The visible value is the only value the visibility property has for making content visible.

Demonstrations

Let's do a demonstration. Several of them.

The first demonstration is composed of three paragraphs of one sentence each. There's a three-paragraph set for each of the two properties. The second paragraph begins unpublished. You can make it viewable by clicking the link of with relevant CSS declaration.

Notice when the display:block; link is clicked, space is opened up to insert the second paragraph between the first and the last. Notice upon clicking the visibility:visible; link, however, the second paragraph becomes visible without space needing to be created for it.

This second demonstration will demonstrate the concept in a different way.

The demonstration is composed of one paragraph of three sentences for each of the two properties. The second sentence of the paragraph begins unpublished. You can make it viewable by clicking on the relevant CSS declaration.

When the display:inline; link is clicked, space is opened up to insert the second sentence between the first and the last. Clicking the visibility:visible; link, however, makes the second sentence visible without space needing to be created for it.

OK, one more demonstration.

In the third demonstration, the table published further above is repeated here, once for the display property and once for the visibility property.

This time, the section begins viewable. You click to make it unpublished. The affected section is the header in the left-most column of the table.

The behavior is quite different than with content not in a table.

When display:none; is clicked, the leftmost header cell is removed. The other headers shift left to close the space vacated by the removed header cell. When display:table-cell; is clicked, the other headers are shifted right to make room for the header cell being made viewable.

When visibility:collapse; is clicked, however, the leftmost header cell is removed but the the other headers don't shift. The space where the leftmost header cell had occupied is maintained for when visibility:visible; is clicked.

Depending on the browser you're using, when visibility:collapse; kicks in to unpublish the leftmost header cell, the header cell's outside border might also become unpublished — to become viewable again when visibility:visible; is clicked.

Which to Use?

Although the demonstrations all require a click to unpublish content or to make it viewable, the change can also be done automatically. Examples are content switching on a timer and switching a div when sufficient information has been obtained from successive Ajax calls.

For many things, perhaps for most, the display property suits better than the visibility property.

But for some things, especially for table cells when no column or row shifting is desired, the visibility property is better. The visibility property is also a choice when you wish to unpublish content or make it viewable without the browser having to reflow some or all of the web page content — as an example, when a reflow because of an automatic content change may interrupt a user's concentration elsewhere on the page.

(Use visibility:collapse; to unpublish content in tables and visibility:hidden; to unpublish content elsewhere with the visibility property.)

(This article first appeared in Possibilities ezine.)

Will Bontrager