5 façons de masquer des éléments de page avec CSS

Il existe de nombreuses façons de masquer des éléments de page à l'aide de CSS. Vous pouvez définir l'opacité sur 0, la visibilité sur cachée, l'affichage sur aucun ou la position sur absolue, puis définir la position sur la zone invisible.

Vous êtes-vous déjà demandé pourquoi nous avons tant de techniques pour masquer des éléments, mais elles semblent toutes produire le même effet ? Chaque méthode présente en fait des différences subtiles par rapport aux autres, et ces différences déterminent quelle méthode est utilisée dans une situation spécifique. Ce didacticiel couvrira les petites différences que vous devez garder à l'esprit afin que vous puissiez choisir laquelle des méthodes ci-dessus masquer les éléments en fonction de votre situation.

Opacité

L'attribut opacity signifie définir la transparence d'un élément. Il n’est pas conçu pour modifier le cadre de délimitation d’un élément. Cela signifie que définir l'opacité sur 0 masque uniquement visuellement l'élément. L'élément lui-même occupe toujours sa propre position et contribue à la mise en page de la page Web. Il répondra également à l’interaction de l’utilisateur.

.hide {
  opacity: 0;
}

Si vous envisagez d'utiliser l'attribut opacité pour masquer des éléments dans un logiciel de lecture d'écran, vous ne pouvez malheureusement pas le faire. L'élément et tout son contenu seront lus par les lecteurs d'écran, tout comme les autres éléments de la page Web. En d’autres termes, les éléments se comportent comme s’ils étaient opaques.

Je tiens également à vous rappeler que la propriété opacité peut être utilisée pour réaliser de superbes animations. Tout élément avec une valeur d'attribut d'opacité inférieure à 1 crée également un nouveau contexte d'empilement.

​Regardez l'exemple suivant :

Regardez l'exemple fourni par @SitePoint "Masquer les éléments avec opacité"

​codepen.io/SitePoint/pen/bedZrR/

Lorsque votre souris se déplace sur le deuxième bloc caché, l'état de l'élément passe en douceur de entièrement transparent à entièrement opaque. Le bloc a également sa propriété de curseur définie sur pointeur, ce qui indique que l'utilisateur peut interagir avec lui.

Visibilité

Le deuxième attribut dont il faut parler est la visibilité. Définir sa valeur sur Hidden masquera notre élément. Comme l'attribut opacité, les éléments masqués auront toujours un effet sur la mise en page de notre page Web. La seule différence avec l'opacité est qu'elle ne répond à aucune interaction de l'utilisateur. De plus, des éléments seront masqués dans le logiciel de lecture d’écran.

Cette propriété peut également réaliser des effets d'animation, à condition que ses états initial et final soient différents. Cela garantit que l'animation de transition entre les commutateurs d'état de visibilité peut être fluide dans le temps (en fait, cela peut être utilisé pour utiliser masqué pour implémenter l'affichage retardé et le masquage des éléments - Note du traducteur).

.hide {
   visibility: hidden;
}

L'exemple suivant montre la différence entre visibilité et opacité :

Regardez l'exemple fourni par @SitePoint "Masquer les éléments avec visibilité"

codepen.io/SitePoint/pen/pbJYpV/

Notez que si la visibilité d'un élément est définie sur masqué et que vous souhaitez afficher l'un de ses éléments descendants, il vous suffit de définir explicitement la visibilité de cet élément sur visible (comme .o-hide p dans l'exemple - traduction Author's note). Essayez de survoler uniquement l'élément masqué et non le numéro dans la balise p. Vous constaterez que le curseur de votre souris ne se transforme pas en doigt. À ce stade, lorsque vous cliquez sur la souris, votre événement de clic ne sera pas déclenché.

La balise

à l'intérieur de la balise

peut toujours capturer tous les événements de la souris. Une fois que votre souris survole le texte,

devient visible et l'enregistrement de l'événement prend effet.

Affichage

