Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

visibility (CSS property)

Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.5+
Partial Full Partial Full
Spec
Inherited Initial Version
Yes visible CSS2, 2.1
visibility: { visible | hidden | collapse | inherit } ;

Example

This style rule makes the element with ID "dynamic" generate an invisible box. It can be made visible using client-side scripting:

#dynamic {
  visibility: hidden;
}

Try it yourself!View all demos

Description

This property specifies whether an element is visible—that is, whether the box(es) that are generated by an element are rendered.

Note that even if a box in the normal flow is hidden, it still affects the layout of other elements, unlike the behavior that occurs when we suppress box generation altogether by setting display to none. Descendant boxes of a hidden box will be visible if their visibility is set to visible, whereas descendants of an element for which display is set to none can never generate boxes of their own.

The initial value and the inheritability were changed in CSS2.1 to address the previously undefined state for the root element.

Value

visible

The value visible makes the generated boxes visible.

hidden

The value hidden makes the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible.

collapse

The value collapse is only meaningful for certain internal table objects: rows, row groups, columns, and column groups. It causes the object to be removed from the display; the space it occupied will be filled by subsequent siblings. This doesn’t affect the table layout in any other way, so the user agent doesn’t have to recompute the layout of the table. If a spanned row or column intersects the collapsed object, it is clipped. When it’s specified for any other element than these internal table objects, collapse causes the same behavior as hidden.

Compatibility

IE5.5Partial
6.0Partial
7.0Partial
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Partial
2.0Partial
3.0Partial
Opera9.2Buggy
9.5Full

Internet Explorer for Windows versions up to and including 7:

  • don’t support the value collapse
  • don’t support the value inherit
  • don’t allow descendant boxes of an element whose visibility value is hidden to be made visible if the ancestor has a layout

Opera 9.2 and prior versions treat the value collapsed as hidden for all elements.

Safari versions up to and including 2.0 don’t support the value collapse.

User-contributed notes

ID:
#2
Date:
Mon, 07 Apr 2008 03:04:05 GMT
Contributed by:
brothercake
Status:
This note has not yet been confirmed for accuracy and relevance.

The code example here is slightly dubious, because it implies the use of visibility:hidden for content that needs JS support, however this will fail in most screenreaders as they'll still read the invisible content.

(Most browser based screenreaders can still read content which is not rendered, which is why visibility cannot be used to hide things reliably, or as a means to hide things from non-script browsers)

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters