visibility
The visibility CSS property sets whether an element is shown. Invisible elements still affect the document layout.
Overview
The visibility CSS property sets whether an element is shown. Invisible elements still affect the document layout.
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 sets whether an element is shown. Invisible elements still affect the document layout.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features