Text in CSS unsichtbar machen (ersetzt den -99999px-Hack)

Fast jeder meiner Kunden hat (natürlich, würden viele sagen) ein Logo auf der Website. Nur muss dieses ja möglichst Suma-Optimiert codetechnisch in die Seite eingebaut werden.

Dies sieht dann meistens wie folgt aus:

<h1>Meine tolle Firma</h1>

plus natürlich CSS:

h1 { 
  display: block;
  background: transparent url('/img/logo.png') no-repeat; 
  width: 300px;
  height: 100px; 
  text-indent: -99999px 
}

Das Wichtige im CSS-Code oben ist der negative Wert von text-indent, um den Text in den unsichtbaren Bereich der Website „einzurücken“. Im Gegensatz zu visibility: hidden oder display: none wird nämlich hier nicht das ganze Element, sondern nur der Text unsichtbar gemacht – so wie es vom Webentwickler gewollt ist.

Was nun im Hintergrund passiert, ist folgendes: wird mit dem Browser die Seite, die diesen negativen Wert von text-indent enthält, aufgerufen, so zeichnet der Browser eine riesige 99999px große Box, von der die Person von dem Bildschirm nichts hat – trotzdem hat der Browser arbeit und braucht eine bestimmte Zeit, diesen Kasten zu zeichnen.

Die Lösung

Besser wäre folgendes zu schreiben:

h1 { 
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Jetzt wird der Text immer um die gesamte Größe des Containers eingerückt (text-indent: 100%). Da dieser Text aber direkt abgeschnitten wird (overflow: hidden), sieht der Betrachter nichts davon. white-space: nowrap ist übrigens dafür da, das der Text in einer Zeile bleibt (text-indent gilt nur für die Einrückung der erste Zeile eines Textes).
Zudem ist der Kasten mit dem eingerückten Text auch nur maximal so groß wie der Text an sich – die gezeichnete Box des Browsers wird damit in in fast 100% der Fälle kleiner sein.

Also Leute – nur noch mit text-indent: 100% arbeiten – wer weiß, vielleicht gibt es in wenigen Jahren Retina-Bildschirme, die locker eine horizontale Aulösung von > 10000px haben. Und dann nicht mehr lange und man sieht in euren Projekten den negativ eingerückten Text.
Kann mit meiner vorgestellten Lösung nicht mehr passieren 😉

Flattr this!