CSS/Tutorials/Hintergrund/Image Replacement

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In den ersten Kapiteln unseres Kurses wurden die CSS-Eigenschaften background-color und background-image vorgestellt. In diesem Kapitel sollen nun einige typische Anwendungsfälle aufgezeigt werden.

Dabei soll noch einmal auf den Unterschied zwischen inhaltsbezogenen und Dekorationsgrafiken eingegangen werden. Mit background eingebundene Grafiken dürfen nur dekorativ, d.h. als Verzierung verwendet werden.

Logos einer Firma, Thumbnail-Ansichten eines Bilds sind Teil des Inhalts und sollten mit einem img-Element ausgezeichnet werden. Wenn Webseiten vorgelesen werden, wird dann der Alternativtext der Grafik vorgelesen. Bei Mustern, Verläufen und ähnlichen Dekorationen wäre es nur störend, wenn dies jeweils einzeln vorgelesen würde.

Image Replacement

Unter Image Replacement versteht man das Ersetzen des Inhalts von HTML-Elementen durch Bilder.

Früher boten Bilder mehr Freiheiten, z. B. bei der Typografie, sodass Überschriften und Menü-Elemente nicht mit den dafür vorgesehenen HTML-Elementen, sondern mit eigens in Bildbearbeitungsprogrammen erstellten Grafiken dargestellt wurden. Problem war neben dem hohen Wartungsaufwand (eine Farbänderung musste in Photoshop durchgeführt werden; die geänderte Grafik musste auf den Server hochgeladen werden, etc) auch die mangelnde Zugänglichkeit durch Screenreader, aber auch im web.archive.org, wenn Überschriften nur durch ein nicht mehr vorhandenes Bild dargestellt werden.

Mit CSS kann man diese Quadratur des Kreises erreichen:

  • das Dokument wird auf einem nichtvisuellen Ausgabemedium (Screenreader, Braille Terminal ) semantisch korrekt ausgegeben
  • eine Suchmaschine soll den Inhalt der Webseite erkennen
  • für ein visuelles Ausgabemedium (Bildschirm, Drucker) soll stattdessen die Grafik dargestellt werden

Ausblenden des Texts

Die Herausforderung ist nicht etwa das Einsetzen des Hintergrundbilds, sondern das optische „Ausblenden“ des Texts, der aber für Suchmaschinen und Screenreader noch auffindbar sein muss:

Ersetzung von Text durch eine Grafik 
.ohne-text { 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent; 
  background: url("image-replacement.png"); 
}
In diesem Beispiel werden alle Festlegungen für Text, Schatten und Rahmen auf 0, bzw. transparent gesetzt, sodass der Text auf dem Bildschirm unsichtbar wird und durch das Hintergrundbild ersetzt werden kann.

Ausschneiden von UI-Elementen wie Radio-Buttons

Auch bei Radio-Buttons und Checkboxen ist es wichtig, dass Elemente auf dem Monitor zwar visuell versteckt werden - das Standardverhalten, eben die gewünschte Funktionalität eben auch für Screenreader erhalten bleibt:

Ersetzung von Text durch eine Grafik 
input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
In diesem Beispiel wird ein Eingabefeld auf eine Größe von 1x1 Pixel gesetzt und mit position: absoluteaus dem Elementfluss genommen. Damit der so versteckte Radio-Button nicht als schwarzer Punkt am Bildrand erscheint, wird er mit clip ausgeschnitten.
Hauptartikel: Radio-Button#Radio-Buttons_verstecken

Alternativen

Heute ist Image Replacement weitgehend aus der Mode gekommen, da CSS3 viele Möglichkeiten bietet, die früher nur mit Photoshop erreicht wurden:

Empfehlung: Nutzen Sie die Möglichkeiten, die Ihnen CSS bietet:
für Hintergründe

Alternativ können Sie SVG einbinden:

Anwendungsbeispiel

Das Tutorial SVG/Tutorials/Text bietet viele Anregungen für grafische Hintergrundeffekte. Gerade für Anfänger ist das Hantieren mit den ihnen unbekannten Elementen eine Herausforderung.

Anwenderfreundlicher ist das Verwenden eigener SVG-Grafiken, die dann mittels Image Replacement anstelle des reinen Texts dargestellt werden.

Image Replacement ansehen …
.ohne-text { 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent; 
  background: url(//wiki.selfhtml.org/images/7/77/Selfhtml-gepunktet.svg);
  width: 800px;
  height:110px;
}

Die Überschrift besteht aus einem span-Element, dessen Textinhalt durch eine Hintergundgrafik, hier ein SVG, ersetzt wird.

Beachten Sie: Da die Schriftgröße auf 0 gesetzt wird, sind hier Werte in em nicht möglich. Verwenden Sie px oder rem.

Weblinks

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Hintergrund/Image_Replacement&oldid=82820“