L'attribut display masque véritablement l'élément selon le sens du mot. La définition de la propriété display sur none garantit que l'élément n'est pas visible et que même le modèle de boîte n'est pas généré. Grâce à cet attribut, les éléments masqués n'occupent aucun espace. De plus, une fois l'affichage défini sur aucun, toute interaction directe de l'utilisateur sur l'élément ne sera pas efficace. De plus, les logiciels de lecture d’écran ne liront pas le contenu de l’élément. De cette façon, l'effet est comme si l'élément n'existait pas du tout.

Tous les éléments descendants de cet élément seront également masqués. L'ajout d'une animation de transition à cette propriété n'a aucun effet ; tout basculement entre ses différentes valeurs d'état prendra toujours effet immédiatement.

​Cependant, veuillez noter que cet élément est toujours accessible via le DOM. Vous pouvez donc le manipuler via le DOM comme n’importe quel autre élément.

.hide {
   display: none;
}

​Regardez l'exemple suivant :

Exemple fourni par @SitePoint "Utiliser l'affichage pour masquer des éléments"

​codepen.io/SitePoint/pen/zBGbjb/

Vous verrez qu'il y a un élément

à l'intérieur du deuxième élément block et que sa propre propriété d'affichage est définie sur block, mais elle est toujours invisible. C'est une autre différence entre visibilité:hidden et display:none. Dans l'exemple précédent, définir explicitement la visibilité de n'importe quel élément descendant sur visible peut le rendre visible, mais display ne le fait pas. Quelle que soit sa propre valeur d'affichage, tant que l'affichage de l'élément ancêtre est nul, ils le seront tous. visibles.

　　现在，将鼠标移到第一个块元素上面几次，然后点击它。这个操作将让第二个块元素显现出来，它其中的数字将是一个大于 0 的数。这是因为，元素即使被这样设置成对用户隐藏，还是可以通过 JavaScript 来进行操作。

　Position

　　假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下面是采用这种办法的 CSS：

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

　　下面的例子阐明了怎样通过绝对定位的方式隐藏元素，并让它和前面的那个例子效果一样：

　　看 @SitePoint 提供的例子“用 position 属性隐藏元素”

　　codepen.io/SitePoint/pen/QEboZm/

　　这种方法的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。采用这个技术的一个好处（或者潜在的缺点）是用它隐藏的元素的内容可以被读屏软件读取。这完全可以理解，是因为你只是将元素移到可视区域外面让用户无法看到它。

　　你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。这个方法在创建自定义复选框和单选按钮时经常被使用。（用 DOM 模拟复选框和单选按钮，但用这个方法隐藏真正的 checkbox 和 radio 元素来“接收”焦点切换——译者注）

　Clip-path

　　隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做 clip-path。Nitish Kumar 最近在 SitePoint 发表了“介绍 clicp-path 属性”这篇文章，通过阅读它可以了解这个属性的更多高级用法。

　　记住，clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要更低。使用 clip-path 属性来隐藏元素的代码看起来如下：

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

　　下面是一个实际使用它的例子：

　　看 @SitePoint 提供的例子“用 clip-path 属性隐藏元素”

　　http://codepen.io/SitePoint/pen/YWXgdW/

　　如果你把鼠标悬停在第一个元素上，它依然可以影响第二个元素，尽管第二个元素已经通过 clip-path 隐藏了。如果你点击它，它会移除用来隐藏的 class，让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取，许多 WordPress 站点使用 clip-path 或者之前的 clip 来实现专门为读屏软件提供的文字。

　　虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。在我们的例子里，剪裁区大小为零，这意味着用户将不能与隐藏的元素直接交互。此外，这个属性能够使用各种过渡动画来实现不同的效果。

　结论

　　在这篇教程里，我们看了 5 种不同的通过 CSS 隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性，随着时间推移，你就能根据实际需求本能地选择最佳方式了。如果你对于隐藏元素的这些方法还有任何问题，请在评论中留言。

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!