10 façons de cacher des éléments dans CSS

Explication détaillée de la méthode de cachette des éléments CSS et de la comparaison des performances

CSS fournit une variété de façons de cacher des éléments, mais leur impact sur l'accessibilité, la mise en page, l'animation, les performances et la gestion des événements varie. Cet article discutera de ces méthodes en détail et analysera leurs avantages et leurs inconvénients.

Points clés

• CSS a une variété de façons de cacher des éléments, chacun ayant des impacts différents sur l'accessibilité, la mise en page, l'animation, les performances et la manipulation des événements.
Les propriétés
• opacity et filter: opacity() peuvent rendre l'élément complètement transparent, mais l'élément reste sur la page et peut toujours déclencher des événements.
Les attributs
• transform peuvent cacher des éléments en les déplaçant hors de l'écran ou en réduisant leur échelle, en fournissant des performances supérieures et une accélération matérielle.
L'attribut
• display est un moyen courant de masquer les éléments, mais il ne peut pas être animé et peut déclencher des dispositions de page, il n'est donc pas idéal dans de nombreux cas.
• Les autres méthodes de cachette d'éléments comprennent les propriétés HTML hidden, le positionnement absolu, l'écrasement d'autres éléments et la réduction de la taille, chacun avec ses propres avantages et inconvénients.

Effet d'animation

Certaines options cachées CSS sont tout ou rien. Les éléments sont soit complètement visibles, soit complètement invisibles, sans état intermédiaire. D'autres options, telles que la transparence, peuvent avoir diverses valeurs, donc les animations CSS interpolées peuvent être implémentées.

Accessibilité

Chaque méthode décrite ci-dessous cache visuellement les éléments, mais il peut ne pas masquer le contenu des éléments de la technologie d'assistance. Par exemple, les lecteurs d'écran peuvent toujours annoncer un minuscule texte transparent. D'autres attributs CSS ou attributs ARIA (par exemple aria-hidden="true") peuvent être nécessaires pour décrire l'opération appropriée.

Veuillez noter que les animations peuvent également amener certaines personnes à subir une désorientation, des migraines, des convulsions ou d'autres inconfort physiques. Envisagez d'utiliser prefers-reduced-motion les requêtes multimédias pour désactiver les animations lorsqu'elles sont spécifiées dans les préférences de l'utilisateur.

Gestion des événements

Hiding Un élément empêchera l'événement d'être déclenché sur cet élément, ou il n'a aucun effet. Autrement dit, les éléments ne sont pas visibles, mais peuvent toujours être cliqués ou reçus par d'autres interactions utilisateur.

Performance

Après que le navigateur charge et analyse les modèles d'objets HTML DOM et CSS, la page sera présentée en trois étapes:

1. Disposition: générer de la géométrie et de la position de chaque élément
2. Draw: dessinez les pixels de chaque élément
3. Composition: organiser les couches d'élément dans l'ordre approprié

l'effet qui ne provoque que les changements de synthèse est significativement plus lisse que celle qui affecte la disposition. Dans certains cas, les navigateurs peuvent également utiliser l'accélération matérielle.

1. Les propriétés opacity filter: opacity() et peuvent transmettre des nombres entre 0 et 1, ou des pourcentages entre 0% et 100%, ce qui représente respectivement la transparence totale et l'opparence totale.

Voir l'exemple

Dans les navigateurs modernes, il n'y a presque pas de différence pratique entre les deux, bien que filter soit utilisé si plusieurs effets sont appliqués en même temps (flou, contraste, niveaux de gris, etc.).

opacity peut être animé et fournir d'excellentes performances, mais sachez que des éléments complètement transparents restent sur la page et peuvent déclencher des événements.

指标	效果
浏览器支持	良好，但IE仅支持opacity 0到1
可访问性	如果设置为0或0%，则内容不会被读取
布局影响	否
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	是

2.

affecte l'élément entier, mais les propriétés

, opacity et color peuvent également être définies séparément. L'utilisation de background-color ou des méthodes similaires pour appliquer un canal alpha zéro rendra le projet complètement transparent. border-color rgba(0,0,0,0)

Voir l'exemple

Chaque attribut peut être animé séparément pour créer des effets intéressants. Notez que la transparence ne peut pas être appliquée aux éléments avec fond d'image, sauf si généré à l'aide de

ou des méthodes similaires.

linear-gradient Le canal alpha peut être défini en utilisant les méthodes suivantes:

