Site Overlay

Individuelle Stylesheets nach Medientyp

Die Verwendung von Stylesheets (CSS) zur Darstellung von Webinhalten ist in den letzten Jahren sprunghaft angestiegen. Doch welche Möglichkeiten erhalten wir mit deren Einsatz? Wird CSS nur verwendet, um eine strikte Trennung zwischen Inhalt und Darstellung zu erhalten oder bieten sie noch wesentlich mehr Funktionen? Fragen, auf die ich im Folgenden etwas näher eingehen möchte.

Beschäftigt man sich heute intensiv mit Webdesign, so ist der Weg hin zu CSS unweigerlich festgelegt. Doch das war nicht immer so. Nach der Herausgabe des ersten Vorschlages der Spezifikation für CSS1 durch das W3C am 17.12.1996 dauerte es immer noch mehrere Jahre bis die CSS-Unterstützung in den Browsern zum Großteil implementiert war. Erst mit der Veröffentlichung der Spezifikation CSS2 am 12.05.1998 erhielt CSS einen essentiellen Schub nach vorn. Doch die Unterstützung innerhalb der verschiedenen Browser war derart unterschiedlich, dass die konsequente Verwendung von CSS zur Qual wurde. Es entstanden reihenweise Hacks, welche die Darstellung vereinheitlichen sollten aber auch einen deutlichen Mehraufwand an Arbeit, Tests und natürlich Kosten bedingten. Mit der Gründung des Web Standard Projektes wird nun konsequent dagegen vorgegangen. Fast alle Browserhersteller haben sich den Empfehlungen angenommen und liefern heute Produkte mit schon sehr guten Resultaten. Doch solange die CSS-Unterstützung des marktführenden Internet Explorers nicht verbessert wird (was Microsoft jedoch schon mit der Version 7 angekündigt hat), wird es für Webdesigner immer noch Mehrarbeit bedeuten.

Trotz dieser genannten Unannehmlichkeiten ist der konsequente Einsatz von CSS angeraten. Nur mit dessen Anwendung entsteht ein flexibles Design, das jederzeit nach Belieben gewechselt werden kann, ohne auch nur eine Änderung am Inhalt vornehmen zu müssen. Theme-Support wird bereits von etlichen Webseiten angeboten, wobei sogar die Besucher selbst über die Darstellung entscheiden können. Die wohl bekannteste Webseite zur Demonstration der Fähigkeiten von CSS ist definitiv CSS Zen Garden.

Bisher behandelten alle Beispiele aber nur die Ausgabe auf dem Monitor (Screen). Doch was passiert, wenn Inhalte einer Webseite ausgedruckt (Print) oder auf dem Handheld (Handheld), Braille-Reader (Braille) etc. angezeigt werden sollen? Dafür sind für jeden Medientyp separate Stylesheets notwendig. Erfolgt keine explizite Einbindung im Header des (X)HTML-Dokumentes, so hat dies jeodch eine unformatierte Ausgabe zur Folge. Sehr gut zu sehen ist dies am Beispiel für das Print-Medium von Focus Online. Um die Darstellung für dieses Medium zu erhalten, ist einfach nur die Druckvorschau zu öffnen. Die erste Frage, die sich sofort stellt: Wer ist an solch einer verhunzten Druckausgabe interessiert? Ziel sollte es doch sein, den gewünschten Artikel sauber aufs Papier zu bringen, ohne von Navigationsmenüs, Hintergrundbildern und komplett verschobenen Elementen gestört zu werden. Genau an dieser Stelle setzt das Stylesheet für den Medientyp “print” an, dass speziell für den Druck optimierte Selektoren bereithält und CSS-Eigenschaften von Elementen neu definiert. Damit ist es möglich, Bereiche auszublenden bzw. zusätzliche Informationen im Ausdruck hinzuzufügen.

Um dieses Feature ebenfalls anbieten zu können, enthält meine Seite seit heute ebenfalls ein speziell angepasstes Stylesheet für die Druckausgabe. So blendet es alle unwichtigen Bereiche wie Header und Navigationsleisten aus, entfernt die Hintergrundbilder, erhöht den Schriftkontrast und fügt innerhalb von Postings an eingebettenen Links deren URL automatisch an.

Ich hoffe, dass mit diesen Änderungen ab jetzt alle Artikel in einem ansprechenden Format auf dem Drucker ausgegeben werden.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close