Show and hidden css

content-visibility

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element’s rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

Note: The contentvisibilityautostatechange event fires on any element with content-visibility: auto set on it when its rendering work starts or stops being skipped. This provides a convenient way for an app’s code to start or stop rendering processes (e.g. drawing on a ) when they are not needed, thereby conserving processing power.

Syntax

/* Keyword values */ content-visibility: visible; content-visibility: hidden; content-visibility: auto; /* Global values */ content-visibility: inherit; content-visibility: initial; content-visibility: revert; content-visibility: revert-layer; content-visibility: unset; 

Values

No effect. The element’s contents are laid out and rendered as normal.

The element skips its contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents display: none .

The element turns on layout containment, style containment, and paint containment. If the element is not relevant to the user, it also skips its contents. Unlike hidden, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.

Formal definition

Initial value	visible
Applies to	elements for which size containment can apply
Inherited	no
Computed value	as specified
Animation type	Not animatable

Formal syntax

Accessibility concerns

Off-screen content within a content-visibility: auto property remains in the document object model and the accessibility tree. This allows improving page performance with content-visibility: auto without negatively impacting accessibility.

Since styles for off-screen content are not rendered, elements intentionally hidden with display: none or visibility: hidden will still appear in the accessibility tree. If you don’t want an element to appear in the accessibility tree, use aria-hidden=»true» .

Examples

Using auto to reduce rendering cost of long pages

The following example shows the use of content-visibility: auto to skip painting and rendering of off-screen sections. When a section is out of the viewport then the painting of the content is skipped until the section comes close to the viewport, this helps with both load and interactions on the page.

HTML

section> section> section> section> section> section> 

CSS

The contain-intrinsic-size property adds a default size of 500px to the height and width of each section element. After a section is rendered, it will retain its rendered intrinsic size, even when it is scrolled out of the viewport.

section  content-visibility: auto; contain-intrinsic-size: auto 500px; > 

Using hidden to manage visibility

The following example shows how to manage content visibility with JavaScript. Using content-visibility: hidden; instead of display: none; preserves the rendering state of content when hidden and rendering is faster.

HTML

div class="hidden"> button class="toggle">Showbutton> p> This content is initially hidden and can be shown by clicking the button. p> div> div class="visible"> button class="toggle">Hidebutton> p> This content is initially visible and can be hidden by clicking the button. p> div> 

CSS

The content-visibility property is set on paragraphs that are direct children of elements with the visible and hidden classes. In our example, we can show and hide content in paragraphs depending on the CSS class of parent div elements.

The contain-intrinsic-size property is included to represent the content size. This helps to reduce layout shift when content is hidden.

p  contain-intrinsic-size: 0 1.1em; border: dotted 2px; > .hidden > p  content-visibility: hidden; > .visible > p  content-visibility: visible; > 

JavaScript

const handleClick = (event) =>  const button = event.target; const div = button.parentElement; button.textContent = div.classList.contains("visible") ? "Show" : "Hide"; div.classList.toggle("hidden"); div.classList.toggle("visible"); >; document.querySelectorAll("button.toggle").forEach((button) =>  button.addEventListener("click", handleClick); >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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 .

Try it

To both hide an element and remove it from the document layout, set the display property to none instead of using visibility .

Syntax

/* Keyword values */ visibility: visible; visibility: hidden; visibility: collapse; /* Global values */ visibility: inherit; visibility: initial; visibility: revert; visibility: revert-layer; visibility: unset; 

The visibility property is specified as one of the keyword values listed below.

Values

The element box is visible.

The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible . The element cannot receive focus (such as when navigating through tab indexes).

The collapse keyword has different effects for different elements:

• For rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display : none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.
• Collapsed flex items and ruby annotations are hidden, and the space they would have occupied is removed.
• For other elements, collapse is treated the same as hidden .

Accessibility concerns

Using a visibility value of hidden on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

Interpolation

When animated, visibility values are interpolated between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. The value is interpolated as a discrete step, where values of the easing function between 0 and 1 map to visible and other values of the easing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.

Notes

• Support for visibility: collapse is missing or partially incorrect in some modern browsers. It may not be correctly treated like visibility: hidden on elements other than table rows and columns.
• visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility: visible is specified explicitly on nested tables.

Formal definition

Formal syntax

Источник

CSS Layout — The display Property

The display property is the most important CSS property for controlling layout.

The display Property

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline .

This panel contains a element, which is hidden by default ( display: none ).

It is styled with CSS, and we use JavaScript to show it (change it to ( display: block ).

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Examples of block-level elements:

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline element inside a paragraph.

Examples of inline elements:

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.

The element uses display: none; as default.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

Example

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

The following example displays elements as block elements:

Example

The following example displays elements as block elements:

Источник