Seite 2: Standards

Inhaltsverzeichnis

Vorsprung durch Webstandards

Schon die ersten Platform Previews waren in Sachen Webstandards im Vergleich zum IE8 ein Meilenstein und gaben Grund zur Hoffnung, dass der Browser endlich zur enteilten Konkurrenz würde aufschließen können. Die Beta-Version bringt ihn fast auf Augenhöhe.

Der Artikel konzentriert sich auf die Neuerungen, die der Beitrag "Bälle in Bewegung" nicht schon erwähnt hat. Wirft man einen Blick auf die aktuellen Designtrends im Web, kommt der IE mit seiner umfassenden Unterstützung der Eigenschaft border-radius wohl einige Monate zu spät – runde Ecken sind offenbar auf dem Rückzug. Aktuell ist allerdings der Umgang mit Transparenz, und da hat der Browser enorm aufgerüstet. Er unterstützt die Eigenschaft opacity für transparente Elemente sowie die Farbmodelle RGBA und HSLA zur Angabe von transparenten Farben.

Anders als der RGB-Farbraum, der eine Farbe aus ihren Werten für Rot, Grün und Blau mischt, definiert der HSL-Farbraum eine Farbe über ihren Farbton (engl. hue), der Farbsättigung (saturation) und der relativen Helligkeit (lightness).

• Die Angabe des Farbtons entspricht dem Farbwinkel auf dem Farbkreis, der bei Rot beginnt und endet (0 bzw. 360). Grün liegt bei 120, Blau bei 240 Grad. Die Zahlen zwischen den Punkten bezeichnen Mischfarben.
• Die Sättigung bestimmt die Intensität der Farbe und geht von 0 (keine Intensität, hoher Grauanteil) bis 100 (gesättigte reine Farbe ohne Grauanteil).
• Die relative Helligkeit reicht ebenfalls von 0 (volle Helligkeit, Weiß) bis 100 (keine Helligkeit, Schwarz).

Ein sattes, leuchtendes Rot entspricht der Angabe hsl(0, 100%, 50%), ein helles Grün ergibt hsl(120, 90%, 25%), ein Pastellgrün hsl(120, 50%, 50%). Unter Designern gilt der HSL-Farbraum – anders als RGB – als gut nachvollziehbar und intuitiv einsetzbar.

RGB- und HSL-Farbangaben bestehen aus drei Teilen. RGBA und HSLA erweitern die Modelle durch einen Alphawert, der die Transparenz der angegebenen Farbe bestimmt und zwischen 0.0 (völlige Transparenz) und 1.0 (völlige Deckkraft) liegt.

Während die Eigenschaft opacity die Transparenz des gesamten Elements und seines Inhalts festlegt, definiert eine Farbangabe über RGBA oder HSLA nur die Transparenz der definierten Farbe. Dadurch können Webdesigner teiltransparente Schriften, Farbflächen oder Rahmen erzeugen. Ein Element E mit der Regel E { background-color: hsla(0, 100%, 50%, 0.5) } hat beispielsweise einen roten Hintergrund mit 50 Prozent Deckkraft – die Inhalte des Elements sind nicht transparent.

Hintergründige Neuerungen

Das "CSS3 Backgrounds and Borders Module" erweitert die background-Eigenschaften um die Möglichkeit, einem Element mehrere Hintergrundbilder zuzuweisen, indem Webautoren mehrere Werte durch Kommata getrennt notieren.

Der "Multiple background test" der Website CSS3.Info weist einem div-Element über folgende Regel drei Hintergrundbilder zu. Das erste zeigt den Rahmen oben und den Banner, das zweite den Rahmen unten und das dritte schließlich sorgt für die Darstellung des Rahmens links und rechts. Bislang mussten Webentwickler mehrere div-Elemente ineinander verschachteln und jedem einzelnen ein Hintergrundbild zuweisen, um einen solchen Effekt zu realisieren.

div.example { 
  height: 200px;
  width: 720px;
  padding: 150px 20px 20px 20px;
  background: url(body-top.gif) top left no-repeat,
    url(banner_fresco.jpg) 11px 11px no-repeat,
    url(body-bottom.gif) bottom left no-repeat,
    url(body-middle.gif) left repeat-y;
}

Abbildung 4 zeigt den Unterschied zwischen IE8 und der neuen Beta.

Neu ist ebenfalls die Unterstützung der Eigenschaften background-clip, background-origin und background-size:

• Mit background-clip können Webentwickler angeben, wohin der Hintergrund eines Elements reicht: zum (äußeren) Rand der Rahmen-, der Padding- oder der Content-Kante. Die entsprechenden Werte lauten border-box (Standardwert), padding-box und content-box.
• background-origin definiert den Bezugspunkt für die Eigenschaft background-position, über die Webentwickler Hintergrundbilder positionieren. Standardmäßig erfolgt die Positionierung relativ zur (äußeren) Padding-Kante, das heißt, das Hintergrundbild liegt innerhalb eines Rahmens, aber nun können Entwickler auch die äußere Rahmen- beziehungsweise die Content-Kante als Bezugspunkt definieren. Die Werte sind dieselben wie bei der Eigenschaft background-clip.
• Die Eigenschaft background-size ermöglicht es, die Breite und Höhe von Hintergrundbildern zu bestimmen, und bietet so die Lösung einer Aufgabe, mit der sich Webentwickler seit Jahren plagen: ein Hintergrundbild stets auf die vollen Ausmaße eines Elements E zu strecken. Dazu reicht folgende Regel:

E {
  background-image: url(hintergrundbild.png);
  background-size: 100% 100%;
}

Die folgende zeigt ein weiteres Beispiel und darüber hinaus einige CSS3-Neuerungen, die der IE9 allesamt unterstützt. Für die Eigenschaft background-repeat erlaubt CSS3 nicht nur einen, sondern auch zwei Werte; in diesem Fall bezieht sich der erste auf die horizontale Richtung, der zweite auf die vertikale. Neu ist zudem der Wert round, der für eine derartige Skalierung des Hintergrundbilds sorgt, dass es am Rand des Elements nicht abgeschnitten wird. background-size soll das Hintergrundbild in dem Beispiel auf 20 Prozent der zur Verfügung stehenden Breite und 30 Prozent der Höhe skalieren. Hinsichtlich der Breite ist das problemlos umsetzbar, da das Hintergrundbild horizontal nicht wiederholt werden soll (no-repeat). Vertikal würde der Browser es jedoch dreimal vollständig und einmal nur teilweise anzeigen. Der Wert skaliert das Bild auf 25 Prozent herunter, sodass es vier Mal vollständig angezeigt wird.

p {
 background-image: url(hintergrundbild.png);
 background-repeat: no-repeat round;
 background-size: 20% 30%;
}