visibility
The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
collapse | 1 | 12 | 1 | 1.3 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
visible | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Implementation note
- Before Chrome 62, `visibility: collapse` has the same effect as `hidden` for `<tr>`, `<thead>`, `<tbody>`, and `<tfoot>` elements, flex items, and ruby annotations, leaving a blank gap. It has no effect on `<col>` and `<colgroup>` elements.
- Before Chrome 92, `visibility: collapse` supports `<tr>`, `<thead>`, `<tbody>`, and `<tfoot>` elements. For flex items and ruby annotations, it has the same effect as `hidden`, leaving a blank gap. It has no effect on `<col>` and `<colgroup>` elements.
- Since Chrome 92, `visibility: collapse` supports `<tr>`, `<thead>`, `<tbody>`, `<tfoot>`, `<col>` and `<colgroup>` elements. For flex items and ruby annotations, it has the same effect as `hidden`, leaving a blank gap.
Notes 2 item(s)
Implementation note
- For Edge 79 through Edge 91, `visibility: collapse` supports `<tr>`, `<thead>`, `<tbody>`, and `<tfoot>` elements. For flex items and ruby annotations, it has the same effect as `hidden`, leaving a blank gap. It has no effect on `<col>` and `<colgroup>` elements.
- Since Edge 92, `visibility: collapse` supports `<tr>`, `<thead>`, `<tbody>`, `<tfoot>`, `<col>` and `<colgroup>` elements. For flex items and ruby annotations, it has the same effect as `hidden`, leaving a blank gap.
Notes 2 item(s)
Implementation note
- Firefox doesn't hide borders when hiding `<col>` and `<colgroup>` elements if `border-collapse: collapse` is set.
- Before Firefox 88, `collapse` is not supported on ruby annotations.
Notes 2 item(s)
Implementation note
- Safari treats `visibility: collapse` like `hidden`, leaving a white gap.
- Safari supports the collapse value only on `<tr>`, `<thead>`, `<tbody>`, and `<tfoot>`, but not on `<col>` and `<colgroup>` elements.
Notes 3 item(s)
Implementation note
- Before Chrome Android 62, `visibility: collapse` has the same effect as `hidden` for `<tr>`, `<thead>`, `<tbody>`, and `<tfoot>` elements, flex items, and ruby annotations, leaving a blank gap. It has no effect on `<col>` and `<colgroup>` elements.
- Before Chrome Android 92, `visibility: collapse` supports `<tr>`, `<thead>`, `<tbody>`, and `<tfoot>` elements. For flex items and ruby annotations, it has the same effect as `hidden`, leaving a blank gap. It has no effect on `<col>` and `<colgroup>` elements.
- Since Chrome Android 92, `visibility: collapse` supports `<tr>`, `<thead>`, `<tbody>`, `<tfoot>`, `<col>` and `<colgroup>` elements. For flex items and ruby annotations, it has the same effect as `hidden`, leaving a blank gap.
Notes 2 item(s)
Implementation note
- Safari on iOS treats `visibility: collapse` like `hidden`, leaving a white gap.
- Safari on iOS supports the collapse value only on `<tr>`, `<thead>`, `<tbody>`, and `<tfoot>`, but not on `<col>` and `<colgroup>` elements.
Syntax
CSS
.hidden {
visibility: hidden;
}
.fade-out {
visibility: hidden;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s;
}Live demo
Use cases
-
Using visibility
The visibility CSS property shows or hides an element without changing the layout of a document.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.