Peter Kröner, Webtechnologie-Erklärbär

Dieser Artikel aus der Serie über schönes neues CSS befasst sich im Gegensatz zu den Beiträgen über Textschatten mit CSS, alternativen Farbangaben und font-size-adjust mit einem CSS3-Selektor, das gar nicht mal so neu ist – selbst der Internet Explorer 7 versteht ihn schon! Er ist trotzdem recht unbekannt, was bei diesem schönen Namen ein Jammer ist …

General Sibling Combinator? Bitte was?

Nicht vom Namen erschrecken lassen. Wir alle kennen doch aus CSS 2.1 den Adjacent sibling combinator, richtig? Der hat auch einen komplizierten Namen, ist aber tatsächlich nur der bekannte CSS-Selektor +. Möchte man beispielsweise den Absatz, der direkt auf ein <h1>-Element folgt mit fetter Schrift versehen, hilft eben dieser +-Selektor:

h1 + p {
    font-weight:bold;
}

Der General Sibling Combinator ist ganz ähnlich, nur erlaubt er uns, CSS-Regeln auf jedes einem bestimmenten HTML-Element folgende Objekt anzuwenden … der +-Selektor gilt bekanntermaßen nur für das erste folgende Objekt.

Wie benutzt man den General Sibling Combinator?

Der General Sibling Combinator wird durch eine Tilde dargestellt (~) und der Einsatz erfolgt wie beim +-Selektor:

h1 ~ p {
    font-weight:bold;
}

Schon sind alle <p>, die auf ein <h1> folgen, fett – vorausgesetzt sie teilen sich ein gemeinsames Elternelement. Am besten betrachtet man das Beispiel und den Vergleich mit dem Adjacent sibling combinator.

Welche Browser verstehen den General Sibling Combinator?

Bis auf den IE6 unterstützen alle relevanten Browser den ~-Selektor, egal ob Opera, Gecko-betreiben oder aus dem Webkit-Bestiarium stammend. Bei Firefox ist sogar die alte Version 2 in der Lage, den General Sibling Combinator zu verwenden und sogar der IE7 kann aus unerfindlichen Gründen etwas mit diesem CSS3-Selektor anfangen. Somit ist dieses schöne Stück CSS durchaus für den Fronteinsatz geeignet, wodurch sich einiges an Klassen und IDs einsparen lassen sollte.

Nach Schatteneffekten und den neuen Möglichkeiten der Farbdefinition widmen wir uns in diesem Teil der Serie rund um schönes neues CSS einem typografischen Thema. Mit font-size-adjust vereinheitlichen wir Buchstabengrößen über verschiedenen Schriften hinweg. Das ist auch tatsächlich sinnvoll, denn Schriftgröße ist nicht gleich Schriftgröße.

Vorwort: Schriftgröße ist nicht gleich Schriftgröße

Wenn wir in einen Stylesheet font-size:16px; schreiben, sagt das noch nicht viel darüber aus, wie das Endprodukt aussieht, denn was 16 Pixel sind, hängt von der verwendeten Schrift ab. Hier ein Beispiel mit vier verschiedenen Schriftarten auf der gleichen Schriftgröße (80 Pixel):

Blau eingezeichnet sind die H-Linie, die k-Linie sowie die x-Höhe (die Höhe eines Kleinbuchstabens) der Verdana im Wort Alpha. Man sieht, dass all dass diese Linien bei den anderen Schriften völlig anders liegen, obwohl überall die gleichen 80 Pixel Schriftgröße angegeben sind. Die Verdana und besonders ihre x-Höhe fällt einfach sehr groß aus.

Das wird in dem Moment zum Problem, in dem wir in unserem Stylesheet eine font-family definieren, in der die verschiedenen Schriftarten unterschiedliche x-Höhen haben. Dann nämlich landen wir, sobald die erste Wahl im Font Stack fehlt, sofort bei einem komplett anderem Schriftbild – wie im Beispiel zu sehen. Und font-size-adjust ist unsere Rettung.

Was macht font-size-adjust?

Mit font-size-adjust kann man, vereinfacht ausgedrückt, eine bestimmte x-Höhe erzwingen, ganz egal welche Schrift aus font-family eingesetzt wird. Und das geht so: Das Verhältnis zwischen der Höhe der Großbuchstaben und der x-Höhe einer Schrift nennt man Aspektwert. Mittels font-size-adjust informieren wir den Browser über den Aspektwert der ersten Schrift im Font Stack. Fehlt diese Schrift, nimmt der Browser die nächstbeste aus font-family, skaliert diese dann aber so, dass ihre Kleinbuchstaben genau so hoch werden, wie es die Kleinbuchstaben der ersten Schrift wären.

