CSS

Zehn handfeste CSS-Tricks

(msc) Trenton Moss versteht etwas von gut konstruierten Webseiten. Zum einen beschäftigt er sich mit dem Thema «Web-Usability» (also der Benutzbarkeit und der Bedienerfreundlichkeit von Webseiten) und zum anderen kennt er CSS aus dem Effeff. Im Beitrag «Ten CSS tricks you may not know» beschreibt er zehn Tricks für die Cascading Style Sheets, die Sie vielleicht nicht kennen, die Ihnen womöglich sehr viel nützen könnten. Den Originalbeitrag finden Sie unter http://evolt.org/article/rdf/17/60369

1. CSS in Steno

Stildeklarationen können ausführlich oder in Kurzform erfolgen. Die ausführliche Schreibweise eignet sich, wenn nur wenige Attribute deklariert werden sollen, zum Beispiel wie folgt:

font-size: 1em;

font-weight: bold;

Es gibt aber auch eine Deklaration in Kurzform, die sich eignet, wenn alle Attribute definiert werden sollen:

font: 1em/1.5em bold italic small-caps verdana,serif

Die Kurzform funktioniert nur, wenn die Schriftgrösse und die Font-Family angegeben wird.

2. Zwei Fliegen (Klassen) auf einen Streich

Normalerweise weist man einem HTML-Objekt nur eine Klasse zu. Das bedeutet aber nicht, dass es nicht möglich wäre, zwei oder noch mehr Klassen zuzuweisen:

<p class="klasse1 klasse2">

Hier werden dem Abschnitt die Klassenstile klasse1 und klasse2 zugewiesen. Zwischen den beiden Deklarationen darf nur ein Leerschlag stehen, Komma und Semikolon sind nicht erlaubt. Bei widersprüchlichen Angaben setzt sich die Klasse durch, die im CSS-Dokument weiter unten steht.

3. Kurzform für den Rahmen

Wenn per CSS ein Rahmen definiert wird, gibt man normalerweise Farbe, Dicke und Art an:

border: 3px solid #000

Es geht aber auch kürzer. Wenn Sie einen durchgezogenen Rahmen deklarieren, verwendet der Browser für die Farbe und die Dicke die Standardwerte: Also mitteldick (drei bis vier Pixel) und die Farbe des Textes:

border: solid

4. Hack für Internet Explorer

Es kann bei CSS-Deklarationen zu Widersprüchen kommen. Ein komplexes Verfahren ermittelt dann, welche der Regeln die Oberhand behält. Mit dem Zusatz !important lässt sich indes bestimmen, dass eine Deklaration die Vorfahrt hat.

Die meisten Browser achten auf die !important-Angabe. Nicht so der Internet Explorer. Das ermöglicht es, beliebige CSS-Deklarationen speziell für den Internet Explorer zu formulieren. Ein Beispiel:

margin-left: 100px !important; margin-left: 10px

Die meisten Browser würden hier einen linken Seitenrand von hundert Pixeln anzeigen. Microsofts Browser übersieht !important und rückt den Text um 10 Pixel ein, da er die zuletzt gemachte Deklaration berücksichtigt.

Internet Explorer kennt auch den Child-Selektor nicht.

5. Trick für Bildüberschriften

Viele Webdesigner setzen Überschriften als Bilddatei auf die Webseite, weil sie Titel in einer Schrift anzeigen möchten, die die meisten Surfer nicht installiert haben.

Das Problem liegt darin, dass Suchmaschinen ihnen keine Bedeutung beimessen. Selbst wenn die Überschrift als alt-Text hinterlegt ist, merken Google und Co. nicht, dass hier eine wichtige Information steckt. Daher empfiehlt sich bei Bildüberschriften folgender Trick:

h1{ background: url(pix/X.gif) no-repeat; text-indent: 2000px;}

So kann man Schriften ganz normal als Text in die Webseite einfügen. Die Textüberschrift erscheint aber nicht im Browser, da sie 2000 Pixel links vom linken Seitenrand positioniert ist und der Bildüberschrift den Vortritt lässt.

6. Microsoft-Bug umgehen

Ältere Versionen von Microsofts Browser berechnen die Breite eines Elements inklusive Dicke des Rahmens und Aussenabstand (padding). Richtig aber wäre, diese beiden Werte zu der angegebenen Breite dazuzuschlagen. Der Box-Model-Hack ist ein Weg, um diesen Darstellungsfehler des Internet Explorer zu umgehen, den Microsoft erst mit Version 6 korrigiert hat (Beschreibung unter www.tantek.com/CSS/Examples/boxmodelhack.html). Allerdings sorgt der gängige Box-Model-Hack für unübersichtlichen Code. Die Variante des Hacks von Trenton Moss macht die Sache einfacher. Der folgende Code sorgt für eine Box, die in allen Browsern 150 Pixel breit ist.

