5 Möglichkeiten, Seitenelemente mit CSS auszublenden

Es gibt viele Möglichkeiten, Seitenelemente mithilfe von CSS auszublenden. Sie können die Deckkraft auf 0, die Sichtbarkeit auf „Ausgeblendet“, die Anzeige auf „Keine“ oder die Position auf „Absolut“ setzen und dann die Position auf den unsichtbaren Bereich festlegen.

Haben Sie sich jemals gefragt, warum wir so viele Techniken haben, um Elemente zu verbergen, aber alle den gleichen Effekt zu erzielen scheinen? Tatsächlich weist jede Methode einige subtile Unterschiede zu den anderen auf, und diese Unterschiede bestimmen, welche Methode in einer bestimmten Situation verwendet wird. In diesem Tutorial werden die kleinen Unterschiede behandelt, die Sie beachten müssen, damit Sie je nach Situation auswählen können, welche der oben genannten Methoden zum Ausblenden von Elementen ausgewählt werden soll.

Deckkraft

Das Opazitätsattribut bedeutet, die Transparenz eines Elements festzulegen. Es ist nicht dazu gedacht, den Begrenzungsrahmen eines Elements zu ändern. Das bedeutet, dass das Element nur optisch ausgeblendet wird, wenn die Deckkraft auf 0 gesetzt wird. Das Element selbst nimmt weiterhin seine eigene Position ein und trägt zum Layout der Webseite bei. Es reagiert auch auf Benutzerinteraktionen.

.hide {
  opacity: 0;
}

Wenn Sie vorhaben, das Opazitätsattribut zum Ausblenden von Elementen in einer Bildschirmlesesoftware zu verwenden, ist dies leider nicht möglich. Das Element und sein gesamter Inhalt werden von Screenreadern gelesen, genau wie andere Elemente auf der Webseite. Mit anderen Worten: Elemente verhalten sich, als wären sie undurchsichtig.

Ich möchte Sie auch daran erinnern, dass mit der Opazitätseigenschaft einige großartige Animationen erzielt werden können. Jedes Element mit einem Opazitätsattributwert kleiner als 1 erstellt auch einen neuen Stapelkontext.

​Sehen Sie sich das folgende Beispiel an:

Schauen Sie sich das von @SitePoint bereitgestellte Beispiel „Elemente mit Deckkraft ausblenden“

an ​codepen.io/SitePoint/pen/bedZrR/

Wenn Sie mit der Maus über den ausgeblendeten zweiten Block fahren, wechselt der Elementstatus sanft von vollständig transparent zu vollständig undurchsichtig. Die Cursoreigenschaft des Blocks ist außerdem auf „Pointer“ gesetzt, was anzeigt, dass der Benutzer mit ihm interagieren kann.

Sichtbarkeit

Das zweite Attribut, über das es zu sprechen gilt, ist die Sichtbarkeit. Wenn Sie den Wert auf „hidden“ setzen, wird unser Element ausgeblendet. Ebenso wie das Opazitätsattribut haben ausgeblendete Elemente weiterhin Auswirkungen auf das Layout unserer Webseite. Der einzige Unterschied zur Opazität besteht darin, dass sie nicht auf Benutzerinteraktionen reagiert. Darüber hinaus werden Elemente in der Bildschirmlesesoftware ausgeblendet.

Mit dieser Eigenschaft können auch Animationseffekte erzielt werden, sofern Anfangs- und Endzustand unterschiedlich sind. Dadurch wird sichergestellt, dass die Übergangsanimation zwischen Sichtbarkeitsstatuswechseln zeitlich reibungslos erfolgen kann (tatsächlich kann dies verwendet werden, um mit „hidden“ eine verzögerte Anzeige und Ausblendung von Elementen zu implementieren – Anmerkung des Übersetzers).

.hide {
   visibility: hidden;
}

Das folgende Beispiel zeigt den Unterschied zwischen Sichtbarkeit und Deckkraft:

Siehe das von @SitePoint bereitgestellte Beispiel „Elemente mit Sichtbarkeit ausblenden“

codepen.io/SitePoint/pen/pbJYpV/

Beachten Sie, dass Sie, wenn die Sichtbarkeit eines Elements auf „Ausgeblendet“ eingestellt ist und Sie eines seiner Nachkommenelemente anzeigen möchten, nur die Sichtbarkeit dieses Elements explizit auf „Sichtbar“ setzen müssen (z. B. .o-hide p im Beispiel – Übersetzung „Autor“) Notiz). Bewegen Sie den Mauszeiger nur über das ausgeblendete Element und nicht über die Zahl im p-Tag. Sie werden feststellen, dass sich Ihr Mauszeiger nicht in einen Finger verwandelt. Wenn Sie zu diesem Zeitpunkt mit der Maus klicken, wird Ihr Klickereignis nicht ausgelöst.

Das

-Tag innerhalb des

-Tags kann weiterhin alle Mausereignisse erfassen. Sobald Sie mit der Maus über den Text fahren, wird

sichtbar und die Veranstaltungsanmeldung wird wirksam.

Anzeige

Das Anzeigeattribut verbirgt das Element tatsächlich entsprechend der Bedeutung des Wortes. Wenn Sie die Anzeigeeigenschaft auf „Keine“ setzen, wird sichergestellt, dass das Element nicht sichtbar ist und nicht einmal das Boxmodell generiert wird. Mit diesem Attribut belegen ausgeblendete Elemente keinen Platz. Darüber hinaus ist jede direkte Benutzerinteraktion am Element wirkungslos, sobald die Anzeige auf „Keine“ gesetzt ist. Darüber hinaus liest die Bildschirmlesesoftware den Inhalt des Elements nicht. Auf diese Weise entsteht der Effekt, als ob das Element überhaupt nicht existierte.

Alle Nachkommen dieses Elements werden ebenfalls ausgeblendet. Das Hinzufügen einer Übergangsanimation zu dieser Eigenschaft hat keine Auswirkung; jeder Wechsel zwischen den verschiedenen Statuswerten wird immer sofort wirksam.

​Bitte beachten Sie jedoch, dass auf dieses Element weiterhin über das DOM zugegriffen werden kann. Sie können es also wie jedes andere Element über das DOM manipulieren.

.hide {
   display: none;
}

​Sehen Sie sich das folgende Beispiel an:

Beispiel bereitgestellt von @SitePoint „Verwenden Sie die Anzeige, um Elemente auszublenden“

​codepen.io/SitePoint/pen/zBGbjb/

Sie werden sehen, dass sich im zweiten Blockelement ein

-Element befindet und dessen eigene Anzeigeeigenschaft auf Block gesetzt ist, aber immer noch unsichtbar ist. Dies ist ein weiterer Unterschied zwischen Visibility:hidden und Display:none. Im vorherigen Beispiel kann die explizite Einstellung der Sichtbarkeit eines Nachkommenelements auf „Sichtbar“ dazu führen, dass es sichtbar ist. Dies ist jedoch bei display nicht der Fall. Unabhängig vom eigenen Anzeigewert sind alle Elemente sichtbar, solange die Anzeige des Vorgängerelements „none“ ist sichtbar. Unsichtbar.

　　现在，将鼠标移到第一个块元素上面几次，然后点击它。这个操作将让第二个块元素显现出来，它其中的数字将是一个大于 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 隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性，随着时间推移，你就能根据实际需求本能地选择最佳方式了。如果你对于隐藏元素的这些方法还有任何问题，请在评论中留言。

Das obige ist der detaillierte Inhalt von5 Möglichkeiten, Seitenelemente mit CSS auszublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!