Summary of methods for hiding elements

Summary of methods for CSS hidden elements

Since the screen is not the only output mechanism for reading pages, for example: hidden elements on the screen, some of them can still be read by screen readers (because screen readers rely on the accessibility tree to illustrate). In order to eliminate the ambiguity between them, we group them into three categories:

• Completely hidden : The element disappears from the render tree, taking up no space.
• Visually hidden : invisible on screen, takes up space.
• Semantic hiding : not readable by screen readers, but takes up space normally.

This article will also introduce from this perspective, and will also explain these two interview questions:

• Analyze and compare the differences and pros and cons of opacity: 0, visibility: hidden, and display: none.
• Explain the difference between the transparent keyword, rgba(), and opacity.

1. The method of complete concealment

Completely hidden: the element Dom node will disappear from the rendering tree, and it will not occupy space, nor can it be clicked to trigger a click event.

1.1 display attribute

Set displaythe attribute to none so that the element is completely hidden.

1.2 hidden attribute (HTML5)

This is a new attribute of HTML5, equivalent to display: none, written directly on the element, eg <div hidden></div>.

2. Visually hidden methods

Visually hidden : The element still occupies the position, but we cannot see it visually, but it may also trigger the click event.

2.1 The opacity attribute

opacityWhen the attribute acts on the element, the element and its content will be regarded as a whole, so as to set the overall transparency, and it can also be used in conjunction with transition to achieve a dynamic change effect.
opacity:0；If the overall transparency of the element is set to 0, it will become invisible visually, but it still occupies space and can be clicked to trigger a click event.

2.2 visibility:hidden

visibility 属性You can control the display and hiding of elements without changing the layout of the document, and still occupy space, but you cannot click to trigger the click event visibility:hiddenat that time .

Other css property methods

absolute positioning

Set position to absolute or fixed, and then move it out of the visible area by setting top, left and other values. like:

position: absolute;
left: -999px;
top: -999px;

set margin

Move it out of the viewable area by setting the margin value (visual area occupancy). like:margin-left: -99999px;

Set width and height to 0

Set the element's margin, border, padding, height , and width to 0 for the attributes that affect the element's box model.
If there are child elements or content in the element, set its overflow:hidden to hide its child elements.

width: 0px;
height: 0px;
overflow: hidden; /*隐藏子元素*/

clipping element

Clip elements through clip-pathattributes, but this attribute is relatively new, and browser compatibility is relatively poor, so you can learn about it. like:

clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);

3. Semantically hidden methods

Semantically hidden: Makes it unreadable by screen readers, but takes up space normally and is visible.

3.1 aria-hidden attribute

Setting aria-hidden the property to true makes it unreadable by screen readers, but the element still takes up space and is visible. like<div aria-hidden="true"></div>

4. Element hidden interview questions

4.1 Analyze and compare the differences and pros and cons of opacity: 0, visibility: hidden, and display: none.

1. structure:

• display:none;: The element will completely disappear from the rendering tree , it will not occupy any space during rendering , and it cannot be clicked .
• visibility: hidden;: The element will not disappear from the rendering tree, and the rendering element continues to occupy space , but the content is invisible and cannot be clicked .
• opacity: 0;: The element will not disappear from the rendering tree, and the rendering element continues to occupy space , but the content is invisible and can be clicked .

2. Inheritance:

• The display and opacity properties are non- inherited properties .
  • The reason why the descendant nodes of the display: none element disappear: the parent element disappears from the rendering tree, so the descendant nodes cannot be displayed.
  • opacity: 0 The reason why the descendant nodes of the element disappear: The opacity attribute will control the element and its content as a whole.
• The visibility property is an inherited property .
  • The reason why the descendant nodes of the visibility: hidden element disappear is that the descendant nodes inherit visibility: hidden.
  • We visibility: visible;can .

3. performance:

• display: none; : Modifying an element will cause the entire document to reflow , which consumes a lot of performance.
• visibility:hidden: Modifying the element will cause redrawing , which consumes less performance.
• opacity: 0 : Modifying the element will cause redrawing , with less performance consumption.

4.2 Explain the difference between the transparent keyword, rgba() and opacity.

• rgba()(red,green,blue,alpha) only acts on the color or background color of the element, and the rgba attribute is a non-inherited attribute.
• The transparent keyword indicates a completely transparent color, that is, the color will appear to be the background color, which is equivalent rgba(0,0,0,0)to shorthand for .
  • As the value of the background attribute, it only sets the background color of the element to be transparent , and the content in the element can still be displayed .
• When opacity acts on an element, it will treat the element and its content as a whole, thus setting the overall transparency.

Code words are not easy, friends who find it helpful will like it, and follow it.

If you have any doubts about this article, you can leave a message in the comment area. Everyone is welcome to point out the wrong views in the text.