#box {width: 150px;}

							#box div {border: 5px; padding: 20px;}

Im HTML-Code lautet der Aufruf so:

<div id="box"><div>...
</div></div>

7. Elemente auf der Seite zentrieren

Die Ausgangslage für diesen Trick ist eine Website, die als zentrales Gestaltungselement eine Box von 700 Pixeln Breite verwendet. Diese Box soll zentriert im Browserfenster erscheinen, gleichgültig, wie gross im Browser des Surfers dargestellt wird. Dies geht simpel mit einem ID-Selektor:

#content { width: 700px; margin: 0 auto;}

Auf der HTML-Seite würde der gesamte Inhalt mit folgendem Div-Tag umschlossen:

<div id="content">

Resultat: Eine Webseite mit zentriertem Inhaltsblock, die vom Internet Explorer in der Version 5.0 und älter nicht korrekt angezeigt wird: Er ignoriert den Versuch, Elemente über CSS zu zentrieren. Damit auch dieser Browser eine korrekte Darstellung liefert, ist folgende Anpassung der Stile nötig:

body {text-align: center;}

							#content {text-align: left; width: 700px; margin: 0 auto; }

8. Vertikales Ausrichten

Text mittels Tabellen vertikal auszurichten, ist ja so einfach: Mit dem Attribut vertical-align: middle erscheint der Inhalt von Zellen automatisch in der Mitte. In einem CSS-Layout funktioniert das aber leider nicht so einfach. Wenn zum Beispiel ein Eintrag in der Navigation 2em hoch ist und die CSS-Regel besagt, dass dieser Text vertikal ausgerichtet werden soll, passiert gar nichts: Der Text klebt an der oberen Kante seiner Box.

Es funktioniert aber, wenn die Zeilenhöhe vorgegeben wird; sie sollte der Höhe der Box entsprechen. In diesem Fall soll jeder Eintrag in der Navigation 2em hoch sein, sodass mit folgender Vorgabe die Einträge in der Navigation vertikal zentriert erscheinen:

line-height: 2em; verticalalign: middle

Weitere interessante Überlegungen zur vertikalen Seitenkontrolle finden sich hier: www.wpdfd.com/editorial/wpd0103.htm

9. Absolut ist relativ

Bekanntermassen kann man mit CSS Elemente sowohl absolut als auch relativ positionieren. Wählt man eine absolute Positionsangabe, kann man präzise den Abstand vom linken bzw. oberen Fensterrand angeben und so zum Beispiel die Navigation links oben der Seite platzieren.

Was aber, wenn man im laufenden Text einer Webseite Elemente absolut platzieren möchte? Die Positionsangaben sollten sich in diesem Fall nicht auf die gesamte Seite beziehen, sondern gewissermassen «lokal» für den aktuellen Abschnitt gelten.

Das ist möglich, indem man einen Container einrichtet, den man mit relativer Position ausstattet. Innerhalb dieses Containers fügt man nun ein Element ein, das mit absoluter Positionierung arbeitet:

#container {position: relative;}

							#fix {position: absolute; left: 30px; top: 5px;}

In der HTML-Seite wird der Container wie folgt benutzt:

<div id="container"> <div id="fix"> Relativ-absolut positioniert </div> </div>

Die absoluten Angaben des Elementes «fix» beziehen sich auf das übergeordnete Element, also auf den Container. Fix wird dreissig Pixel links von der linken Kante und fünf Pixel unterhalb der oberen Kante des Containers platziert.

10. Seite vertikal ausfüllen

Wie der Inhalt einer Website das Browser­fenster vertikal füllt, lässt sich über Stylesheets nur schwer steuern. Mit anderen Worten: Es ist beispielsweise nicht möglich, einem Element zu sagen, dass es bis zum Fuss der Seite reichen soll. Über eine Höhenangabe in Prozent oder Pixel funktioniert das nur, wenn die Höhe der Seite zum Vornherein bekannt ist. Möchte man aber eine vertikale Navigation einrichten, die in unserem Fall 150 Pixel breit ist, immer von oben bis unten geht und auf Seiten unterschiedlicher Länge zum Einsatz kommt, ist folgender Trick anzuwenden.

Die Stildefinition für die Navigation:

#navigation {background: blue; width: 150px;}

Um die blaue Farbe nun über die Einträge der Navigation bis zum unteren Ende der Seite zu verlängern, verwenden wir ein Hintergrundbild, das die gleiche blaue Farbe wie die Navigation aufweist und über repeat-y auf der ganzen Länge der Seite wiederholt wird:body {background: url(blue.gif) 0 0 repeat-y;}