Neun Techniken für CSS-Bilderersetzung

CSS-Bilderersetzung ist eine Technik, bei der ein Textelement (normalerweise ein Header-Tag) durch ein Bild ersetzt wird. Ein Beispiel hierfür wäre das Einfügen eines Logos auf einer Seite. Sie möchten möglicherweise ein <h1>-Tag und Text dafür verwenden, um die Vorteile für Barrierefreiheit und SEO zu nutzen, aber idealerweise möchten Sie Ihr Logo anzeigen und nicht Text.

Beachten Sie, dass einige dieser Techniken sehr alt sind. Webdesign Anfang der 2000er Jahre war ganz anders als heute, aber es wurde immer noch viel über Barrierefreiheit nachgedacht. Aus diesem Grund halten die meisten dieser Techniken auch heute noch stand. Es ist immer noch sehr interessant, all die Gedanken und Problemlösungen zu sehen, die in dieses Thema eingeflossen sind. Beachten Sie auch, dass ich all diese unter FF2, Opera 9, Safari 3 und IE 6 getestet habe und sie sich alle identisch verhielten (kaum zu glauben, ich weiß).

Die Leistungsübersicht besteht aus fünf Hauptkategorien

• CSS AN / Bilder AN
  Repräsentiert Browser in ihrem normalen Zustand. Alle Techniken sollten diesen Test bestehen, da dies der Sinn der Sache ist.
• CSS AN / Bilder AUS
  Repräsentiert Browsing mit angewandten normalen Stylesheets, aber Bildern, die ausgeschaltet sind. Dies ist selten, aber möglich (Leute mit Bandbreitenbedenken...). Dies ist der schwierigste Test. Da die meisten dieser Techniken verschiedene Längen aufweisen, um Text zu verbergen, bedeutet dies, dass nichts angezeigt wird, wenn die Bilder ausgeschaltet sind, was nicht gut ist. Die Anzeige von nur Text hier gilt als bestanden.
• CSS AUS / Bilder AN
  Repräsentiert Browsing ohne angewandte Stylesheets. Die meisten Techniken geben hier standardmäßig normalen Webtext aus, was nicht gerade ein Fehler ist, aber da Bilder immer noch eingeschaltet sein können, betrachte ich es auch nicht als bestanden.
• CSS AUS / Bilder AUS
  Repräsentiert Browsing, bei dem sowohl Bilder ausgeschaltet als auch keine Stylesheets angewendet werden. Die Standardausgabe von Text hier gilt als bestanden.
• Zusätzlicher unnötiger Markup
  Es ist nicht ideal, Markup nur zum Zweck der Bilderersetzung hinzufügen zu müssen. Dies erreicht keine echte Trennung von Inhalt und Design.

Technik #1

<h1 id="technique-one">
  <span>CSS-Tricks</span>
</h1>

h1#technique-one {
  width: 250px;
  height: 25px;
  background-image: url(logo.gif);
}
h1#technique-one span {
  display: none;
}

Weitere Informationen: Diese Technik wird als FIR oder „Fahrner Image Replacement“ bezeichnet. Viel wurde darüber geschrieben, einschließlich eines A List Apart Artikels über seine Probleme mit der Barrierefreiheit sowie eines Artikels von David Shea, der ihn verteidigt. Die Prämisse hier ist, einen Span zu verwenden, um den Text innerhalb des Headers zu umschließen und diesen Span zu verwenden, um den Text zu verbergen. Es funktioniert, aber die Verwendung von display: none verbirgt den Text vor Screenreadern (und vermutlich Suchmaschinen-Bots, was nicht gut ist).

Technik #2

<h1 class="technique-two">
  CSS-Tricks
</h1>

h1.technique-two {
  width: 2350px; height: 75px;
  background: url("images/header-image.jpg") top right;
  margin: 0 0 0 -2000px;
}

