Websiteentwicklung: CSS: Praxis

Zurück zu Seitenmedien | Hoch zu CSS | Vor zu Werkzeuge

In diesem Kapitel werden einige praktische Anwendungen vorgestellt, sowie einige praxisbezogene Lösungswege aufgezeigt.

Da Darstellungsprogramme zum Teil erheblich unterschiedliche eigene Stilvorlagen nutzen, werden die Stilvorlagen der Autoren und die der Nutzer dadurch beeinflusst (siehe Kaskadierung). Um mit einer einheitlichen Basis zu beginnen, kann es sich anbieten, in der eigenen Stilvorlage all jene Eigenschaften gezielt zu setzen, deren Verhalten man selbst und einheitlich bestimmen möchte. Dies Vorgehen oder diese Stilvorlage wird englisch auch Reset-Stylesheet genannt ^[1]. Dies erspart dem Autor allzu große Unterschiede in der Darstellung über verschiedene Darstellungsprogramme hinweg. Um nicht immer wieder alle Eigenschaften bei jeder Verwendung zurücksetzen zu müssen, hat es sich bewährt, ein zentrales Stilvorlage für diesen Zweck als erstes einzubinden – zum Beispiel mit Namen 'reset.css' – beziehungsweise diese Angaben den eigenen Angaben in einer Stilvorlagen-Datei voran zu setzen. Es ist allerdings dringend geboten, solche Stilvorlagen nicht blind von anderen Autoren zu verwenden, sondern sie vor der Verwendung genau zu analysieren, um zu verhindern, dass nicht für das Verständnis, die Lesbarkeit und die Ergonomie wichtige Eigenschaften überschrieben werden, welche man selbst gar nicht beeinflussen will.

Ein sehr weit verbreitetes "Reset CSS" ist jenes von Eric Meyer, welches auch viele HTML5-Elemente beinhaltet ^[2]. Darauf aufbauend ist eines von html5doctor.com ^[3]. Eric Meyer setzt dabei mit gutem Willen voraus, dass sich die Autoren auch wirklich alles selbst kümmern wollen, was da zurückgesetzt wird, was nicht immer der Fall ist - es wäre also sicher nicht im Sinne von Eric Meyer, die Stilvorlage blind zu verwenden und damit eventuell die Nutzbarkeit von Inhalten für den Nutzer zu verschlechtern, weil man als Autor nicht selbst wieder alles auf einen sinnvollen Wert gesetzt hat, was für die Nutzbarkeit wichtig ist.

Angenommen, es soll einem Element ein anderes Hintergrundbild zuordnet werden, sobald ein Zeigergerät darüberfährt. Das könnte man beispielsweise so lösen:

XHTML:

<a class="bsp" href="#beispiel">Beispiel</a>

CSS:

.bsp, .bsp:link, .bsp:visited {
  background-color: black;
  background-image: url('bsp1.svg');
  color:            white
}
.bsp:hover {
  background-color: black;
  background-image: url('bsp2.svg');
  color:            yellow
}

Soweit ist dies noch ganz einfach: Zwei separate Bilder definieren, eines für die statische Anzeige und eines für den dynamischen Effekt.

Nun können aber gegebenenfalss zwei Probleme festgestellt werden:

1. Das Bild für :hover wird vermutlich erst geladen, wenn man mit dem Zeigergerät erstmals darüber fährt. Folglich wird es eventuell verzögert angezeigt werden.
2. Das Bild für :hover wird danach je nach Voreinstellung eventuell im Darstellungsprogramm zwischengespeichert und wird stets wiederverwendet, selbst wenn Sie ein neues Bild auf dem Rechner mit dem ausliefernden Dienstprogramm bereitgestellt haben. Insbesondere bei Microsoft Internet Explorer hilft selbst ein Aufforderung zum erneuten Laden vom Dienstprogramm nicht. Der Microsoft Internet Explorer wird erst das neue Bild verwenden, wenn sich das alte nicht mehr in seinem Zwischenspeicher befindet.

Diese beiden Probleme können vermieden werden, wenn für die statische und die dynamische Anzeige das gleiche Bild, aber mit unterschiedlichem Ausschnitt verwendet wird:

