Detaillierte Erläuterung der progressiven CSS-Erweiterung (Cascading Style Sheets).

Es gibt viele Möglichkeiten, progressive Verbesserungen mit Cascading Style Sheets (CSS) in Ihre Arbeit zu integrieren. In diesem Artikel werden einige der erfolgreicheren Möglichkeiten besprochen und andere Möglichkeiten zur schrittweisen Verbesserung Ihrer Website betrachtet.

Stylesheet-Organisation

Viele Webdesigner und Entwickler denken nicht viel darüber nach, wie man Stylesheets in Dokumente einfügt, aber es ist eigentlich eine Kunst. Mit dem richtigen Ansatz können Sie sofort von den vielen Vorteilen der progressiven Verbesserung profitieren.

Verwenden Sie mehrere Stylesheets

Eine kleine Aufteilung Ihrer Stile kann viele Vorteile bringen. Offensichtlich ist ein Stylesheet mit mehr als 1500 Zeilen etwas schwierig zu pflegen, und die Aufteilung in mehrere Stylesheets kann den Arbeitsablauf verbessern (und Ihnen Aufwand sparen). Es gibt einen weiteren Vorteil, der selten erwähnt wird: Er trägt dazu bei, konsistentere Präsentationseffekte auf dem Zielmedientyp zu erzielen (Übersetzung: bezieht sich auf verschiedene Medientypen wie Computer, Drucker, Fernseher, Mobiltelefone usw.).

Die Datei main.css enthält alle Stilregeln der Site. Erwägen Sie die Aufteilung in unabhängige Stylesheets mit Typografie, Layout und Farbe, die entsprechend benannt sind: type.css, layout.css, color.css.


(Abbildung: So teilen Sie ein einzelnes Stylesheet in mehrere verwandte Stylesheets auf)

Sobald die obige Trennung abgeschlossen ist, können Sie einige magische Tricks anwenden, um automatisch ein „Low-Fidelity“-Erlebnis für veraltete Browser (wie IE5/Mac) und viele Browser bereitzustellen, denen es an starker Unterstützung für das CSS-Layout mangelt. Wie geht das? Es hängt alles davon ab, wie Sie die Datei importieren. Angenommen, main.css wird über das Link-Element eingeführt:


Teilen Sie zunächst die obige Referenzzeile in drei verwandte Stylesheets auf:


In der Vergangenheit haben viele Entwickler den Medienwert auf „Bildschirm“ oder „Projektion“ gesetzt, wodurch der Layoutstil unter Netscape 4.x völlig ungültig wurde (Anmerkung: Netscape 4.x unterstützt keine komplexen Layouts wie Floating und Positionierung). Es gibt jedoch eine bessere Lösung. Bevor wir diese Methode im Detail erklären, werfen wir einen Blick auf alternative Medientypen.

Optionale Medientypen

Die progressive Verbesserung konzentriert sich hauptsächlich auf Inhalte, und wir möchten allen Geräten, die die Anzeige von Inhalten unterstützen, ein „verbessertes“ Erlebnis bieten. Daher ist es wichtig, auch Geräte außerhalb des Browsers zu berücksichtigen, beispielsweise Druck- und Mobilgeräte.

Leider ist der Markt für Mobilgeräte immer noch fragmentiert und unausgereift (seien Sie nicht naiv zu glauben, dass alle Handheld-Browser Medientypstile darstellen, die auf „Bildschirm“ abzielen). Daher würde eine ausführliche Diskussion der progressiven Verbesserung in allen Medien viele Seiten, wenn nicht sogar ein Buch in Anspruch nehmen. Aber verzweifeln Sie nicht: In der mobilen Welt beginnen sich die Unterschiede zu vereinheitlichen, und einige sehr kluge Leute beginnen, Ressourcen zusammenzustellen, um uns bei der Entwicklung zu helfen. Um Zeit und Mühe zu sparen, konzentrieren wir uns jedoch auf Druckgeräte.

Normalerweise müssen wir ein weiteres Linkelement verwenden, um Druckstile hinzuzufügen:


Konventionell enthält das obige Stylesheet alle druckbezogenen Regeln, einschließlich Layout- und Farbregeln. Insbesondere beim Layout werden die meisten Regeln im Stylesheet wahrscheinlich aus main.css kopiert. Mit anderen Worten: Dies führt zu einer Menge doppeltem Code.