Weitere Informationen: Radu Darvas wird diese Technik zugeschrieben. Im Grunde erstellt diese Technik eine riesige Box, die weit nach links aus dem Bildschirm ragt. Der Text kann aufgrund seiner Links-Ausrichtung nicht gesehen werden. Das Bild wird oben links in dieser Box platziert. Es funktioniert, hat aber das übliche Problem, dass es bei CSS AN / Bilder AUS fehlschlägt. Ich kann mir vorstellen, dass diese riesige Box auch in komplexeren Layouts ein Problem darstellt und außerdem generell weniger effizient ist als einige andere Techniken.

Technik #3

<h1 class="technique-three">
  CSS-Tricks
</h1>

h1.technique-three {
  width: 350px; 
  height: 75px;
  background: url("images/header-image.jpg");
  text-indent: -9999px;
}

Weitere Informationen: Diese Technik wird Mike Rundle zugeschrieben und als Phark-Methode bezeichnet. Dies ist wahrscheinlich die am weitesten verbreitete Technik heute. Zum Zeitpunkt der Erstellung dieses Artikels ist es sicherlich diejenige, die ich am häufigsten verwende. Es gibt sogar ein T-Shirt, das auf dieser basiert (2. von unten). Die Prämisse ist köstlich einfach: Ersetzen Sie einen Block durch ein Hintergrundbild, schieben Sie den Text mit einem Einzug von der Seite. Es ist effektiv und hält Screenreader zufrieden. Es besteht nur den schwer fassbaren Test CSS AN / Bilder AUS nicht. Eine Variante dieser Technik ist die Verwendung von negativem Buchstabenspacing stattdessen, was angeblich Probleme mit dem Auslösen riesiger unerwünschter Scrollbalken in einigen Browsern löst.

Technik #4

<h1 class="technique-four">
  <a href="#">
    <img src="images/header-image.jpg" alt="CSS-Tricks" />
  </a>
</h1>

h1.technique-four {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}

Weitere Informationen: Ich bin mir nicht sicher, woher diese Technik stammt, aber sie ist im Grunde eine Erweiterung der Phark-Technik. Anstatt den Text aus dem Bildschirm zu schieben, wird ein Bild aus dem Bildschirm geschoben. Dies hat den deutlichen Vorteil, dass immer noch ein Bild angezeigt wird, wenn CSS AUS und Bilder AN sind, und es gibt auch ALT-Text für die 508-Konformität. Diese Technik schlägt immer noch mit CSS AN / Bilder AUS fehl. Ich gebe Volkan Görgülü die Anerkennung dafür, dass er darauf hingewiesen hat, dass dies die Technik ist, die Smashing Magazine in seinem Header verwendet. Ein Bedenken bei dieser Technik ist, ob sie für SEO effektiv ist, insbesondere ob ALT-Text genauso gut ist wie normaler Webtext. Eine Erweiterung dieser Technik wäre, auch normalen Webtext innerhalb des Ankerlinks einzufügen. Sowohl der Text als auch das Bild würden mit der Text-Einrückung von der Seite geschoben werden, und dies würde die SEO-Bedenken lindern, aber dann hätten Sie „doppelten Text“ sowohl bei ausgeschalteten Bildern als auch bei ausgeschaltetem CSS.

Technik #5

<h1 class="technique-five">
  <img src="images/blank.gif" alt="CSS-Tricks" />
  <span>CSS-Tricks</span>
</h1>

h1.technique-five {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	}
	h1.technique-five span {
		display: none;
	}

Weitere Informationen: Radu Darvas wird auch diese Technik zugeschrieben. Durch das Einfügen eines ein Pixel großen, transparenten GIF-Bildes in den Markup können Sie ALT-Text mit ausgeschalteten Bildern wiederherstellen. Dies ermöglicht die Anzeige von Text mit CSS AN / Bilder AUS (!). Sehr effektiv, aber das Hinzufügen des Shim-GIFs ist ein erheblicher Schlag für die Semantik. Außerdem erhalten Sie bei ausgeschaltetem CSS und Bildern „doppelten Text“, d. h. sowohl den Alt-Text als auch den regulären Header-Text.

Technik #6

<h1 class="technique-six">
  CSS-Tricks
</h1>

h1.technique-six {
	width: 350px;
	padding: 75px 0 0 0;
	height: 0;
	background: url("images/header-image.jpg") no-repeat;
	overflow: hidden;
}

