HTML/CSS > Unisichtbarer Text

Manchmal braucht man einen unsichtbaren Text, der nur von Suchmaschinen (aus SEO-Gründen) oder Screenreadern gelesen werden kann, normale Besucher der Webseite sollen stattdessen ein Bild sehen können. Um das zu bewerkstelligen verwenden viele die CSS-Eigenschaft display: none;. Die wenigsten wissen allerdings, dass Google den Inhalt anschließend nicht mehr interessiert und auch die meisten Screenreader ignorieren den Text einfach.
Also muss eine andere Lösung her: Opacity. Mit dieser CSS-Eigenschaft lässt sich der Text durchsichtig darstellen und wird somit von Google als normaler Text behandelt.

Beispiel: Eine Überschrift soll den Namen der Webseite enthalten, der normale Seitenbesucher soll aber stattdessen das Logo der Webseite sehen können. Unser HTML-Code dafür sieht so aus:

View Code HTML5
<h1 id="logo"><span>Unsichtaber Name der Webseite</span></h1>

Über CSS wird der Text durchsichtig gemacht und das h1-Element bekommt als Hintergrundbild das gewünschte Logo:

View Code CSS
#logo {
	background: url(alternativ-bild.png);
	width: 200px;
	height: 203px;
}
#logo span {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	-moz-opacity: 0;
	zoom: 1;
	display: block;
	overflow: hidden;
}

Der Trick funktioniert in allen bekannten Browsern – selbst im Internet Explorer 6.

Eine Demo dazu gibt es natürlich auch:
Demo: HTML/CSS > Unsichtbarer Text

display: inline-block; Internet Explorer

Die CSS-Eigenschaft display: inline-block; wird im Internet Explorer 6 und im Internet Explorer 7 eigentlich nicht unterstützt, aber mit einem kleinen Trick lässt sich diese Eigenschaft trotzdem darstellen.

View Code HTML5
<div class="inline_block">Diese beiden Blöcke sind nebeneinander angeordnet...</div>
<div class="inline_block">...und haben trotzdem eine feste Breite.</div>
View Code CSS
/* Neue Browser */
div.inline_block { display: inline-block; width: 200px; border: 1px solid #000; padding: 3px; }
 
/* IE 6 und 7 */
div.inline_block { display: inline; zoom: 1; }

Im IE 6 und IE 7 wird die Eigenschaft display einfach wieder zurück auf inline gesetzt und anschließend die Eigenschaft zoom hinzugefügt. Damit wird der Internet Explorer dazu gezwungen die Microsoft-proprietäre Eigenschaft hasLayout für dieses Element auf true zu setzten. Was an dieser Stelle genau passiert ist an dieser Stelle zu kompliziert zum beschreiben, jedenfalls erzielt es den selben Effekt wie display: inline-block; in neueren Browsern. Wer mehr über hasLayout erfahren möchte, sollte sich den Artikel On having Layout zu Gemüte führen.

Eine funktionierende Demo zum obigen Beispiel gibt es natürlich auch.

Firebug für den IE6 (IE Developer Toolbar)

Ja, der Internet Explorer 6 hat einen Firebug: die IE Developer Toolbar. Die Toolbar weißt zwar nicht mal ansatzweise die Funktionsvielfalt auf wie man sie vom Firebug gewöhnt ist, sie ist aber trotzdem manchmal hilfreich.
Ihr könnt das Tool hier runterladen.

Hier die wichtigsten Features:

  • DOM untersuchen
  • Anzeige der CSS-Eigenschaften
  • Outline für Container-Elemente anzeigen
  • Linear
  • Validierung von HTML und CSS
  • Cookies und Cache für Webseite löschen
  • Bilder und JS ausschalten
  • Color Picker
  • und noch weitere Kleinigkeiten

Das wichtigste fehlt leider: Die CSS-Eigenschaften lassen sich nicht live bearbeiten.

Die Toolbar lässt sich nach der Installation – und einem Neustart des Explorers – über Ansicht > Explorer-Leiste > IE Developer Toolbar aufrufen. Erwartet aber nicht zu viel…
Bitte beachten: Die IE Developer Toolbar ist nur mit dem Internet Explorer 6 und 7 kompatibel. Der IE 8 bietet dieses Feature bereits von Haus aus.

Dieser Artikel soll euch jetzt aber nicht dazu auffordern sämtliche Websites für den IE6 zu optimieren. Der Browser ist mehr als veraltet und wird daher auch kaum noch genutzt (weniger als 5% der Nutzer). Je weniger Websites diese Version des Internet Explorers unterstützen desto schneller fällt die Optimierung dieses „Höllenbrowsers“ komplett weg.