Klingt kompliziert, deswegen einfach ein Bild um den Effekt zu zeigen:

Wie beim ersten Bild haben auch hier alle vier Wörter unterschiedliche Schriftarten und 80 Pixel Schriftgröße, aber sie wurden durch font-size-adjust so skaliert, dass sie wesentlich einheitlicher aussehen. Hier einmal in direkten Vergleich:

Man erkennt besonders bei Beta und Delta, wie die Schriftgröße erhöht wurde, um sie auf das Niveau der Verdana von Alpha zu bringen.

Also, was macht font-size-adjust? Ganz einfach, font-size-adjust erlaubt es uns, einheitlichere Schriftbilder zu erreichen, selbst wenn unterschiedlichste Schriftarten zum Einsatz kommen. In Zeiten, in denen der Apple-Marktanteil klettert und die Schrifteinbettung in Websites sich entwickelt, wird man das ausgesprochen gut gebrauchen können.

Wie benutzt man font-size-adjust?

Der Aspektwert der ersten Schrift im Font Stack ist alles, was man bei font-size-adjust notieren muss (alternativ none oder inherit). Ein Beispiel:

p.beispiel {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	font-size-adjust:0.58;
}

Der Aspektwert der Verdana beträgt 0.58. Wenn der Text in Verdana nicht angezeigt werden kann und Arial ran muss, wird der Text so skaliert, dass die Kleinbuchstaben genau so groß sind, wie sie bei einer 12px-Verdana wären.

Aspektwerte für viele Webfonts lassen sich online finden.

Welche Browser können font-size-adjust?

Im Moment ist der Firefox 3 der einzige Browser, der etwas mit font-size-adjust anfangen kann. Macht aber nichts – Safari und Opera werden zeitnah nachrüsten, vielleicht auch der Internet Explorer eines Tages. Bis dahin macht dieser dünne Support aber nichts aus, denn schließlich ist font-size-adjust lediglich eine dezente optische Verbesserung und nichts, womit ein Design steht oder fällt.

Moderne Browser lassen uns nicht nur Schatteneffekte für Texte mit CSS zaubern, sondern sie führen auch zwei neue Möglichkeiten der Farbangabe an. Altbekannt sind die hexadezimale Schreibweise im Stile von #FF000, die RGB-Angabe rgb(255,0,0) oder auch der Farbname (z.B. red). Neuere Versionen von Firefox Opera und Safari können aber noch mehr als das: Sie wissen was RGBA, HSL und HSLA bedeuten.

Was bedeutet das A in RGBA und HSLA?

Das A steht für Alphakanal, also einen zusätzliche Angabe, der die Deckkraft einer Farbe regelt. Bei Farbangaben in RGBA und HSLA ist es also möglich, der Farbe direkt Teiltransparenz mitzugeben; mit der alten hexadezimalen Farbdefinition haben wir diese Möglichkeit nicht. Da könnte man höchstens versuchen, ganze HTML-Elemente mittels opacity transparent zu machen, aber das will man ja nicht immer. Das A in RGBA und HSLA ist also eine durchaus interessante Option.

Wie benutzt man RGBA?

RGBA-Angaben notiert man im Prinzip genau wie einen RGB-Wert, nur hängt man als letzten Wert eine Deckkraft zwischen 0 und 1 an. Beispiel:

.rot_transparent {
	color:rgba(255, 0, 0, 0.25);
}

Demo

Das funktioniert bei allen Farbangaben gleich, egal ob für Textfarbe, Hintergrund oder Border.

Und was bedeutet HSL?

HSL ist, vereinfacht gesagt, eine andere Möglichkeit, Farbwerte auszudrücken. Die drei Buchstaben stehen für Hue, Saturation, Luminance (Farbton, Sättigung, Helligkeit) und machen das manuelle Justieren von Farben um einiges leichter als andere Modelle. Will man beispielsweise in RGB eine Farbe abdunkeln, muss man zwei Werte bearbeiten, bei HSL braucht man nur an einem, am Helligkeitswert zu drehen.

