Zehn nützliche CSS-Kurztipps

Beim Lesen der Website evolt.org stieß der Autor dieser Kolumne kürzlich auf einen Artikel von Trenton Moss mit dem Titel „Ten CSS tricks you may not know„. Dabei handelt es sich um eine sehr nützliche Sammlung von Tipps, weshalb viele Kommentare und Links auf anderen Websites und Blogs darüber zu finden sind. Einige dieser Kommentare wie zum Beispiel der von Tantek Celik enthalten noch eine Reihe von Korrekturen und Verbesserungen.

Da die Tipps sehr interessant sind, stellt ZDNet für die Leser von Developer eine kurze Referenzliste der Tipps, inklusive der nachträglichen Korrekturen und Erklärungen vor.

Tipp 1: CSS-Kurzschrift
Anstelle der Gestaltung von Schriftarten mit eigenen Anweisungen für Fontgröße, Schriftartenfamilie, Gewichtung und so weiter können die Fonteigenschaften in CSS-Kurzschrift zu einer einzigen Zeile komprimiert werden. Die Kurzschrift kann folgenden CSS-Code:

zu einer einzigen Zeile zusammenfügen:

In der Kurzschrift-Anweisung für die Fonts müssen sowohl die font-family als auch die font-size spezifiziert werden. Andere Fontattribute sind optional. Aber Vorsicht: Nicht spezifizierte Werte werden immer auf die Standardeinstellung zurückgesetzt, was nicht immer der gewünschte Effekt sein mag.

Hinweis: CSS enthält neben der font-Eigenschaft noch andere Eigenschaften, bei denen der CSS-Code auf ähnliche Weise komprimiert werden kann. Hier eine Liste dieser Eigenschaften:

• Background
• Border
• Border-width
• Border-style
• Border-color
• Font
• List-style
• Margin
• Outline
• Padding

Tipp 2: Zwei Klassen in einer
Einem Markup-Element können mehrere Klassenattribute zugewiesen werden. So erhält folgende div-Klasse ihren Stil zum Beispiel aus den Typklassen content und product:

Hinweis: Häufig wird behauptet, dass der Internet Explorer keine Mehrfach-Klassen unterstützt, was aber nicht ganz stimmt. Der IE hat zwar Probleme mit Multiclass-Selektoren im CSS-Code, aber nicht mit mehreren Klassenattributen, die auf ein Markup-Element angewandt werden.

Tipp 3: Defaultwert für CSS border
Über die Kurzschrifteigenschaft border können Typ, Farbe und Breite von Rändern spezifiziert werden (in beliebiger Reihenfolge). Das Attribut „style“ ist obligatorisch, aber die Attribute für Farbe und Breite können weggelassen werden, wenn die Defaultwerte verwendet werden sollen. Die Defaultbreite ist medium, die Default-color dieselbe wie die Textfarbe.

Hinweis: Alle Kurzschrift-Eigenschaften funktionieren gleich. Wann immer ein Attribut nicht spezifiziert ist, werden die Defaultwerte verwendet.

Tipp 4: !important wird vom IE (nicht wirklich) ignoriert
Im Tipp aus dem evolt.org-Artikel geht es um das Anhängen von !important zu einer Rollendeklaration, wenn eine Regel wichtiger ist als andere, auch wenn eine spätere Rollendeklaration die erste Regel normalerweise überschreiben würde. Im Tipp wird gesagt, dass der IE !important ignoriert und dass Web-Designer also über Code wie den folgenden verschiedene Typattribute für den IE und andere Browser setzen können:

Hinweis: Tantek Celik’s Entkräftigung dieses Punktes ist aufschlussreich. Der IE unterstützt !important, obwohl im evolt.org-Artikel das Gegenteil behauptet wird. Allerdings gelingt es mit dem Beispielcode, im IE unter Windows einen unterschiedlichen Rand zu setzen, weil der IE unter Windows bei der Bearbeitung mehrerer Deklarationen einer Eigenschaft innerhalb desselben Typs Probleme hat.

Tipp 5: Technik zur Abbildungsersetzung
Dieser Tipp behandelt das Dilemma, ob man herkömmliche HTML-Markups für Text verwenden und dadurch mit der eingeschränkten Fontauswahl auf den Computern der meisten Besucher leben muss, oder ob man eine Abbildung des Texts in einem anderen Font verwendet, der den gewünschten visuellen Effekt erzielt. Mit der Abbildungsersetzung behält man den HTML-Text im Dokument bei (für Suchmaschinen) und ersetzt diesen Text in der normalen Browser-Ansicht durch eine Abbildung.

Hinweis: Es gibt gleich mehrere Möglichkeiten für das Verbergen eines Textelements (meist in Überschriften) und seine Ersetzung durch eine Abbildung. Im evolt.org-Artikel wird nur ein einziges (sehr kurzes) Beispiel gegeben. Die Kommentare zum Artikel und Celik’s Blog enthalten noch weitere. Eine umfassende Erklärung und Auswertung der verschiedenen Abbildungs-Ersetzungstechniken ist in einem Kurztipp nicht möglich, dies wird einem zukünftigen Artikel vorbehalten bleiben.