How-To: Elemente mittels CSS unsichtbar machen
Ich sehe was, was du nicht siehst

How-To: Elemente mittels CSS unsichtbar machen

Share on Facebook0Tweet about this on Twitter4Share on Google+0Share on LinkedIn0Email this to someone

Wer seinen Blog liebt, der arbeitet und feilt daran, bis er perfekt wird. Manchmal stören am Ende dann aber lästige Boxen, Leerräume oder im Hintergrund wäre ein transparentes Grafikdetail noch schön. Neben bereits bekannten CSS Designmöglichkeiten bieten euch die Befehle [visibility], [display] und [opacity] eine schnelle und einfache Möglichkeit, diesen zusätzlichen kreativen Freiraum zu gewinnen.

Visibility

Die visibility Eigenschaft legt die Sichtbarkeit eines Elements fest. Dafür verwendet ihr die Parameter [hidden] und [collapse]. Der Befehl [hidden] setzt das Element dabei ausschließlich auf vollständig transparent, [collapse] kann zusätzlich Tabellenspalten/-zeilen/-gruppen-Elemente ausschneiden. Wenn dein Browser [collapse] richtig interpretieren kann, werden die transparenten Elemente später nicht mehr sichtbar sein. Safari und Chrome erkennen ihn zwar in der Regel, geben ihn aber genauso wie [hidden] aus, also mit Textfluss-Unterbrechung.

In beiden Beispielen wurde die 2. Zeile transparent:

22.2

 

33.3

 

Display

Der Befehl [display: none] funktioniert im Prinzip wie der [collapse] Befehl, nur dass ihr nicht mehr auf Tabellen beschränkt seid, sondern auch normalen Content lückenlos verschwinden lassen könnt. In unserem Fall den bekannten „Lorem ipsum …“ Text.

display none

5.5

 

 

 

 

 

 

 

Zum Vergleich nur mit [hidden]:

4.4

Opacity

[opacity] ermöglicht euch, Boxen, Hintergründe und Schriften stufenweise transparent werden zu lassen. Dazu müsst ihr den „opacity“ Befehl in die entsprechende Codezeile einfügen. Sie kann dabei einen Wert zwischen 0 und 1 annehmen.

Code in der Schriftzeile:

code-schrift-neu

 

1

 

Code in der Backgroundzeile:

code-neu

 

2

Fazit:

Zum Ausschneiden eignen sich [hidden] oder [display:none] wirklich gut. Sie sind schnell geschrieben und einfach in der Bedienung. Außerdem bleibt der Content für euch im HTML erhalten, falls ihr ihn wieder herstellen möchtet. Nur vor euren Leser ist er versteckt und das unabhängig davon, welchen Browser er nutzt. Durch den [opacity] Befehl bieten sich euch zusätzliche Gestaltungsmöglichkeiten, die man ab und zu vergisst, wie das Übereinanderlagern von Boxen oder das farbliche Anpassen des Themes. Auf jeden Fall wert, es einmal auszuprobieren.
Neben der hier vorgestellten In-Line Anwendung des Codes, funktionieren diese Code-Schnipsel natürlich auch in deiner style.css in der du die entsprechende .class oder #id einfach erweiterst. Wenn du in Testing-Tools gut abschneiden möchtest, ist diese Variante die bessere.


Ulrike

Ich bin gerne kreativ, deswegen interessiere ich mich vor allem für Grafik und Design. WordPress bietet mir dabei genau den passenden Rahmen, meine Ideen und Entwürfe anschaulich zu präsentieren.

Letzte Artikel von Ulrike (Alle anzeigen)

Share on Facebook0Tweet about this on Twitter4Share on Google+0Share on LinkedIn0Email this to someone
Kommentare zu "How-To: Elemente mittels CSS unsichtbar machen"
  1. Monika T-S schrieb am 22. August 2014, um 13:01 Uhr:

    mit display:none wird der Inhalt auch für ganz viele Screenreader Nutzer einfach unlesbar
    aber display:none hebt den so ausgezeichneten Inhalt außerhalb des Inhalts und erzeugt so keinen Leerraum

    visibility:hidden ist auch für Screenreader lesbar, hinterläßt aber einen Leerraum,

    Wer seinen WP Blog liebt wird niemals inline Styles verwenden, das ist eine Katastrophe an sich.

    Und wer so viel Text versteckt landet bei Google in der SpamEcke.

    Wieso empfiehlst du derart schlechte Praxis?

    1. Hans Jung schrieb am 22. August 2014, um 15:14 Uhr:

      Hallo Monika,

      vielen Dank für deinen Kommentar. Deine Anmerkungen sind absolut richtig! Die Qualitätsrichtlinien von Google raten klar davon ab, Text und Links zu verbergen. Hierzu zählt auch der Alt-Text von Bildern, die über CSS ausgeblendet werden. Die zentrale Frage von Google an dieser Stelle ist, ob hiermit versucht wird für Suchmaschinen bestimmte Keywords und/oder Links im Code der Seite zu platzieren, die für die Besucher nicht sichtbar sind.
      Bitte versteht diesen Beitrag nicht als Aufforderung mit diesem Code Text auf eurer Seite zu verbergen.
      Dass wir in diesem Beitrag verschiedene Textelemente per CSS bearbeitet haben, soll lediglich die einzelnen Funktionsweisen anschaulich demonstrieren.

      Aus meiner Sicht (und diese weicht von den anderen Redakteuren ab) handelt es sich beim vereinzelten Ausblenden von Elementen nicht zwangsläufig um einen Verstoß gegen die Webmaster Richtlinien. Wenn ich z.B. in meinem Theme ohne viel Aufwand eine optische Trennung entfernen möchte, ohne dass das nachfolgende Element verrückt, erreiche ich dies sehr schnell über visibility: hidden im style.css. Die Frage aus den Webmaster Richtlinien „Würde ich das auch tun, wenn es keine Suchmaschinen gäbe?“ kann ich in diesem Fall klar mit Ja beantworten.
      Ich persönlich bin der Meinung, dass die ausgeblendeten Code-Zeilen in diesem Theme-Beispiel nicht als „versteckter Text“ interpretiert werden.

      Freue mich über deine (und eure) Einschätzung hierzu.

      Viele Grüße,
      Hans

  2. Monika T-S schrieb am 22. August 2014, um 15:48 Uhr:

    Ich habe seit „immer“ versteckte Texte auf meinen Sites, nämlich Hinweise an Screenreader NutzerInnen.

    Mir fehlte einfach der Hinweis, dass man sich sehr genau überlegen soll was man im Frontend ausblendet, denn im Quelltext steht das alles drin „ausgeschnitten“ ist es daher nicht.

Schreibe einen Kommentar

Pressengers lebt von der Wordpress Community, beteilige dich mit einem Kommentar!
Deine E-Mail Adresse wird nicht veröffentlicht.

Achtung: Mit dem Absenden eines Kommentars erklärst du dich damit einverstanden, dass alle eingegebenen Daten und deine IP-Adresse zum Zweck der Spamvermeidung durch das Programm Akismet in den USA überprüft und gespeichert werden. Weitere Informationen zu Akismet und Möglichkeiten des Widerrufs..