Detailed explanation of CSS element hiding method and performance comparison

CSS provides a variety of ways to hide elements, but their impact on accessibility, layout, animation, performance, and event handling varies. This article will discuss these methods in detail and analyze their advantages and disadvantages.

Key Points

• CSS has a variety of ways to hide elements, each with different impacts on accessibility, layout, animation, performance, and event handling.
The
• opacity and filter: opacity() properties can make the element completely transparent, but the element remains on the page and can still trigger events.
• transform Attributes can hide elements by moving them out of the screen or reducing their scale, providing superior performance and hardware acceleration.
• display Attribute is a common way to hide elements, but it cannot be animated and can trigger page layouts, so it is not ideal in many cases.
• Other methods of hiding elements include HTML hidden properties, absolute positioning, overwriting other elements and reducing size, each with its own advantages and disadvantages.

Animation effect

Some CSS hidden options are all or nothing. Elements are either completely visible or completely invisible, without intermediate state. Other options, such as transparency, can have various values, so interpolated CSS animations can be implemented.

Accessibility

Each method described below hides elements visually, but it may not hide the element content of assistive technology. For example, screen readers can still announce tiny transparent text. Further CSS attributes or ARIA attributes (e.g. aria-hidden="true") may be required to describe the appropriate operation.

Please note that animations can also cause some people to experience disorientation, migraines, seizures, or other physical discomfort. Consider using prefers-reduced-motion media queries to turn off animations when specified in user preferences.

Event Handling

Hidding an element will prevent the event from being triggered on that element, or it has no effect. That is, elements are not visible, but can still be clicked or received by other user interactions.

Performance

After the browser loads and parses the HTML DOM and CSS object models, the page will be presented in three stages:

1. Layout: Generate geometry and position of each element
2. Draw: Draw the pixels of each element
3. Composition: Arrange element layers in appropriate order

The effect that only causes synthesis changes is significantly smoother than that affects the layout. In some cases, browsers can also use hardware acceleration.

1. opacity and filter: opacity() The

and opacity: N properties can pass numbers between 0 and 1, or percentages between 0% and 100%, representing full transparency and total opaqueness, respectively. filter: opacity(N)

View example

In modern browsers, there is almost no practical difference between the two, although filter should be used if multiple effects are applied at the same time (fuzzy, contrast, grayscale, etc.).

opacity Can be animated and provide excellent performance, but be aware that completely transparent elements remain on the page and can trigger events.

指標(biāo)	效果
瀏覽器支持	良好，但I(xiàn)E僅支持opacity 0到1
可訪問性	如果設(shè)置為0或0%，則內(nèi)容不會被讀取
布局影響	否
渲染需求	合成
性能	最佳，可以使用硬件加速
動畫幀	是
隱藏時(shí)觸發(fā)事件	是

2. Color Alpha Transparency

opacity affects the entire element, but the color, background-color and border-color properties can also be set separately. Using rgba(0,0,0,0) or similar methods to apply a zero alpha channel will make the project completely transparent.

View example

Each attribute can be animate separately to create interesting effects. Note that transparency cannot be applied to elements with image background unless generated using linear-gradient or similar methods.

The alpha channel can be set using the following methods:

• transparent: Completely transparent (intermediate animation cannot be performed)
• rgba(r, g, b, a): Red, Green, Blue and Alpha
• hsla(h, s, l, a): Hue, Saturation, Brightness and Alpha
• #RRGGBBAA and #RGBA

指標(biāo)	效果
瀏覽器支持	良好，但I(xiàn)E僅支持transparent和rgba
可訪問性	內(nèi)容仍然會被讀取
布局影響	否
渲染需求	繪制
性能	良好，但不如opacity快
動畫幀	是
隱藏時(shí)觸發(fā)事件	是

3. transform

transform Properties can be used to pan (mov), scale, rotate, or tilt elements. scale(0) or translate(-999px, 0px) (moving out of the screen) will hide the element:

View example

transform Provides excellent performance and hardware acceleration, as elements are actually moved into a separate layer and can be animated in 2D or 3D. The original layout space remains the same, but the completely hidden elements do not trigger any events.

指標(biāo)	效果
瀏覽器支持	良好
可訪問性	內(nèi)容仍然會被讀取
布局影響	否——原始尺寸保持不變
渲染需求	合成
性能	最佳，可以使用硬件加速
動畫幀	是
隱藏時(shí)觸發(fā)事件	否

4. clip-path

clip-path Properties create a clip area that determines which parts of the element are visible. Using values ??like clip-path: circle(0); will completely hide the element.

