So lassen Sie HTML vollständig verschwinden

Wir alle wollen manchmal verschwinden. HTML-Elemente sind nicht anders. Manchmal wollen sie sich für eine Weile verstecken. Nicht aufhören, vollständig zu existieren - halten Sie die Dinge einfach auf dem Tiefpunkt.

Zum Glück bietet CSS eine Vielzahl von Optionen, wenn es darum geht, HTML-Elemente verschwinden zu lassen.

Das CSS, unsichtbar zu werden

Nehmen wir ein HTML-Element mit der Klasse "Ghost" und verstecken es.

//index.html

I’m friendly!

//style.css
.ghost {
}

Tote Pixel

Standardmäßig sind HTML-Elemente sichtbar. Ihre Standard - Sichtbarkeit CSS - Eigenschaft ist sichtbar , aber Sie können das Skript drehen und gehen:

.ghost {
 visibility: hidden;
}

Jetzt ist der Geist versteckt, nimmt aber immer noch Platz auf der Seite ein.

Ohne jede Spur

Wenn Sie etwas unsichtbar machen und auch keinen Platz beanspruchen möchten, können Sie auch die CSS- Anzeigeeigenschaft verwenden .

Entwickler verwenden normalerweise die display-Eigenschaft, um festzulegen, ob ein HTML-Element als Blockelement oder als Inline-Element angezeigt werden soll. Sie können das Element jedoch auch vollständig ausblenden:

.ghost {
 display: none;
}

Und im Gegensatz zu Sichtbarkeit: versteckt , ein Element, das mit Anzeige versteckt ist : Keines nimmt keinen Platz auf der Seite ein.

Durchsichtige Seelen

Sie können ein Element auch so transparent machen, dass es mithilfe der Opazitäts- CSS-Eigenschaft unsichtbar ist .

.ghost {
 opacity: 0.0;
}

Wie Sichtbarkeit: versteckt, Deckkraft: 0.0 lässt einen leeren Raum, in dem sich das HTML-Element befindet. Denken Sie daran, dass bei all diesen Techniken das Element ein Teil des DOM bleibt - es ist für normale Benutzer in ihren Browsern einfach nicht sichtbar.

Renn weg! Lauf weit, weit weg!

Eine letzte Möglichkeit, ein Element auszublenden, besteht darin, es so weit von der Seite zu entfernen, dass Sie es enorm verkleinern müssten, um es zu sehen.

Um dies zu tun, verwenden Sie zuerst die Position CSS - Eigenschaft dem Elemente eine geben absolute Position auf der Seite (im Gegensatz zu relativ zu anderen HTML - Elementen).

Dann können Sie das Element um eine beliebig große Anzahl von Pixeln von der Seite verschieben:

.ghost { position: absolute; left: -999999px;}

Wieso würdest du das machen? Nun, es ist gut für die Zugänglichkeit Ihrer Inhalte. Bildschirmleser, mit denen sehbehinderte Menschen im Internet surfen, können diesen Inhalt abrufen, und alle anderen wissen nicht, dass der Inhalt vorhanden ist.

Positionieren Sie diese unsichtbaren Elemente für optimale Ergebnisse links anstatt oben oder unten, was die Bildschirmleser verwirren kann.

Ein Geist für Halloween sein

Wenn Sie alle 4 dieser Techniken zusammenfügen, erhalten Sie ein ziemlich cooles Halloween-Kostüm mit geringem Aufwand:

Ich habe das mit Hilfe des in Austin ansässigen Designers und Wohnmobils Wes Searan gemacht.

Sie können bis Ende dieses Wochenendes eine abholen - in Herren- und Damengrößen.

Ich schreibe nur über Programmierung und Technologie. Wenn Sie mir auf Twitter folgen, werde ich Ihre Zeit nicht verschwenden. ?