Sie sehen den Vorteil der Trennung von Publikations- und Farbstilen von Layoutstilen: Wir benötigen diese wiederholten Regeln im Druck-Stylesheet nicht mehr. Darüber hinaus lässt sich mit einem weiteren Organisationstipp die Benutzerfreundlichkeit der Seite verbessern und bestimmte Layout-Stile vor problematischen Browsern verbergen.

Betrachten Sie im Rückblick auf unser Stylesheet den folgenden Code:


Wir haben keinen Medientyp deklariert, daher liest Netscape 4.x alle Stile in diesen drei Dateien. Der Netscape-Browser versteht jedoch grundlegendes CSS, und wir können dies nutzen. Wir können unsere Stile weiter organisieren, indem wir alle in „layout.css“ enthaltenen Stile in ein neues Stylesheet mit dem passenden Namen „screen.css“ verschieben. Aktualisieren Sie abschließend den Inhalt in layout.css, um screen.css zu importieren, sodass NS4.x und seine Geschwisterbrowser nicht mehr intelligent sind (da sie die @import-Direktive nicht verstehen). (Übersetzungshinweis: Der Autor spricht hier davon, den gesamten Inhalt in layout.css nach screen.css zu verschieben und dann screen.css über @import in layout.css einzuführen. Ich denke, der beste Weg ist, ihn hinzuzufügen (layout.css) Behalten Sie die grundlegendsten Layoutstile bei, die auch von NS4.x verstanden werden können, und verschieben Sie andere erweiterte Layoutstile nach screen.css.


Es gibt Raum für Verbesserungen – die Medien, auf die das Stylesheet abzielt, sollten deklariert werden, was wir tun, indem wir den Medientyp zur @import-Deklaration hinzufügen:


Das Problem besteht darin, dass die Browser IE7 und darunter diese Syntax nicht verstehen und daher das obige Stylesheet ignorieren. Wenn Sie diesen Browsern das obige Stylesheet zur Verfügung stellen möchten (was oft gewünscht ist), können Sie dies problemlos mithilfe von bedingten Kommentaren tun wird weiter unten näher erläutert. Wenn Sie ein scharfes Auge wie ein Adler haben, ist Ihnen vielleicht aufgefallen, dass auf beiden Seiten des Stylesheet-Namens einfache Anführungszeichen (') anstelle von doppelten Anführungszeichen (") verwendet werden. Dieser kleine Trick ermöglicht es IE5/Mac, den Stil zu ignorieren Die CSS-Layoutfunktionen von IE5/Mac sind sehr schwach (insbesondere die Unterstützung für Floating und Positionierung), und es ist durchaus akzeptabel, Layoutregeln vor ihnen auszublenden. Schließlich können sie immer noch Farb- und Layoutinformationen erhalten, was in manchen Fällen ausreicht .

Mit der gleichen Technik können Sie die Datei print.css importieren (die, wie Sie sich vorstellen können, spezifische Regeln für das Drucklayout enthält).


Jetzt verfügen wir nicht nur über ein schön organisiertes Stylesheet, sondern auch über eine effektive Methode zur schrittweisen Verbesserung des Designs Ihrer Website.


(Veranschaulichung, wie mehrere Stylesheets zueinander in Beziehung stehen und wie man sie auf ein Dokument anwendet)

Wie gehe ich mit IE6 um?

Für viele Leute ist Internet Explorer 6 das neue Netscape 4 – und jeder möchte, dass es verschwindet.

Lassen wir uns das Gerede über IE6-Probleme überspringen. Die Probleme mit IE6 sind gut dokumentiert und ehrlich gesagt nicht so schwer zu beheben. Darüber hinaus erfolgt die Einführung von IE7 recht schnell (insbesondere im Verbrauchermarkt) und IE8 befindet sich bereits in der öffentlichen Betaphase. Das bedeutet, dass wir uns eines Tages wirklich vom veralteten IE6 verabschieden können.

Ob absichtlich oder unabsichtlich, als Microsoft IE5 auf den Markt brachte, stellte es ein gutes Werkzeug zur progressiven Verbesserung bereit: bedingte Kommentare. Diese cleveren Logikelemente (in allen anderen Browsern in HTML-Kommentare verbannt) ermöglichen nicht nur, dass bestimmte Markup-Code-Schnipsel nur für den IE funktionieren, sondern auch, dass diese Code-Schnipsel nur in bestimmten Versionen des IE funktionieren.

Als Entwickler, die sich mit Webstandards auskennen, sollten wir unsere Designs immer zuerst auf den meisten vorhandenen, standardkonformen Browsern testen und dann Patches für die Browser bereitstellen, die mit geringfügigen Änderungen wieder auf Kurs kommen. Jeder Arbeitsablauf ist anders, aber ich finde, dass es am besten ist, jedes Projekt mit einem Standardsatz an Dokumenten zu beginnen. Meine Basis-Suite umfasst die folgenden Dateien:


Fügen Sie dann je nach Projektanforderungen browserspezifische CSS-Dateien hinzu, um diese „kleineren Änderungen“ einzuschließen. In den meisten Projekten sind diese Dateien derzeit ie7.css und ie6.css. Wenn das Projekt Unterstützung für Versionen vor IE6 erfordert, werde ich auch entsprechende Dateien dafür erstellen (z. B. ie5.5.css usw.). Nachdem diese Dateien vorhanden waren, begann ich, Stilregeln zu den entsprechenden Stylesheets hinzuzufügen.

Ich beginne meine CSS-Tests in Mozilla Firefox, da ich den Großteil meines CSS mit der Seitenleiste des CSS-Editors von Firefox geschrieben habe. Nachdem ich mit dem Entwerfen der Seite in Firefox fertig war, öffnete ich sofort einen anderen Browser, um sie zu testen und anzuzeigen. Die meisten funktionieren perfekt, weil sie Webstandards einhalten. Öffnen Sie dann IE7 zum Testen. In den meisten Fällen gibt es nicht viele Probleme. Gelegentlich muss hasLayout ausgelöst oder andere kleinere Layoutfehler korrigiert werden. Anstatt diese Korrekturen in die Stylesheet-Datei der Basissuite zu schreiben, habe ich sie zu ie7.css hinzugefügt und über bedingte Kommentare im HEAD des Dokuments eingeführt:


Die obigen bedingten Kommentare ermöglichen es IE7 und darunter (Übersetzungshinweis: lte ist die Abkürzung für „kleiner als oder gleich“), den eingeführten Stil zu erkennen. Daher werden diese Patches beim Durchsuchen der Seite mit IE7 abgerufen. Wenn Sie jedoch eine neue Version des IE verwenden, die diese Probleme möglicherweise behoben hat, z. B. IE8, der hasLayout aufgegeben hat und diese Probleme nicht mehr aufweist, werden diese Stile ignoriert. Andererseits können diese Stile mit IE6 abgerufen werden. Das ist gut, da Rendering-Fehler in IE7 in der Regel auch in IE6 auftreten. Wie oben erwähnt, können IE7- und niedrigere Versionen @import mit Medientyp nicht verstehen. Die Einführung von screen.css auf diese Weise ist für IE7 und niedrigere Versionen ungültig. Daher müssen Sie oben in der Datei ie7.css auch eine @import-Anweisung ohne Medientyp hinzufügen, um screen.css einzuführen.

Sobald ich IE7 gepatcht habe, öffne ich IE6 und schaue, ob ich etwas patchen muss. Bei Bedarf würde ich dem Dokument einen weiteren bedingten Kommentar hinzufügen und ihn in ie6.css importieren:


Fügen Sie dann einfach die von IE6 benötigten Patches zu den entsprechenden Stylesheets hinzu. Diese Stylesheets werden von IE7 ignoriert, wirken sich aber weiterhin auf Versionen wie IE5.5 aus.

Durch die Verwendung bedingter Kommentare auf diese Weise können Sie die Zielbrowser in Ihrem Projekt einfach verwalten und die CSS-Patchdateien unabhängig und kostenlos halten.

Andere Überlegungen

Die progressive CSS-Verbesserung beschränkt sich nicht nur auf die Zuordnung von Stylesheets zu Dokumenten, sondern kann auch auf das Schreiben von CSS angewendet werden.

Betrachten Sie beispielsweise generierte Inhalte. Nicht von allen Browsern unterstützt, aber dies ist eine großartige Möglichkeit, zusätzliches Design oder Text hinzuzufügen. Dies ist für die Benutzerfreundlichkeit der Seite nicht erforderlich, kann aber für einige visuelle oder andere Verbesserungen sorgen.

Nehmen Sie als Beispiel ein einfaches Kontaktformular:


(Abbildung: In diesem Beispiel verwendetes HTML-Formular (Code wird unten angegeben))

Beim Schreiben des obigen HTML-Codes ist es wahrscheinlich, dass der Doppelpunkt (:) natürlich in das Label-Element geschrieben wird. Warum das tun? Wird dem Label-Element wirklich Inhalt hinzugefügt? Nicht wirklich. Der Zweck besteht darin, dem Benutzer zusätzliche visuelle Hinweise zu geben. Das Beschriftungselement ist überflüssig und sollte entfernt werden:


Eine besser geeignete Möglichkeit besteht darin, den Doppelpunkt durch Generieren von Inhalt wieder zum Dokument hinzuzufügen:


Das Schreiben von Formularen auf diese Weise gibt uns Flexibilität: Wenn wir dekorative Zeichen von der gesamten Website entfernen müssen, können wir einfach die CSS-Datei bearbeiten, ohne jedes Formular suchen zu müssen (obwohl wir vorher wussten, wo). Dieser Trick lässt sich auch gut degradieren, denn ohne den Doppelpunkt wird das Formular nicht unbrauchbar – ein großartiges Beispiel für progressive Verbesserung.

Vielleicht haben Sie herausgefunden, dass Sie mithilfe erweiterter CSS-Selektoren (Übersetzung: Selektor, auch als Selektor übersetzt, aber ich denke, Selektoren können die ursprüngliche Bedeutung besser widerspiegeln, z. B. „Operator“ wird als „Operator“ anstelle von „Operator“ übersetzt) ​​einen bestimmten Stil ändern können Bei fortgeschritteneren Browsern trägt dies dazu bei, die Website im Laufe der Zeit zu verbessern. Ein gutes Beispiel ist der Attributselektor, der in IE6, seinen Zeitgenossen und früheren Browsern nicht verstanden (und daher ignoriert) wird. Egor Kloos nutzte dieses Konzept wunderbar mit seinem Beitrag mit dem Titel „Gemination“ zum CSS Zen Garden:


(Abbildung: Vergleich der Darstellung von Egor Kloos‘ CSS Zen Garden-Arbeit („Double Double“) in Standardbrowsern und IE6)

Wie hat er es gemacht? Hier ist der leicht modifizierte Beispielcode:


Der Unterschied ist offensichtlich und ein schönes Beispiel dafür, wie progressive Verbesserung in CSS verwendet werden kann.

Ebenso enthält die Website von Andy Clarke einige IE6-Leckerbissen. Durch die Verwendung der IE-Filter und das Hinzufügen einiger bedingter Anmerkungen ist es Andy gelungen, alle Farben von der Website zu entfernen und ein paar austauschbare Bilder bereitzustellen, die für ein echtes „Lo-Fi“-Erlebnis sorgen.


(Abbildung: Vergleich der Website von Andy Clark in Standardbrowsern und IE6)

Die graue Technik im Bild oben ist diese: Fügen Sie im Stylesheet für IE6 (und darunter), das durch den bedingten Kommentar hinzugefügt wurde, die folgende Anweisung hinzu:


Obwohl die beiden oben genannten Beispiele möglicherweise zu viele Techniken enthalten, die in der täglichen Arbeit nicht verwendet werden, veranschaulichen sie hervorragend das Konzept, wie die progressive CSS-Verbesserung in der Praxis angewendet werden kann.

Zusammenfassen

Wie wir bereits besprochen haben, gibt es mehrere Möglichkeiten, die progressive CSS-Erweiterung auf Ihre Website anzuwenden. Der einfachste und wahrscheinlich beste Weg besteht darin, Ihre Stylesheets zu organisieren und sorgfältig darüber nachzudenken, wie Sie sie in Ihr Dokument verknüpfen. Sobald Sie bedingte Kommentare verstanden haben, wird der Umgang mit IE-spezifischen Problemen ein Kinderspiel sein. Wenn Sie genau wissen, wie Selektoren verwendet werden und in welchen Szenarien sie verwendet werden, können Sie in CSS detailliertere Anpassungen vornehmen.

Mit diesem Wissen sind Sie auf dem besten Weg, ein Experte für progressive Verbesserung zu werden.