 |
In unserem Artikel für Liquid Design haben wir CSS als derzeit beste Möglichkeit für gutes, anpassbares Design beschrieben. Dabei sind wir jedoch davon ausgegangen, dass nur ein Stylesheet für alle Ausgabegeräte genutzt wird.
Nun gehen wir einen Schritt weiter: es ist möglich, je nach Ausgabemedium ein anderes Stylesheet zu verwenden. Also z.B. für den Druck einer Seite andere CSS als für die Anzeige auf dem Bildschirm. Das erlaubt eine zusätzliche Flexibilisierung.
Selektiv einbinden
Solche Mechanismen finden sich an verschiedenen Stellen. Wir werden nun drei Alternativen beschreiben:
CSS-Datei selektiv einbinden (HTML)
CSS-Dateien werden nach HTML-Syntax im Header einer Datei eingebunden. Das funktioniert so:
<head>
<title>Seite</title>
<link rel="stylesheet" href="stylesheets.css">
</head>
Der link-Befehl lässt sich aber dahingehend modifizieren, dass er nur wirksam ist, wenn ein bestimmtes Ausgabemedium verwendet wird:
<head>
<title>Seite</title>
<link rel="stylesheet" media="screen" href="bildschirm.css">
<link rel="stylesheet" media="print, embossed" href="druck.css">
</head>
CSS-Datei selektiv einbinden (CSS)
Sie können auch innerhalb eines style-Abschnitts andere Dateien importieren. Der Effekt ist im Prinzip derselbe:
<head>
<title>Seite</title>
<style type="text/css">
<!--
@import url(bildschirm.css) screen;
@import url(druck.css) print;
-->
</style>
</head>
style-Abschnitt unterteilen
Alternativ können auch Befehle, die im style-Abschnitt direkt notiert sind, auf ein Ausgabemedium eingeschränkt werden. Beispiel:
<head>
<title>Seite</title>
<style type="text/css">
<!--
@media screen
{
font-family: ...
}
@media print
{
font-family: ...
}
-->
</style>
</head>
Code, der außerhalb der geschweiften Klammern steht, gilt für alle Medientypen.
Verschiedene Medientypen
Zunächst eine allgemeine Anmerkung: Medientypen lassen sich beliebig kombinieren. Die Namen müssen dann durch Kommata getrennt werden. Es ist auch kein Problem, mehrere link-Befehle gleichzeitig zu verwenden.
Aber welche Medientypen gibt es eigentlich? Folgende Liste gibt Aufschluss:
all - umschließt alle Medientypen
aural - Sprachausgabe
braille - Braille-Zeilen zur Bildschirmausgabe für Blinde
embossed - Braille-Drucker
handheld - PDAs wie den Palm
print - normaler Druck auf Papier
projection - Projektionsgeräte wie Beamer
screen - normale Bildschirmausgabe
tty - nicht-grafische Ausgabemedien, z.B. Fernschreiber oder Textbrowser
tv - TV-ähnliche Ausgabemedien
Anregungen & Fazit
Wenn Sie ein Layout für den Druck optimieren, dann kommt es zunächst darauf an, dass die Aufteilung für die normale Bildschirmaufteilung sauber ist. Soll heißen: Text, Navigation und sonstige Elemente sollten sich in unterschiedlichen Layern befinden. Je nachdem, für welches Medium ausgegeben wird, können Sie nun diese Layer z.B. einfach unsichtbar machen oder verbreitern.
Genau das wird wohl auch das Haupteinsatzgebiet der medienspezifischen CSS sein: Seiten für den Druck zu optimieren. Aber auch die Handheld-Optimierung und behindertengerechte Darstellung sind interessante Bereiche, die mit der Zeit sicherlich an Bedeutung gewinnen werden.
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
