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
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. 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:
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)
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.
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 良好，但IE仅支持opacity 0到1 |
| 可访问性 | 如果设置为0或0%，则内容不会被读取 |
| 布局影响 | 否 |
| 渲染需求 | 合成 |
| 性能 | 最佳，可以使用硬件加速 |
| 动画帧 | 是 |
| 隐藏时触发事件 | 是 |
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.
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 Alphahsla(h, s, l, a): Hue, Saturation, Brightness and Alpha#RRGGBBAA and #RGBA
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 良好，但IE仅支持transparent和rgba |
| 可访问性 | 内容仍然会被读取 |
| 布局影响 | 否 |
| 渲染需求 | 绘制 |
| 性能 | 良好，但不如opacity快 |
| 动画帧 | 是 |
| 隐藏时触发事件 | 是 |
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:
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.
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 良好 |
| 可访问性 | 内容仍然会被读取 |
| 布局影响 | 否——原始尺寸保持不变 |
| 渲染需求 | 合成 |
| 性能 | 最佳，可以使用硬件加速 |
| 动画帧 | 是 |
| 隐藏时触发事件 | 否 |
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.
clip-path provides an interesting range of animations, although it can only be used in modern browsers.
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 仅限现代浏览器 |
| 可访问性 | 一些应用程序仍然可以读取内容 |
| 布局影响 | 否——原始尺寸保持不变 |
| 渲染需求 | 绘制 |
| 性能 | 合理 |
| 动画帧 | 是，在现代浏览器中 |
| 隐藏时触发事件 | 否 |
5. visibility
visibility attribute can be set to visible or hidden to show and hide elements.
Unless the collapse value is used, the space used by the element will remain in place.
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 极佳 |
| 可访问性 | 内容不会被读取 |
| 布局影响 | 否，除非使用collapse |
| 渲染需求 | 合成，除非使用collapse |
| 性能 | 良好 |
| 动画帧 | 否 |
| 隐藏时触发事件 | 否 |
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.
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
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 极佳 |
| 可访问性 | 内容不会被读取 |
| 布局影响 | 是 |
| 渲染需求 | 布局 |
| 性能 | 差 |
| 动画帧 | 否 |
| 隐藏时触发事件 | 否 |
hidden7. HTML Attributes
hiddenYou can add HTML
<p hidden>隐藏内容</p>
This will apply the browser's default style:
[hidden] {
display: none;
}
display: none This has the same advantages and disadvantages as
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
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 极佳，除非使用position: sticky |
| 可访问性 | 内容仍然会被读取 |
| 布局影响 | 是，如果更改了定位 |
| 渲染需求 | 取决于情况 |
| 性能 | 如果小心谨慎，则性能合理 |
| 动画帧 | 是，在top、bottom、left和right上 |
| 隐藏时触发事件 | 是，但可能无法与屏幕外的元素交互 |
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.
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 极佳 |
| 可访问性 | 内容仍然会被读取 |
| 布局影响 | 否，如果绝对定位 |
| 渲染需求 | 绘制 |
| 性能 | 如果小心谨慎，则性能合理 |
| 动画帧 | 是，当覆盖伪元素或子元素时 |
| 隐藏时触发事件 | 是，当覆盖伪元素或子元素时 |
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
transform can achieve interesting animations, but the performance is significantly better than
| 指标 | 效果 |
|---|---|
| 浏览器支持 | 极佳 |
| 可访问性 | 内容仍然会被读取 |
| 布局影响 | 是 |
| 渲染需求 | 布局 |
| 性能 | 差 |
| 动画帧 | 是 |
| 隐藏时触发事件 | 否 |
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
(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
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!
What is the difference between xls and xlsx
Why is the mobile hard drive so slow to open?
pkg file opening method
Why disabling automatic updates in Windows 11 is invalid
How to represent negative numbers in binary
Check folder size in linux
html formatting method
What is the core of a database system?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
