visibility
The visibility property can be used to control the rendering of an element’s boxes so that the element becomes hidden.
The hidden value is used to hide non-table elements, and the collapse value is used to hide the table rows and columns.
Elements hidden using the visibility property are invisible but are not removed from the flow of the page. They still affect the layout as if they are visible because they are not removed from the page flow as with the display property—If an element is hidden using the display property, it is removed from the page and its position is occupied by other elements on the page, but when it is hidden using the visibility property, the area it occupies on the page is still preserved.
The effect of visibility on an element when it is set to hidden is practically like making the element fully transparent—it is still there, but you cannot see it.
When an element is hidden using the visibility property, it is possible to make its descendant elements visible by applying visibility: visible to them. This is another difference between the visibility property and the display property: elements hidden using the display property will be removed from the page, as will all their descendants, and there is no way to override that, but with visibility, making the descendants visible is possible. See the display property entry for details.
Pointer events are not triggered on elements hidden using the visibility property, but events on their visible descendant elements are still fired normally. Because of that, the events attached to the hidden element can also be triggered through one of its visible descendants. See the live demo section for an example.
Official Syntax
-
Syntax:
visibility: visible | hidden | collapse | inherit
- Initial: visible
- Applies To: all elements
- Animatable: yes
Values
- visible
- Makes the element visible. This is the default value, as all elements are initially visible.
- hidden
-
Makes an element invisible (fully transparent, not drawn) without removing it from the flow of the page. The area occupied by the element is preserved as if it were visible.
Descendants of the element are visible unless specified otherwise.
- inherit
-
The element inherits its parent’s visibility. Useful when you want to hide the descendants of an element which you have hidden using
hidden. - collapse
-
Used to hide table rows, columns, column groups, and row groups.
The row(s) and column(s) hidden have their space occupied as if they have
display: none;set on them (seedisplay).However, the heights and widths of the remaining rows and columns are calculated as if the hidden rows and columns are still present. This was designed for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table.
If used on elements other than rows, row groups, columns, or column groups,
collapsehas the same meaning ashidden.Using
collapseon a flexbox item causes it to become a collapsed flex item, producing an effect similar tocollapseon a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a “strut” that keeps the flex line’s cross-size stable. For more information, see theflexentry.
Notes
The implementation for visibility: collapse is missing or partially incorrect in some modern browsers. It is almost recommended not to use it at this time.
Examples
.element {
visibility: hidden;
}
.child {
visibility: inherit;
}
tr {
visibility: collapse;
}
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The visibility property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
Support for visibility: collapse; varies a lot between browsers. There are many quirks and compatibility issues. Here are some of these quirks:
- In many cases
collapsemay not be correctly treated likehiddenon elements other than table rows and columns (even though it should). visibility: collapsemay change the layout of a table if the table has nested tables within the cells that are collapsed, unlessvisibility: visibleis specified explicitly on nested tables.- Webkit browsers will collapse a row, but the space it occupied will remain. And if the table cells inside had a border, that will collapse into a single border along the top edge.
- Chrome and Safari browsers will not collapse a column or column group.
- Firefox doesn’t hide borders when hiding
<col>and<colgroup>elements ifborder-collapse: collapseis set. - In any browser, if a cell is in a column that is collapsed (whether or not it actually collapses) the text in that cell will not be displayed.
- Opera (pre WebKit) will collapse everything, except a table cell (which is correct). It also doesn’t seem to hide a
<tfoot>if it is adjacent to a visible<tbody>