CSS Tutorial – media Typen – link rel contra @import
CSS Tutorial – media Typen – link rel contra @import
Heute möchte ich Euch erklären, wie ihr festlegen könnt, welche CSS-Dateien geladen werden sollen, wenn es um die Anzeige auf dem Bildschirm, dem Drucker, einem mobilen Gerät (bspw. Handy) oder anderem geht.
Ich habe bereits in einem anderen CSS-Tutorial erklärt, warum man zum einbinden von CSS Dateien @import verwenden sollte. In diesem hier muss ich diese Aussage wieder einschränken. Doch dazu später mehr.
Es gibt verschiedene Medientypen in HTML. Früher gab es nur zwei Möglichkeiten, eine Internet-Seite anzuzeigen:
1. Auf dem Bildschirm
2. vom Drucker auf einem Blatt ausgedruckt oder in ein PDF exportiert.
Heutzutage gibt es viel mehr Möglichkeiten.
Handys können in der Regel inzwischen ebenfalls Webseiten anzeigen.
Es gibt Beamer. Für Blinde Menschen computergesteuerte Sprachausgabe und und und….
Ich werde Euch heute die Möglichkeiten aufzählen, die es seit dem CSS2-Standard gibt:
Um eine allgemeine CSS einzubinden, verwendet man „all“:
Beispielcode HTML:
<pre> <head>
<link rel="stylesheet" media="all" href="komplett.css">
</head></pre>
Benötigt man eine CSS für den Drucker, sollte man splitten.
1.: „all“ für CSS-Code, der allgemein gültig ist, ganz gleich ob es sich um den Drucker oder den bildschirm handelt.
2.: „print“ wird für den Drucker verwendet
3.: „screen“ Screen wird für den Bildschirm verwendet.
Beispielcode HTML:
<pre> <head>
<link rel="stylesheet" media="all" href="komplett.css">
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
</head></pre>
Bei dem obigen Beispiel würde man eine komplett.css laden, die alle CSS Formatierungen beinhaltet, die auf Bildschirm und Drucker gleichermaßen angewendet werden. Hinzu käme eine print.css für den Drucker und eine screen.css für den Bildschirm.
Man könnte theoretisch das gleiche auch per @import machen. (Wir erinnern uns daran, daß ich in einem anderen Tutorial geraten habe, @import zu verwenden, um ältere Browser, die kein CSS korrekt interpretieren können, auszuschließen.)
Per @import würde dies folgendermaßen aussehen:
Beispielcode HTML:
<pre> <head>
<style>
@import url('komplett.css') all;
@import url('print.css') print;
@import url('screen.css') screen;
</style>
</head></pre>
So weit die Theorie. Praktisch gesehen, darf man @import nicht anwenden, sobald man CSS für verschiedene Medientypen aufsplittet. Daran ist mal wieder Microsoft mit seinem Internet Explorer schuld. Der Internet Explorer kann bis zur Version 7 die Import Regeln für verschiedene Medientypen nicht korrekt verarbeiten. Ab der Version 8 scheint Microsoft das endlich in den Griff bekommen zu haben.
Da der Internet Explorer allerdings sehr weit verbreitet ist und diejenigen, die diesen Browser verwenden, meistens auch noch die älteren Versionen im Einsatz haben, wäre dies sehr unpraktisch.
Wenn man also für verschiedene Medientypen optimiert, sollte man keine @import Regel einsetzen.
Zuletzt möchte ich weitere Medientypen aufzählen, die man verwenden kann:
aural – aural wird für die computergesteuerte Sprachausgabe verwendet.
braille – braille wird für die Blindenschrift eingesetzt. Hierbei handelt es sich um Erhebungen, die ein Blinder Mensch mit seinen Fingern abtasten kann. Somit ist er in der Lage, den Text zu erfühlen.
embossed – embossed ist vergleichbar mit braille. Hierbei handelt es sich um die Ausgabe für Blindendrucker.
handheld – handheld wird für mobile Geräte verwendet (pocket pc, handy usw.)
print – print ist für die Ausgabe am Drucker gedacht
projection – projection ist für die Anzeige durch Beamer oder ähnlichen Geräten gedacht.
screen – screen ist für die Bildschirmausgabe gedacht.
tty – tty ist für die Ausgabe auf nicht-graphischen Medien wie Fernschreibern oder dem reinen Text Browser Lynx gedacht
tv – tv ist gedacht für die Ausgabe an Fernsehgeräten mit geringer Bildschirmauflösung.
Ihr seht: heutzutage gibt es schon viele Medienarten, von denen Internetseiten verarbeitet werden.
Die wichtigsten sind selbstverständlich: screen, print und handheld.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