.bsp, .bsp:link, .bsp:visited {
  background-color: black;
  background-image:     url(bspSprite.svg);
  background-position:  0% 0%
}
.bsp:hover {
/* die Graphikdatei braucht nicht noch einmal angegeben zu werden, 
   da dies für .bsp ja oben schon geschehen ist */
  background-position:  0% 50%;
}

Diese Methode wird auch englisch CSS-Sprites genannt ^[4] und zeigt im Falle der Umsetzung von :hover das Bild ab der unteren Hälfte an. Es gilt jedoch zu beachten, dass die Höhe des Elements nicht 50% der Bildhöhe übersteigt. Enthält das Element Text, so ist die Größe des Textes, die vom Nutzer als bevorzugt angegeben ist, allerdings nicht bekannt. Daher kann es sich als kontraproduktiv erweisen, eine Pixelgraphik zu verwenden oder allgemein eine, bei der die Größe in Pixeln und nicht in Einheiten wie em oder ex oder Prozent festliegt.

Viele Projekte nutzen tatsächlich für alle Kleingraphiken (Logo, Symbole) lediglich eine Grafikdatei und nutzen dann entsprechend nur den jeweiligen Ausschnitt (siehe hierzu auch die CSS-Eigenschaften clip oder overflow). Dadurch braucht nur eine HTTP-Anfrage für alle Kleingraphiken vom Darstellungsprogramm an das Dienstprogramm gesendet werden, was die Ladezeit für die Darstellung eines Dokumentes enorm beschleunigt.

Gegeben sei folgendes XHTML-Fragment:

<div id="wechsel">
<div id="boxA">
  <h3>Test</h3>
  <p>Inhalt Box A</p>
</div>
<div id="boxB">
  <h3>Test</h3>
  <p>Inhalt Box B</p>
</div>
</div>

Ziel ist es nun, nur 'BoxA' anzuzeigen, wenn ein Zeigergerät nicht über dem Inhalt ist und nur 'BoxB', wenn ein Zeigergerät über dem Inhalt ist - vorausgesetzt wird dabei, dass es inhaltlich gleichrangig ist, ob beide Möglichkeiten angezeigt werden (wenn die Interpretation von CSS deaktiviert ist oder nicht verfügbar) oder nur eine Möglichkeit (gegebenenfalls nur eine ohne Wechselmöglichkeit, falls :hover nicht umgesetzt werden kann). Dazu kann man folgende Stilvorlage formulieren:

#boxB {
  display:  none;
}
#wechsel:hover #boxA {
  display:  none;
}
#wechsel:hover #boxB {
  display:  block;
}

Dem Leser zur Übung überlassen bleibt nun, mit einem Pseudoelement wie :before oder :after und der Eigenschaft content einen ähnlichen Effekt des Austauschens bei folgender Konstruktion zu erreichen:

<div id="wechsel">
  <h3>Test</h3>
  <p><span class="weg">Inhalt Box A</span></p>
</div>

Nur mit CSS soll nun 'Inhalt Box A' durch 'Inhalt Box B' ersetzt werden, falls ein Zeigergerät über '#wechsel' ist - viel Spaß! Mit der Methode wird dann vermieden, dass bei deaktivierter oder nicht verfügbarer Interpretation von CSS beide Möglichkeiten wie beim ersten Beispiel angezeigt werden.

In englisch wird Cropping^[5] das Beschneiden von Bildrändern genannt, um das Bildformat in ein anderes Format zu übernehmen, ohne dass dabei schwarze Ränder entstehen oder das Bild verzerrt werden muss.

Ausschnitte mit CSS sind nur ein Notbehelf, denn Bilder sollten generell schon in der richtigen Größe und auch im richtigen Seitenverhältnis vom Dienstprogramm ausgeliefert werden. Oder Bilder werden manuell vor dem Einbinden zugeschnitten (zum Beispiel mit Gimp^[6]). Die Methode eignet sich auch nicht für große Zuschnitte, sondern nur, wenn kleine Ränder geschnitten werden sollen. Da immer das gesamte Bild vom Dienstprogramm übertragen werden muß, erhöht sich die zu ladende Datenmenge und die Ladezeit nutzlos.