: complètement transparent (l'animation intermédiaire ne peut pas être effectuée)
• transparent
: rouge, vert, bleu et alpha
• rgba(r, g, b, a)
: teinte, saturation, luminosité et alpha
• hsla(h, s, l, a)
et
• #RRGGBBAA #RGBA

3. Les propriétés transform peuvent être utilisées pour pan (mov), échelle, rotation ou incliner les éléments.

ou

(en déménagement de l'écran) cachera l'élément: transform scale(0) translate(-999px, 0px) Voir l'exemple

fournit d'excellentes performances et accélération matérielle, car les éléments sont en fait déplacés dans une couche séparée et peuvent être animés en 2D ou 3D. L'espace de disposition d'origine reste le même, mais les éléments complètement cachés ne déclenchent aucun événement.

transform

4.

指标	效果
浏览器支持	良好
可访问性	内容仍然会被读取
布局影响	否——原始尺寸保持不变
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	否

Les propriétés créent une zone de clip qui détermine quelles parties de l'élément sont visibles. L'utilisation de valeurs comme masquera complètement l'élément. clip-path

Voir l'exemple

clip-path clip-path: circle(0);

fournit une gamme intéressante d'animations, bien qu'elle ne puisse être utilisée que dans les navigateurs modernes.
5. L'attribut

clip-path peut être défini sur

ou

指标	效果
浏览器支持	仅限现代浏览器
可访问性	一些应用程序仍然可以读取内容
布局影响	否——原始尺寸保持不变
渲染需求	绘制
性能	合理
动画帧	是，在现代浏览器中
隐藏时触发事件	否

pour afficher et masquer les éléments.

visibility Voir l'exemple

à moins que la valeur visibility ne soit utilisée, l'espace utilisé par l'élément restera en place. visible hidden

6. Les attributs display sont probablement la méthode la plus couramment utilisée pour cacher les éléments. La valeur

supprime efficacement l'élément comme s'il n'avait jamais existé dans le DOM.

display none Voir l'exemple

Cependant, c'est probablement la pire propriété CSS dans la plupart des cas. Il ne peut pas être animé et déclenche la mise en page à moins que l'élément ne soit déplacé du flux de document à l'aide de ou de l'attribut nouvel

est adopté.

position: absolute contain est également surchargé et propose des options telles que

,

, display, block, inline, table, etc. La réinitialisation à la valeur correcte après flexbox peut être gênante (bien que grid puisse être utile). display: none; unset

指标	效果
浏览器支持	极佳
可访问性	内容不会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	否
隐藏时触发事件	否

7.

Vous pouvez ajouter des attributs html à n'importe quel élément: hidden

Cela appliquera le style par défaut du navigateur:

hidden

Cela présente les mêmes avantages et inconvénients que

<code class="language-html"><p hidden>隐藏内容</p></code>

, bien qu'il puisse être utile lors de l'utilisation d'un système de gestion de contenu qui n'autorise pas les modifications aux styles.

<code class="language-css">[hidden] {
  display: none;
}</code>

8. L'attribut

display: none permet d'utiliser

,

, et pour déplacer des éléments de la position statique par défaut dans la disposition de la page. Par conséquent, des éléments absolument positionnés peuvent être éloignés de l'écran en utilisant

ou des méthodes similaires.

position top Voir l'exemple bottom left right

9. L'élément peut être caché visuellement en positionnant un autre élément avec la même couleur que l'arrière-plan en haut. Dans cet exemple, le pseudo-élément

est écrasé, bien que tous les éléments enfants puissent être utilisés.

::after

Voir l'exemple

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	否，如果绝对定位
渲染需求	绘制
性能	如果小心谨慎，则性能合理
动画帧	是，当覆盖伪元素或子元素时
隐藏时触发事件	是，当覆盖伪元素或子元素时

10. Les éléments

peuvent être cachés en utilisant , ,

,

, width et / ou height pour minimiser la taille de l'élément. Vous devrez peut-être également appliquer padding pour vous assurer que le contenu ne déborde pas. border-width font-size overflow: hidden Voir l'exemple

peut réaliser des animations intéressantes, mais les performances sont nettement meilleures que .

transform

Sélection d'éléments cachés

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	是
隐藏时触发事件	否

Depuis des années, a été la solution préférée pour les éléments cachés, mais il a été remplacé par des options plus flexibles et plus faciles à animer. Cela fonctionne toujours, mais ne peut être utilisé que si vous souhaitez masquer en permanence le contenu de tous les utilisateurs. Lorsque vous envisagez des performances,

ou

sont de meilleurs choix. display: none transform opacity (liens de démonstration cool sur la façon d'afficher et de masquer les images à l'aide de CSS doit être inséré ici)

FAQ

(La section FAQ doit être insérée ici et ajustée et complétée en fonction du contenu d'origine. Il est recommandé de réorganiser la section FAQ d'origine dans une structure plus claire et de l'exprimer dans une langue plus simple.)

En bref, la méthode à choisir pour cacher les éléments dépend du scénario et des exigences de l'application spécifique, et doit peser des facteurs tels que les effets de performance, d'accessibilité et d'animation. et

sont généralement des options mieux performantes, tandis que

convient pour cacher en permanence du contenu qui n'a pas besoin d'être accessible. N'oubliez pas de toujours hiérarchiser l'accessibilité et l'expérience utilisateur. transform

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!