visibility (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.5+ |
|---|---|---|---|
| Partial | Full | Partial | Full |
| Inherited | Initial | Version |
|---|---|---|
| Yes | visible |
CSS2, 2.1 |
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;
}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
visibleThe value
visiblemakes the generated boxes visible.hiddenThe value
hiddenmakes the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible.collapseThe value
collapseis 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,collapsecauses the same behavior ashidden.
Compatibility
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Partial |
| 2.0 | Partial | |
| 3.0 | Partial | |
| Opera | 9.2 | Buggy |
| 9.5 | Full |
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
visibilityvalue ishiddento 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
- 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.