View example

clip-path provides an interesting range of animations, although it can only be used in modern browsers.

指標(biāo)	效果
瀏覽器支持	僅限現(xiàn)代瀏覽器
可訪問性	一些應(yīng)用程序仍然可以讀取內(nèi)容
布局影響	否——原始尺寸保持不變
渲染需求	繪制
性能	合理
動畫幀	是，在現(xiàn)代瀏覽器中
隱藏時(shí)觸發(fā)事件	否

5. visibility

The

visibility attribute can be set to visible or hidden to show and hide elements.

View example

Unless the collapse value is used, the space used by the element will remain in place.

指標(biāo)	效果
瀏覽器支持	極佳
可訪問性	內(nèi)容不會被讀取
布局影響	否，除非使用collapse
渲染需求	合成，除非使用collapse
性能	良好
動畫幀	否
隱藏時(shí)觸發(fā)事件	否

6. display

display Attributes are probably the most commonly used method of hiding elements. The none value effectively removes the element as if it never existed in the DOM.

View example

However, it is probably the worst CSS property in most cases. It cannot be animated and triggers page layout unless the element is moved out of the document stream using position: absolute or the new contain attribute is adopted.

display is also overloaded and has options such as block, inline, table, flexbox, grid, display: none;, etc. Resetting back to the correct value after unset can be troublesome (although

may be helpful).

指標(biāo)	效果
瀏覽器支持	極佳
可訪問性	內(nèi)容不會被讀取
布局影響	是
渲染需求	布局
性能	差
動畫幀	否
隱藏時(shí)觸發(fā)事件	否

hidden7. HTML Attributes

hiddenYou can add HTML

attributes to any element:

<p hidden>隱藏內(nèi)容</p>

This will apply the browser's default style:

[hidden] {
  display: none;
}

display: none This has the same advantages and disadvantages as

, although it can be useful when using a content management system that does not allow changes to styles.

8. Absolute positioning

The positiontop attribute allows the use of bottom, left, right, and left: -999px to move elements from the default static position in the page layout. Therefore, absolutely positioned elements can be moved out of the screen using

or similar methods.

View example

指標(biāo)	效果
瀏覽器支持	極佳，除非使用position: sticky
可訪問性	內(nèi)容仍然會被讀取
布局影響	是，如果更改了定位
渲染需求	取決于情況
性能	如果小心謹(jǐn)慎，則性能合理
動畫幀	是，在top、bottom、left和right上
隱藏時(shí)觸發(fā)事件	是，但可能無法與屏幕外的元素交互

9. Cover other elements

The element can be visually hidden by positioning another element with the same color as the background on top. In this example, the ::after pseudo-element is overwritten, although any child elements can be used.

View example

指標(biāo)	效果
瀏覽器支持	極佳
可訪問性	內(nèi)容仍然會被讀取
布局影響	否，如果絕對定位
渲染需求	繪制
性能	如果小心謹(jǐn)慎，則性能合理
動畫幀	是，當(dāng)覆蓋偽元素或子元素時(shí)
隱藏時(shí)觸發(fā)事件	是，當(dāng)覆蓋偽元素或子元素時(shí)

10. Reduce size

Elements can be hidden by using width, height, padding, border-width, font-size, and/or overflow: hidden to minimize the size of the element. You may also need to apply

to ensure that the content does not overflow.

View example

transform can achieve interesting animations, but the performance is significantly better than

.

指標(biāo)	效果
瀏覽器支持	極佳
可訪問性	內(nèi)容仍然會被讀取
布局影響	是
渲染需求	布局
性能	差
動畫幀	是
隱藏時(shí)觸發(fā)事件	否

Selecting of hidden elements

display: noneFor years, transform has been the preferred solution for hidden elements, but it has been replaced by options that are more flexible and easier to animate. It still works, but may only be used if you want to permanently hide all users' content. When considering performance, opacity or

are better choices.

(Cool demo links on how to show and hide images using CSS should be inserted here)

FAQ

(The FAQ section should be inserted here and adjusted and supplemented according to the original content. It is recommended to reorganize the original FAQ section into a clearer structure and express it in a simpler language.)

transformIn short, which method to choose to hide elements depends on the specific application scenario and requirements, and needs to weigh factors such as performance, accessibility and animation effects. opacity and display: none are usually better-performing options, while

is suitable for permanently hiding content that does not need to be accessed. Remember to always prioritize accessibility and user experience.

The above is the detailed content of 10 Ways to Hide Elements in CSS. For more information, please follow other related articles on the PHP Chinese website!