Folgende Expertentipps gibt Dave Shea auf seinem Weblog mezzoblue. Sie sollen die Arbeit mit CSS erleichtern und ein Funktionieren in verschiedenen Browsern sichersstellen.
Validieren Sie Ihren Code
Nicht valides XHTML oder CSS ist häufig die Ursache, wenn das Layout nicht funktioniert. Validieren Sie daher als erstes Ihren Code.
Prüfen Sie Ihren CSS-Code zuerst in einem fortschritllichen Browser
Wenn Sie Ihr CSS in einem „defekten“ Browsern (z.B. IE) testen, wird ihr Code auf dem fehlerhaften Rendering dieses Browser beruhen. Wenn es an der Zeit ist, in einem standardkonformen Browser (z.B. Firefox) zu testen, werden Sie frustriert feststellen, dass dieser Browser Ihre CSS „verkehrt“ rendert. Starten Sie dahermit dem perfektesten Browser und fügen Sie dann die Hacks für die weniger fähigen Browser hinzu. Zur Zeit unterstützen Mozilla, Firefox, Safari oder Opera die Standards am besten.
Überprüfen Sie, ob Ihr gewünschter Effekt tatsächlich existiert
Es gibt browserspezifische CSS-Erweiterungen, die nicht in den offiziellen Spezifikationen enthalten sind. Wenn Sie mit Filtern und Scrollbar-Formatierungen arbeiten, sollte Ihnen klar sein, dass Sie damit propietären Code verwenden, der nur im Internet Explorer funktioniert. Wenn der Validator Ihnen einmal erklärt, das der von Ihnen verwendete Code „nicht definiert“ ist, handelt es sich wahrscheinlich um propietären Code, der nicht für alle Browser kompatibel ist.
Überprüfen Sie bei floatenden Elementen immer die korrekte Anwendung von clear
Die Verwendung von floatenden Elementen ist nicht ganz einfach. Wenn Sie in eine Situation kommen, in der sich ein floatendes Element über das umgebende Container-Element ausdehnt oder sich auf andere Art nicht so verhält wie Sie es erwarten würden, überprüfen Sie, ob das was Sie erreichen wollen, überhaupt machbar ist. Lesen Sie dazu auch Eric Meyers Tutorial.
Zusammenfallende Ränder: Wenden Sie padding oder border an, um dies zu vermeiden
Wenn Sie Seitenränder mit margin formatieren, ist es möglich, dass sich Seitenränder von benachbarten Elementen in manchen Browsern überdecken und die Darstellung somit nicht überall gleich ist. Andy Budd erklärt detailliert, was bei einem so genannten „margins collapse“ passiert und wie Sie ihn vermeiden können.
Vermeiden Sie die gleichzeitige Angabe von padding, border und einer festen Breite für Elemente
Der IE5 interpretiert das Box Model falsch. Die Angabe einer festen Breite bezieht sich im IE5 auf das Element inklusive padding und _border. Für standardkonforme Browser gilt die Angabe nur für die Breite des Inhaltsbereichs, also ohne padding und border. Der IE5 zeigt daher Layouts, die padding, border und width für das gleiche Element verwenden, falsch an. Es gibt zwar Wege, dies zu umgehen. Es ist aber besser, padding auf das Elternelement anstelle des Kindelementes anzuwenden.
Vermeiden Sie den „Flash of Unstyled Content“ (FOUC)
Wenn Sie zum Einbinden Ihrer externen Stylesheets ausschließlich import verwenden, werden Sie früher oder später feststellen, dass beim Aufruf Ihrer Seite im IE das Dokument kurz unformatiert „aufblitzt“, bevor die CSS-Datei geladen wird. Das kann vermieden werden, indem vor dem importierten Stylesheet ein weiteres Stylesheet per <link> eingebunden wird.
Geben Sie Acht beim Gestalten von Links, wenn Sie Anker benutzen
Wenn Sie in Ihrem Code klassische Anker (<a name="anchor">) benutzen, werden Sie feststellen, dass diese auch die :hover- und :active-Pseudoklassen verwenden. Um dies zu umgehen, sollten Sie entweder IDs anstatt der Anker benutzen oder die Anker mit der etwas ungewöhnlicheren Syntax :link:hover, :link:active formatieren.
Die LoVe/HAte-Regel für Links
Beim Definieren von Pseudoklassen für die Formatierung von Links sollten Sie folgende Reihenfolge einhalten:
Link
Visited
Hover
(Focus)
Active
Eine andere Reihenfolge wird keine einheitliche Darstellung in verschiedenen Browsern ergeben.
Geben Sie Masseinheiten für Werte an, die nicht null sind
CSS erfordert die Angabe von Masseinheiten für alle Quantitäten (Mengenangaben) wie z.B. Schriftgröße (Fonts), Seitenrändern und andere Grössen. Wenn keine Grösse angegeben wurde, kann man nicht darauf vertrauen, wie sich die Browser verhalten werden. Null ist jedoch Null. Hier ist keine Einheit notwendig.
Prüfen Sie unterschiedliche Schriftgrößen
Fortschrittliche Browser wie Firefox und Opera erlauben Ihnen, die Textgröße neu zu bestimmen, gleichgültig, welche Maßeinheit Sie benutzen. Einige Benutzer haben mit Sicherheit eine grössere oder kleinere Standardschriftgrösse eingestellt. Versuchen Sie, dass Ihre Site auch mit der grösstmöglichen Schrift nutzbar bleibt.
Testen Sie Ihr Stylesheet eingebettet, importieren Sie es später
Wenn Sie während des Testens mit eingebetteten Stylesheets arbeiten, werden Sie auch alle möglichen versteckten Fehler entdecken und korrigieren können. Dies ist besonders beim Arbeiten mit einigen Mac-Browsern sehr wichtig. Sie sollten sich jedoch vor dem Auffschalten Ihrer Site versichern, dass Sie Ihr CSS in eine externe Datei ausgelagert und mit import@ oder <link> wieder eingebunden haben.
Einen einfachen Rahmen hinzuzufügen hilft beim Überprüfen des Layouts
Es hilft bei Layoutproblemen, ein spezielles Element mit einem Rahmen zu versehen. Damit können Überlappungen oder Leerräume festgestellt werden, die auf andere Art möglicherweise nicht feststellbar wären.
Benutzen Sie keine Anführungszeichen für Pfade
Wenn Sie ein Hintergrundbild definieren oder zu importierende Dateien geladen werden sollen, benutzen Sie keine Anführungszeichen für die Pfadangaben. Dies ist nicht notwendig und der IE5/Mac würde dadurch ausgeschlossen.
Verlinken Sie nicht auf leere Stylesheets
Der Mac IE5 „würgt“ an einem leerem Stylesheet herum, was zur Verlängerung der Ladezeit führt. Verlinken Sie daher nicht auf leere Stylesheets.
Organisieren Sie Ihre CSS-Datei
Überprüfen Sie die passende Kommentierung von CSS-Blöcken, die Gruppierung ähnlicher Selektoren und die Schaffung einer gleichbleibenden Namenskonvention, die Leerraumformatierung (Empfehlung: einzelne Leerräume anstelle von Tab-Stopps für plattformübergreifende Berücksichtigung benutzen.) und die Reihenfolge von Eigenschaften.
Benennen Sie Klassen/IDs nach deren Funktion, nicht nach der äußeren Erscheinung
Wenn Sie eine Klasse .kleinblau anlegen und später die Notwendigkeit besteht die Schrift auf Groß und Rot zu ändern, macht die Klassenbezeichnung keinen Sinn mehr. Benutzen Sie stattdessen beschreibende Klassen wie z.B. .copyright.
Kombinieren Sie Selektoren
Die CSS-Dateien möglichst klein zu halten, ist wichtig um Downloadzeiten zu verringern. Sooft es möglich ist, sollten Sie Gruppierungen einsetzen, Selektoren für Nachfahren nutzen und Redundanzen vermeiden, indem Sie Kurzschreibweisen verwenden.
Beachten Sie die Accessibility (Zugänglichkeit), beim Image Replacement
Das klassische FIR bereitet bekanntlich Probleme in Screenreadern und bei Usern, die mit abgeschalteter Bildanzeige surfen. Es gibt Alternativen dazu. Informieren Sie sich.
Folgende Expertentipps gibt Dave Shea auf seinem Weblog mezzoblue. Sie sollen die Arbeit mit CSS erleichtern und ein Funktionieren in verschiedenen Browsern sichersstellen.
Validieren Sie Ihren Code
Nicht valides XHTML oder CSS ist häufig die Ursache, wenn das Layout nicht funktioniert. Validieren Sie daher als erstes Ihren Code.
Prüfen Sie Ihren CSS-Code zuerst in einem fortschritllichen Browser
Wenn Sie Ihr CSS in einem „defekten“ Browsern (z.B. IE) testen, wird ihr Code auf dem fehlerhaften Rendering dieses Browser beruhen. Wenn es an der Zeit ist, in einem standardkonformen Browser (z.B. Firefox) zu testen, werden Sie frustriert feststellen, dass dieser Browser Ihre CSS „verkehrt“ rendert. Starten Sie dahermit dem perfektesten Browser und fügen Sie dann die Hacks für die weniger fähigen Browser hinzu. Zur Zeit unterstützen Mozilla, Firefox, Safari oder Opera die Standards am besten.
Überprüfen Sie, ob Ihr gewünschter Effekt tatsächlich existiert
Es gibt browserspezifische CSS-Erweiterungen, die nicht in den offiziellen Spezifikationen enthalten sind. Wenn Sie mit Filtern und Scrollbar-Formatierungen arbeiten, sollte Ihnen klar sein, dass Sie damit propietären Code verwenden, der nur im Internet Explorer funktioniert. Wenn der Validator Ihnen einmal erklärt, das der von Ihnen verwendete Code „nicht definiert“ ist, handelt es sich wahrscheinlich um propietären Code, der nicht für alle Browser kompatibel ist.
Überprüfen Sie bei floatenden Elementen immer die korrekte Anwendung von clear
Die Verwendung von floatenden Elementen ist nicht ganz einfach. Wenn Sie in eine Situation kommen, in der sich ein floatendes Element über das umgebende Container-Element ausdehnt oder sich auf andere Art nicht so verhält wie Sie es erwarten würden, überprüfen Sie, ob das was Sie erreichen wollen, überhaupt machbar ist. Lesen Sie dazu auch Eric Meyers Tutorial.
Zusammenfallende Ränder: Wenden Sie padding oder border an, um dies zu vermeiden
Wenn Sie Seitenränder mit margin formatieren, ist es möglich, dass sich Seitenränder von benachbarten Elementen in manchen Browsern überdecken und die Darstellung somit nicht überall gleich ist. Andy Budd erklärt detailliert, was bei einem so genannten „margins collapse“ passiert und wie Sie ihn vermeiden können.
Vermeiden Sie die gleichzeitige Angabe von padding, border und einer festen Breite für Elemente
Der IE5 interpretiert das Box Model falsch. Die Angabe einer festen Breite bezieht sich im IE5 auf das Element inklusive padding und _border. Für standardkonforme Browser gilt die Angabe nur für die Breite des Inhaltsbereichs, also ohne padding und border. Der IE5 zeigt daher Layouts, die padding, border und width für das gleiche Element verwenden, falsch an. Es gibt zwar Wege, dies zu umgehen. Es ist aber besser, padding auf das Elternelement anstelle des Kindelementes anzuwenden.
Vermeiden Sie den „Flash of Unstyled Content“ (FOUC)
Wenn Sie zum Einbinden Ihrer externen Stylesheets ausschließlich
importverwenden, werden Sie früher oder später feststellen, dass beim Aufruf Ihrer Seite im IE das Dokument kurz unformatiert „aufblitzt“, bevor die CSS-Datei geladen wird. Das kann vermieden werden, indem vor dem importierten Stylesheet ein weiteres Stylesheet per<link>eingebunden wird.Geben Sie Acht beim Gestalten von Links, wenn Sie Anker benutzen
Wenn Sie in Ihrem Code klassische Anker (
<a name="anchor">) benutzen, werden Sie feststellen, dass diese auch die :hover- und :active-Pseudoklassen verwenden. Um dies zu umgehen, sollten Sie entweder IDs anstatt der Anker benutzen oder die Anker mit der etwas ungewöhnlicheren Syntax :link:hover, :link:active formatieren.Die LoVe/HAte-Regel für Links
Beim Definieren von Pseudoklassen für die Formatierung von Links sollten Sie folgende Reihenfolge einhalten:
Eine andere Reihenfolge wird keine einheitliche Darstellung in verschiedenen Browsern ergeben.
Geben Sie Masseinheiten für Werte an, die nicht null sind
CSS erfordert die Angabe von Masseinheiten für alle Quantitäten (Mengenangaben) wie z.B. Schriftgröße (Fonts), Seitenrändern und andere Grössen. Wenn keine Grösse angegeben wurde, kann man nicht darauf vertrauen, wie sich die Browser verhalten werden. Null ist jedoch Null. Hier ist keine Einheit notwendig.
Prüfen Sie unterschiedliche Schriftgrößen
Fortschrittliche Browser wie Firefox und Opera erlauben Ihnen, die Textgröße neu zu bestimmen, gleichgültig, welche Maßeinheit Sie benutzen. Einige Benutzer haben mit Sicherheit eine grössere oder kleinere Standardschriftgrösse eingestellt. Versuchen Sie, dass Ihre Site auch mit der grösstmöglichen Schrift nutzbar bleibt.
Testen Sie Ihr Stylesheet eingebettet, importieren Sie es später
Wenn Sie während des Testens mit eingebetteten Stylesheets arbeiten, werden Sie auch alle möglichen versteckten Fehler entdecken und korrigieren können. Dies ist besonders beim Arbeiten mit einigen Mac-Browsern sehr wichtig. Sie sollten sich jedoch vor dem Auffschalten Ihrer Site versichern, dass Sie Ihr CSS in eine externe Datei ausgelagert und mit
import@ oder<link>wieder eingebunden haben.Einen einfachen Rahmen hinzuzufügen hilft beim Überprüfen des Layouts
Es hilft bei Layoutproblemen, ein spezielles Element mit einem Rahmen zu versehen. Damit können Überlappungen oder Leerräume festgestellt werden, die auf andere Art möglicherweise nicht feststellbar wären.
Benutzen Sie keine Anführungszeichen für Pfade
Wenn Sie ein Hintergrundbild definieren oder zu importierende Dateien geladen werden sollen, benutzen Sie keine Anführungszeichen für die Pfadangaben. Dies ist nicht notwendig und der IE5/Mac würde dadurch ausgeschlossen.
Verlinken Sie nicht auf leere Stylesheets
Der Mac IE5 „würgt“ an einem leerem Stylesheet herum, was zur Verlängerung der Ladezeit führt. Verlinken Sie daher nicht auf leere Stylesheets.
Organisieren Sie Ihre CSS-Datei
Überprüfen Sie die passende Kommentierung von CSS-Blöcken, die Gruppierung ähnlicher Selektoren und die Schaffung einer gleichbleibenden Namenskonvention, die Leerraumformatierung (Empfehlung: einzelne Leerräume anstelle von Tab-Stopps für plattformübergreifende Berücksichtigung benutzen.) und die Reihenfolge von Eigenschaften.
Benennen Sie Klassen/IDs nach deren Funktion, nicht nach der äußeren Erscheinung
Wenn Sie eine Klasse .kleinblau anlegen und später die Notwendigkeit besteht die Schrift auf Groß und Rot zu ändern, macht die Klassenbezeichnung keinen Sinn mehr. Benutzen Sie stattdessen beschreibende Klassen wie z.B. .copyright.
Kombinieren Sie Selektoren
Die CSS-Dateien möglichst klein zu halten, ist wichtig um Downloadzeiten zu verringern. Sooft es möglich ist, sollten Sie Gruppierungen einsetzen, Selektoren für Nachfahren nutzen und Redundanzen vermeiden, indem Sie Kurzschreibweisen verwenden.
Beachten Sie die Accessibility (Zugänglichkeit), beim Image Replacement
Das klassische FIR bereitet bekanntlich Probleme in Screenreadern und bei Usern, die mit abgeschalteter Bildanzeige surfen. Es gibt Alternativen dazu. Informieren Sie sich.