Visibility - Property CSS

Syntax diagram of visibility.

Description of the visibility property.

The property visibility defines the visibility of an element. Warning: in most cases, even when the element is not visible, its space is retained. In other words, the layout is not altered even if the element is not displayed.

If an element is declared hidden but one or more of its descendants are declared visible, the latter will still be displayed. This can cause difficult problems for the browser. For example, in a table, making a row (tr) or a column (col) invisible while keeping the cells visible. Many of these special cases are not precisely defined in the standard.
The new value force-hidden should solve this.

See also the CSS property display, which can also hide an element with the value none.

Values for visibility.

• visibility: visible;

  The element is visible.

• visibility: hidden;

  The element is not visible, but its place is reserved.

  Although it is still possible to click on the location where the invisible element should have been, it does not respond to mouse events or any other events. Similarly, during audio playback, the invisible element should not be read. However, you can force it to be read; see the speak property.

  Nevertheless, if the invisible element is a container, it continues to function as a container: table tags still arrange cells into a table, grids and flex-boxes continue to position their children, and so on.

• visibility: force-hidden; ⚠

  The boxes generated by the element are invisible, no matter the value given to their visibility property.

• visibility: collapse;

  The element is not visible and its space is not reserved. This value only applies to certain elements, particularly table elements:

  1. tr (table row): the row is hidden and the following rows are moved up to take its place.
  2. <tbody (table body): the table body disappears, along with its space.
  3. col: (table column) the column is hidden and its position is retained. The following columns are shifted to the left, but their width is not changed (so the table width is reduced).
  4. colgroup (table column group): same behavior as for columns.
  5. <td (table cell): the cell is invisible but the table is not restructured. So there is a blank space where the cell would be. collapse is equivalent to hidden.

  For all other types of elements, the collapse value is equivalent to hidden.

• visibility: initial; (visible) visibility: inherit; visibility: revert; visibility: revertLayer; visibility: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the visibility property.

By animating the visibility property, it is particularly easy to create a blinking effect (image or text). The fact that the element's position is preserved allows an element to disappear without altering the layout, which avoids recalculations and page flickering..

Manipulating the visibility property programmatically.

With Javascript, change the value of visibility.

In JavaScript, here is how to modify the value of visibility. We can see that JavaScript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with camel-case notation (a capital letter to separate words).

let el = document.getElementById('id'); el.style['visibility'] = 'hidden'; // or let el = document.getElementById('id'); el.style.visibility = 'hidden';

With Javascript, read the value of visibility.

This code works if a property has been assigned directly to the element itself via its style attribute, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['visibility']; // or let el = document.getElementById('id'); let value = el.style.visibility;

With Javascript, read the calculated value of visibility.

The computed value is the one that results from evaluating the inheritance cascade. If visibility has not been defined anywhere, the calculated value is the initial value of the property (that is, visible in the case of visibility).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('visibility');

With JQuery, change the value of visibility.


$('#id').css('visibility', 'hidden');


With JQuery, read the calculated value of visibility.

let value = $('#id').css('visibility');

Other code examples.

Other examples of Javascript and JQuery code are provided on the page Javascript and CSS.

Try it yourself.

The buttons below apply the entered value to the property visibility and then display either the value as it was applied or the calculated value. In the case of visibility, it will be the same, since the property only accepts predefined values.

Simulator.

The simulator applies the property visibility to several elements of different types (the affected elements are highlighted).

• A block-type element (div).
• An inline-type element (span).
• The January cell of the first table ( td tag).
• The second row (tag tr) and the fourth column (tag col) of the second table.

You will notice that the hidden value seems to have no effect when applied to a table column. This is because cells are not descendants of the column in the HTML tree. Therefore, cells do not inherit from columns (however, they do inherit from tr rows). On the other hand, the collapse value does make the column disappear.

Browsers compatibility with visibility.

No compatibility issues have been reported regarding the visibility property.
However, it should be noted that the collapse value is only applicable to certain tags, which vary depending on the browser.

The new force-hidden value is not currently recognized.

1

visibility
property

Estimated overall support.

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Chrome

Edge

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the visibility property.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  First definition of the visibility property in the CSS language specification version 2.xx.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Display Module Level 3

  No change to the visibility property.
  

  February 20, 2014

  Working Draft.

  

  August 28, 2018

  Candidate Recommendation.

  

  

• CSS Display Module Level 4

  Adding a new value for the visibility property: force-hidden.
  

  December 19, 2024

  Working Draft.

  

  

  

See also...

The CSS specifications published by the W3C are organized into modules. The visibility and display properties are both described in the module CSS Display Module. The following definitions are also presented in that same module.

Properties:

display

Defines what the element is and how it is displayed.

⚠

reading-flow

Defines the order in which the elements of the container will be read or traversed in the case of navigation with the tab key.

⚠

reading-order

Sets the position of an element in the tab order, particularly for flexbox or grid children.