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

Es hat etwas gedauert, aber die Serie über schönes neues CSS wird weiter fortgesetzt. Nach Textschatten mit CSS, alternativen Farbangaben, font-size-adjust und zuletzt dem General Sibling Combinator nehmen wir heute eine CSS3-Eigenschaft ins Visier, die vermutlich wirklich noch kaum einer kennt. Noch unterstützt quasi gar kein Browser appearance so richtig, aber man kann damit auch jetzt schon einige praktische Dinge anstellen.

Was kann man mit appearance anfangen?

Mit appearance kann man beliebige HTML-Elemente so aussehen lassen, dass sie wie die diversen Bedienelemente (Buttons, Textfelder) des Betriebssystems/Browsers aussehen. Ein (dämliches) Beispiel gefällig? Um einen Link wie eine Checkbox aussehen zu lassen, macht man folgendes:

a {
    appearance:checkbox;
}

Das geht in allen möglichen Kombinationen. Tabellen die wie Buttons aussehen? Buttons in Form von Checkboxen? Buttons die wie Tooltipps aussehen? Alles möglich.

Wozu das gut sein soll? Nun, während sicher noch ein gewisser … Rechtfertigunsbedarf für Konstukte à la Tabellen die wie Buttons aussehen besteht, kann es hin und wieder durchaus sinnvoll sein, Elemente ein wenig zu verkleiden. Man denke an Vor/Zurück-Links in mehrteiligen Anleitungen oder AGB zum durchklicken – Warum sollten die nicht aussehen können wie Buttons?

Welche Browser verstehen appearance?

Eigentlich gibt es noch keinen Browser, der appearance richtig umsetzt. Teile dieser Eigenschaft kann man aus Mozilla-Browsern mit -moz-appearance und in Webkit-Browsern mit -webkit-appearance herauskitzeln. Wie der Test zeigt, geht da immer noch nicht viel, und die Dinge die funktionieren, verhalten sich nicht immer einheitlich. Man vergleiche nur mal die Checkboxen in Firefox und in Safari …

Somit ist appearance eigentlich nur ein klarer Kandidat für progressive Enhancement in Kombination mit größter Vorsicht und gründlichstem Testen. Elemente in Buttons verwandeln klappt in beiden Browsertypen ganz passabel und was den Rest angeht muss man eben von Fall zu Fall sehen was geht. Zum Abschluss darf ich noch auf die Referenz für -moz-appearance und die Referenz für -webkit-appearance (PDF, Seite 71) verweisen.

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 …