Weitere Informationen: Diese Technik wurde gleichzeitig von Seamus Leahy und Stuart Langridge entdeckt. Diese Technik erstellt eine Box, die mit einer Höhe gerendert wird, die ausschließlich durch den oberen Abstand erzeugt wird. Durch das Setzen von overflow auf hidden wird der Text automatisch verborgen, aber die Box hat die richtige Größe für ein Hintergrundbild. Dies ist zugänglichkeitsfreundlich und ziemlich effektiv, schlägt aber beim Test CSS AUS / Bilder AN fehl und erfordert für ältere Versionen von IE einen Box-Modell-Hack.

Technik #7

<h1 class="technique-seven">
	<span>CSS-Tricks</span>
</h1>

h1.technique-seven {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg") no-repeat;
	}
	h1.technique-seven span {
		display: block;
		width: 0;
		height: 0;
		overflow: hidden;
	}

Weitere Informationen: Leon Dwyer zugeschrieben. Diese Technik kann den Text verbergen, indem sie ihn in eine Box mit 0px Breite und 0px Höhe mit verborgenem Überlauf legt. Da sie das display-Attribut nicht zum Verbergen des Textes verwendet, ist sie für Screenreader sicher.

Technik #8

<h1 class="technique-eight">
  <span></span>CSS-Tricks
</h1>

h1.technique-eight {
	width: 350px; height: 75px;
	position: relative;
	}
	h1.technique-eight span {
		background: url("images/header-image.jpg");
		position: absolute;
		width: 100%;
		height: 100%;
	}

Weitere Informationen: Diese Technik wird Levin Alexander zugeschrieben. Bei dieser Technik wird anstatt den Text von der Seite zu schieben oder anderweitig zu verbergen, das Hintergrundbild einfach auf dem Text platziert. Dies ist die einzige andere Technik neben #5, die den Test CSS AN / Bilder AUS besteht. Ein Problem mit dieser Technik ist, dass, wenn Ihr Hintergrundbild Transparenz verwendet, der Text durchscheint. Außerdem würde ich, obwohl nicht in der ursprünglichen Beschreibung dieser Technik enthalten, empfehlen, den Überlauf zu verbergen, damit der Text nicht sichtbar wird, falls die Textgröße so stark erhöht wird, dass sie aus der Box ausbricht.

Technik #9

<h1 class="technique-nine">
  CSS-Tricks
</h1>

h1.technique-nine {
  width: 350px; height: 75px;
  background: url("images/header-image.jpg") no-repeat;
  font-size: 1px;
  color: white;
}

Weitere Informationen: Diese Technik wird Russ Weakley zugeschrieben. Bei dieser Technik müssen Sie den Text nicht einmal verbergen, indem Sie ihn einfach auf eine winzige Größe von 1 Pixel setzen und seine Farbe an die Hintergrundfarbe des Bildes anpassen. Während diese Technik aus Sicht der Barrierefreiheit sehr sinnvoll ist, hat sie ihre eigenen Probleme. Wie die meisten anderen funktioniert sie nicht mit CSS AN / Bilder AUS. Selbst bei der 1-Pixel-Größe ist der Text noch sichtbar, daher funktioniert dies nur auf einfarbigen Hintergründen, wo er sich perfekt einfügen kann. Ich vermute auch, dass es hierfür einige SEO-Strafen geben könnte, sowohl für die sehr kleine Schriftgröße als auch für die Übereinstimmung von Hintergrundfarbe und Textfarbe.

Noch mehr Informationen...

• Wie üblich gibt es auch eine JavaScript-Lösung.
• Es gibt eine Technik, um dies mit Inline-Blocks anstelle von Blocks zu tun.
• Wenn der einzige Grund, warum Sie dies verwenden, darin besteht, die Schriftart zu ändern, wäre es besser, @font-face zu verwenden.
• Google Webmaster Tools hat einen Artikel dazu, der keine Bilderersetzung speziell behandelt, aber zwischen den Zeilen gelesen scheint eine angemessene Nutzung dieser Technik keine negativen Folgen zu haben.