English version

Es gibt, wie so oft, verschiedene Wege, um HTML-Elemente zu verstecken. Aber nicht in jedem Fall verschwindet das Element dann auch vom Bildschirm. In solchen Fällen bleibt noch ein leerer Raum auf dem Screen sichtbar.
In diesem kurzen Artikel möchte ich Ihnen mehr oder weniger sinnvolle Methoden zeigen, wie man HTML-Elemente vor Usern versteckt.

Ich verwende Absatzelemente und habe alle Beispiele mit background-color, color und border gestylt, um besser sichtbar (oder unsichtbar!) zu machen, was mit welcher CSS-Anweisung passiert.

Aufbau der Beispiele

Zunächst wird der CCS-Code angezeigt, der zum Ausblenden der HTML-Elemente benötigt wird.

Dann werde ich drei Absätze zeigen, in denen der Code nicht angewendet wird.

Nach diesem Block werden die drei Absätze wiederholt. Im mittleren Absatz wird der Code, der die HTML-Elemente versteckt, angewendet.

Schließlich gibt es einen blau umrandeten Absatz, in dem ich erkläre, was passiert ist.

Übersicht

In diesem Artikel werde ich zwar acht CSS-Attribute oder -Werte verwenden, aber das ergibt nur sieben Methoden.

Die CSS-Attribute oder -Werte sind identisch mit der Methode, bis auf die Methode "Zero Pixels", die ich für die Schriftgröße und für Höhe und Breite verwende.

Direkt zu den einzelnen Methoden springen:

1. Display

.display-none {
  display: none;
}

Vorher

Code nicht angewendet

display nicht angewendet

Code nicht angewendet

Nachher

Code nicht angewendet – nächster Absatz Code angewendet display: none:

display: none

Ergebnis: Das Element und der Platz des Elements auf dem Bildschirm sind verschwunden. Achten Sie auf die Barrierefreiheit: Nicht alle Screenreader lesen ein Element mit display: none.

2. Opacity

.opac-0 {
  opacity: 0;
}

Vorher

Code nicht angewendet

opacity nicht angewendet

Code nicht angewendet

Nachher

Code nicht angewendet – nächster Absatz Code angewendet opacity: 0:

opacity: 0

Ergebnis: Der Hintergrund, der Text und der Rahmen sind verschwunden, aber nicht der Platz des Elements auf dem Bildschirm.

3. Position

.position-off-screen {
  position: absolute;
  left: -10000px;
  top: auto;
  width:1px;
  height:1px;
  overflow: hidden;
}

Vorher

Code nicht angewendet

position nicht angewendet

Code nicht angewendet

Nachher

Code nicht angewendet – nächster Absatz angewendet CSS-Klasse .position-off-screen:

position-off-screen

Ergebnis: Das Element und der Platz des Elements auf dem Bildschirm sind verschwunden. Dies ist die empfohlene Lösung unter dem Gesichtspunkt der Barrierefreiheit.

4. Transform

.transform {
  transform: translate(-9999px,-9999px);
}

Vorher

Code nicht angewendet

transform nicht angewendet

Code nicht angewendet

Nachher

Code nicht angewendet – nächster Absatz Code angewendet transform: translate(-9999px,9999px):

transform: translate(-9999px,9999px);

Ergebnis: Der Hintergrund, der Text und der Rahmen sind verschwunden, aber nicht der Platz des Elements auf dem Bildschirm.

5. Transparent

.transparent {
  background-color: transparent;
  color: transparent;
}

Vorher

Code nicht angewendet

transparent nicht angewendet

Code nicht angewendet

Nachher

Code nicht angewendet – nächster Absatz angewendet CSS-Klasse .transparent:

Transparent

Ergebnis: Nur der Hintergrund und der Text sind verschwunden, nicht aber der Rand oder der Platz des Elements auf dem Bildschirm.

Man kann border: transparent anwenden, dann wird auch der Rand verschwinden.

6. Visibility

.visiblity-hidden {
  visiblity: hidden;
}

Vorher

Code nicht angewendet

visibility nicht angewendet

Code nicht angewendet

Nachher

Code nicht angewendet – next paragraph code applied visibility: hidden:

visiblity: hidden

Ergebnis: Der Hintergrund, der Text und der Rahmen sind verschwunden, aber nicht der Platz des Elements auf dem Bildschirm. Achten Sie auf die Barrierefreiheit: Nicht alle Screenreader lesen ein Element mit visiblity: hidden.

7. Zero Pixels

a) font-size

.zero-font {
  font-size: 0;
  line-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

Vorher

Code nicht angewendet

font-size and line-height nicht angewendet

Code nicht angewendet

Nachher

Code nicht angewendet – nächster Absatz angewendet CSS-Klasse .font-zero:

font-size, line-height, margin, padding and border: 0; overflow: hidden.

Ergebnis: Der Hintergrund und der Text sind verschwunden, aber nicht der Rahmen, und das Element nimmt immer noch etwas Platz auf dem Bildschirm ein.

Mann kann border: transparent anwenden oder borderüberhaupt nicht stylen, dann verschwindet auch der Rand. Aber auch hier bleibt etwas Platz auf dem Bildschirm übrig.

b) height and width

.height-width {
  height: 0;
  width: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

Vorher

Code nicht angewendet

height and width nicht angewendet

Code nicht angewendet

Nachher

Code nicht angewendet – nächster Absatz angewendet CSS-Klasse .height-width:

Height, width, margin, padding and border: 0; overflow: hidden.

Ergebnis: Der Hintergrund, der Text und der Rahmen sind – bis auf einen kleinen Punkt – verschwunden, aber das Element nimmt immer noch etwas Platz auf dem Bildschirm ein.

Man kann border: transparent anwenden oder borderüberhaupt nicht stylen, dann verschwindet der Rand vollständig. Aber auch hier bleibt etwas Platz auf dem Bildschirm übrig.

Mit dem Firefox-Entwicklerwerkzeug Inspector können wir sehen, wo der Platz des nun unsichtbaren Textes geblieben ist: es ist der halbtransparente blaue Raum auf der linken Seite des Screenshots.

Die CSS-Eigenschaft content-visibility wird bislang nicht von vielen Browsern unterstützt, sodass ich sie hier nicht berücksichtige.

Ich berücksichtige ebenfalls nicht das globale HTML-Attribut hidden.