CSS-seitige Bildausschnitte haben aber dann Vorteile

• wenn ein Bild mehrfach in einer Seite, aber in unterschiedlichen Seitenverhältnissen, eingebunden wird. Das Bild muß so nur einmal geladen werden, kann aber mehrmals eingebunden werden.
• wenn eine manuelles Zuschneiden zu zeitaufwendig wäre (zum Beispiel für kurzlebige, wenig gelesene Seiten) oder die Bildquelle nicht änderbar ist oder kein manueller Ausschnitt ermöglicht.

Hierzu gibt es mehrere Methoden:

Mit der Eigenschaft clip wird nur ein rechteckiger Ausschnitt eines Bildes angezeigt und der Rest abgeschnitten. Es gibt aber Widersprüche zwischen CSS 2.0 und CSS 2.1 hinsichtlich der Syntax, wie der Ausschnitt anzugeben ist, die Methode ist also nicht zuverlässig.

Unzuverlässige Methode nach CSS 2.0:

img {
clip:rect(10px 10px 10px 10px)
}

Es werden dann jeweils 10 Pixel von jeder Seite abgeschnitten, nur der mittlere Bereich wird dargestellt.

Gehen wir davon aus, das Bild habe eine Größe von 50 Pixel mal 50 Pixel, so kann man stattdessen gemäß CSS 2.1 angeben:

img {
clip:rect(10px, 40px, 40px, 10px)
}

Die Verwendung der Separation der Werte mittels Komma ist für CSS 2.1 zwar empfohlen, aber auch eine Notation ohne Komma ist erlaubt - unschwer ist zu erkennen, dass es da zu Interpretationsproblemen kommen kann, je nachdem, welcher CSS-Empfehlung ein Programm folgt oder welche der Autor voraussetzt.

Eine einfachere und zuverlässige Lösung ist, das Bild mit einem Element div mit der Größe des gewünschten Ausschnitts und der Eigenschaft overflow:hidden zu umgeben. Nun kann das Bild innerhalb dieses "Bilderrahmens" positioniert werden.^[7]

<div style="width:200px;height:200px;overflow:hidden" class="bilderrahmen">
   <img src="SibirischerBlaustern.jpg" 
        alt="Sibirischer Blaustern" 
        style="margin: -10px 0 0 -20px" />
   <!-- Bild wird oben um 10 und links um 20 px "abgeschnitten" -->
</div>

Praktikabel ist es nun, die Eigenschaften des Bilderrahmens in eine CSS-Datei auszulagern, aber den Bildausschnitt für jedes Bild mit style anpassen.

.bilderrahmen {
 width:100px;
 height:100px;
 overflow:hidden
}

Eine weitere einfache Möglichkeit ergibt sich, wenn das Bild einfach in einer SVG-Datei referenziert wird, dort kann es präzise positioniert werden, der gewünschte Ausschnitt und die Größe kann festgelegt werden und anschließend wird das SVG-Dokument referenziert^[8]. Da der Ausschnitt bei SVG auch per Fragmentidentifizierer angegeben werden kann, erübrigt sich sogar die komplette Verwendung von CSS.

Mittlerweile gibt es auch allgemeine Fragmentidentifizierer für Medien:

<img src="SibirischerBlaustern.jpg#xywh=percent:10,10,80,80" 
     alt="Sibirischer Blaustern" width="200" height="200" />

Siehe die Empfehlung zu Medienfragmenten ^[9]. Mit dieser Empfehlung von 2012 sollte es also in Zukunft weitgehend überflüssig werden, Fragmente von Medien mittels CSS zu beschneiden. Diese Anwendung kann mittlerweile deutlich einfacher gelöst werden als in der Vergangenheit.

1. ↑ Reset-Stylesheet
2. ↑ http://meyerweb.com/eric/tools/css/reset/
3. ↑ HTML5 Reset Stylesheet
4. ↑ CSS-Sprites
5. ↑ Cropping
6. ↑ GIMP
7. ↑ professorweb.de - Bilder mit CSS beschneiden
8. ↑ SVG
9. ↑ Media Fragments URI 1.0 (basic)

Zurück zu Seitenmedien | Hoch zu CSS | Vor zu Werkzeuge