Für genauere Informationen sei der Wikipedia-Artikel zum HSV-Farbraum empfohlen (HSL ist eine Variante von HSV).

Wie benutzt man HSL(A)?

HSLA benutzt man im Prinzip genau wie RGBA, wobei die H zwischen 0 und 360 zu liegen hat und die Werte S und L als Prozente anzugeben sind. Beispiel für HSL:

.hsl_gruen {
	color:hsl(120, 100%, 50%);
}

Für HSLA hängt man wie bei RGBA einen einen Alphawert zwischen 1 und 0 an:

.hsl_gruen_transparent {
	color:hsla(120, 100%, 50%, 0.25);
}

Demo

Auch hier gilt: sowohl Texte als auch Hintergründe und Rahmen lassen sich gleichermaßen mit HSL(A) einfärben.

Welche Browser können etwas mit RGBA und HSL(A) anfangen?

Firefox 3 und der aktuelle Safari verstehen RGBA, HSL und HSLA problemlos, in Opera funktioniert zumindest HSL. Im Internet Explorer, wen wundert es, funktioniert gar nichts von all dem.

Dieser etwas löchrige Support muss kein (großes) Problem sein, denn es gibt auch hier die Möglichkeit progressive enhancement anzuwenden. Für den IE kann man mit CSS-Hacks oder Conditional Comments ein Fallback definieren und auch für Opera gibt es passende Hacks. Wenn modernes HSLA-Grün nicht funktioniert, bekommen die Nutzer von Opera und Internet Explorer eben normales RGB-Grün vorgesetzt und alles läuft wie gehabt.

Dann wollen wir alle mal anfangen und an HSL zu gewöhnen …

Seit den Releases von Firefox 3 und Opera 9.5 stehen wir in einem neuen Browser-Zeitalter. Zwar wird der Internet Explorer dieses Zeitalter erst in 2-3 Jahren erreichen, aber trotzdem kann man mittlerweile eine ganze Menge CSS sinnvoll einsetzen, das noch vor ein paar Monaten kaum irgendwo funktionierte. Klar, im IE sieht man nichts davon, aber das muss uns nicht aufhalten, progressive enhancement ist das Zauberwort. Heißt: Die Website ist im Internet Explorer benutzbar, aber mit den neueren CSS-Features verleihen wir dem Ganzen in allen ordentlichen Browsern zusätzlichen Glanz. Ein Beispiel dafür ist text-shadow.

Was macht text-shadow?

Diese Frage lässt sich einfach beantworten: Mit text-shadow zaubert man sich mittels CSS einen Schatteneffekt unter Text. Sowohl Farbe als auch Versatz und Schattenradius lassen sich festlegen.

Wie benutzt man text-shadow?

Es gibt vier Paramter:

.schatten {
	text-shadow: #000000 4px -4px 2px;
}

Der erste Wert beschreibt die Farbe des Schattens, die nächsten beiden den Versatz auf X- und Y-Achse, während der letzte Wert die Härte des Schattens bestimmt; je höher der Wert, umso weicher der Schatten. Im Übrigen kann man auch mehrere Schatten definieren:

.schatten {
	text-shadow: #000000 4px -4px 2px, #FF0000 -1em 1em 0.5em, #CC0000 -2px -4px px;
}

Damit könnte man zum Beispiel einen Feuer-Effekt zaubern.

Welche Browser können text-shadow?

Opera seit Version 9.5 und Safari bereits seit Urzeiten – Firefox wird Ende dieses Jahres mit Version 3.1 nachziehen. Ob der Internet Explorer jemals text-shadow unterstützten wird, wissen allein die Götter. Es existieren für den IE mit DropShadow und Glow zwei proprietäre Funktionen, die einen ähnlichen Effekt wie text-shadow haben, die jedoch um einiges weniger gut ausehen, weniger flexibel sind und so keine ernsthafte Alternative darstellen.

Sofern man allerdings die Lesbarkeit seines Textes nicht vom Schatteneffekt abhängig macht, kann man text-shadow ohne Bedenken benutzen.

Noch mehr schönes neues CSS?

Falls Interesse besteht, könnte ich noch ein paar weitere Aspekte unserer schönen neuen CSS-Welt vorstellen. Unter anderem stünden die neuen Möglichkeiten der Farbangabe (RGBA und HSLA) oder font-size-adjust zur Auswahl. Lasst mich wissen falls ihr irgendwas davon haben wollt.