Grundlagen CSS
Ist doch alles gar nicht so schwer
So, das war der erste Streich. Bisher eigentlich noch gar nichts Besonderes. Aus dem Kapitel 1 wissen wir jetzt bereits, wie man CSS-Formatierungsbefehle auf verschiedene Weisen in ein HTML-Dokument einbindet. Im Folgenden soll das Thema "Medientyp" ein wenig erklärt werden. Oh je, was ist DAS denn? Also ...
Was sind Medientypen
Kapitel 2
Unter Medientypen versteht man z.B.
- alle Medientypen
(all) - Sprachausgabe
(aural) - auf Handys, PDA´s etc.
(handheld) - auf Druckern
(print) - auf Beamern etc.
(projection) - Bildschirmausgabe
(screen) - auf Geräten wie etwa Fernschreibern
(tty) - auf Fernsehgeräten
(tv)
...wobei ich sicher einige vergessen habe!
Nun kann man gezielt CSS-Angaben für die verschiedenen Medientypen machen. Diese werden durch das Attribut media definiert.
Beispiel
(Druckausgabe und Ausgabe auf mehreren Medien)
<link rel="stylesheet" type="text/css" href="druckausgabe.css" media="print">
Durch diese Anweisung wird die CSS-Datei "druckausgabe.css" nur für die Ausgabe auf einem Drucker eingebunden, ohne dabei DAS zu beeinflussen, was man auf dem Bildschirm sieht.
Mehrere Medientypen können z.B. auf diese Weise angegeben werden:
<link rel="stylesheet" type="text/css" href="mehreremedien.css" media="screen,print,projection">
Die CSS-Datei "mehreremedien.css" im zweiten Beispiel wird wirksam bei Ausgabe auf dem Bildschirm, dem Drucker UND einem Beamer.
Zwei weitere Möglichkeiten, Medientypen anzugeben sind:
- Innerhalb eines
Style-Bereiches im Head eines HTML-Dokumentes sieht das beispielsweise dann so aus:
<style type="text/css" media="screen"></style>
- Wenn innerhalb eines
Style-Bereiches noch mal CSS-Dateien eingebunden werden sollen, ist die Syntax wie folgt:
@import url(allemedien.css) all;
Wie bei vielen anderen Dingen gibt es auch hier einen "kleinen Haken":
Netscape 4 interpretiert nur Stylesheets, die entweder ohne oder mit Medientyp all bzw. screen eingebunden werden, ab Netscape 6.1 wird auch print interpretiert. Der IE kennt auf jeden Fall all, screen und print - und das Gleiche gilt für den Opera 5.0.
Den privaten Homepage-Bastler wird das jedoch weniger stören, denn wann wird er schon einmal Seine Website auf einem Beamer ausgeben wollen?