Ein intelligentes System zur Verwaltung von CSS-Hacks

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie möchten ein System entwickeln, mit dem Sie die korrekten CSS-Regeln von denen für Hacks und Workarounds getrennt verwalten können.

Lösung

Binden Sie ein Stylesheet über das link-Element in Ihre Webseite ein:

<link rel="stylesheet" type="text/css" media="screen, presentation" href="/_assets/css/screen/screen.css"/>

Innerhalb von screen.css importieren Sie das Stylesheet, das die korrekten Werte enthält:

@import url(csscookbook.css);

Mit verschiedenen Filtern importieren Sie nun die CSS-Regeln, die zu Korrektur von Problemen in bestimmten Browsern benötigt werden (siehe nächste Abbildung). Einer dieser Browser ist beispielsweise Internet Explorer 5.x für Windows. Mit Hilfe eines sogenannten Mid-Pass-Filters können Sie jetzt die Stildefinitionen speziell für diesen Browser laden:

@import url(csscookbook.css);
/* Stildefinitionen speziell für Internet Explorer 5 für Windows */
 @media tty {
  i{content:"\";/*" "*/}} @import 'winie5.css'; /*";}
 } 
/* */

Ein weiterer Browser, für den eigene Regeln definiert werden müssen, ist der Internet Explorer für Macintosh. Mit Hilfe des "Mac-Bandpass-Filters" können Sie auch diesem Browser seine eigenen Regeln vorgeben:

@import url(/_assets/css/csscookbook.css);
/* Stildefinitionen speziell für Internet Explorer 5 für Windows */
 @media tty {
  i{content:"\";/*" "*/}} @import '/_assets/css/winie5.css'; /*";}
 }
/* */
/* Stildefinitionen speziell für Internet Explorer für Macintosh */
/*\*//*/&#8232;
@import "ie5mac.css";&#8232;
/**/

Schematische Darstellung: intelligentes Systems zur Verwaltung von CSS-Hacks

Abbildung: Schematische Darstellung des intelligenten Systems zur Verwaltung von CSS-Hacks.

Diskussion

Die getrennte Verwaltung von Stylesheets für bestimmte Browser bietet eine Reihe von Vorteilen. Erstens bleibt das Stylesheet mit den korrekten Stildefinitionen frei von Hacks und Workarounds.

Zweitens erleichtert die Verteilung der Hacks für bestimmte Browser auf eigene Dateien die Verwaltung auch dieser Regeln. Wollen Sie irgendwann einmal einen bestimmten Browser nicht mehr unterstützen, können Sie die betreffenden Regeln und die Anweisungen, das betreffende Stylesheet zu laden, einfach löschen.

Die hier diskutierte Technik verwendet CSS-Hacks, um Stylesheets für bestimmte Browser festzulegen. Ein anderer Ansatz wäre die Verwendung einer serverseitigen Lösung. Der Webentwickler Mark Pilgrim hat ein Verfahren entwickelt, das auf dem Einsatz des Moduls mod_rewrite für den Webserver Apache basiert.

Der Webserver ermittelt, welcher Browser in welcher Version verwendet wird, und schickt daraufhin zusätzlich zum Basis-Stylesheet die für den betreffenden Browser nötigen zusätzlichen Definitionen.

Siehe auch

Den Artikel von Molly E. Holzschlag zur Verwaltung von CSS-Hacks.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln