CSS 2.1: `@media`

Allgemeines:

Eine der wichtigsten Charakteristika von Stylesheets ist die Möglichkeit, Webdokumente für unterschiedliche Medien zu formatieren.

Deshalb gibt es eine Reihe von CSS-Eigenschaften, die nur für bestimmte Medien relevant sind. Ein Anwenderprogramm sollte auf diese Eigenschaften nur dann zurückgreifen, wenn sie für die aktuelle Ausgabe benötigt werden. So macht es zum Beispiel keinen Sinn, in einem Stylesheet zur Bildschirmausgabe Werte für widows und orphans zu definieren.

Andere Eigenschaften wiederum sind für verschiedene Medien, einige sogar für alle Medien verwendbar. Hier ist es geradezu notwendig, nach Medientypen zu unterscheiden, um akzeptable Ergebnisse zu erzielen. Beispielsweise sind Grafiken von 600 Pixel Breite am Bildschirm gut erkennbar, man kann sich aber leicht ausmalen, wie groß die Ausgabe mit einem auf 600 dpi eingestellten Drucker aussehen kann. (In den meisten Fällen wird die Ausgabe in diesem Fall skaliert, man darf aber nicht davon ausgehen.)

Um derartig unterschiedliche Regeln den richtigen Ausgabemedien zuzuordnen, wurde die Regel @media geschaffen.

Die Regel `@media`

Mit Hilfe der Regel @media lassen sich Bereiche innerhalb eines Stylesheets per Definition bestimmten Medien zuordnen. Die innerhalb eines @media-Bereiches liegenden Regeln werden dann nur bei der Ausgabe auf dem designierten Medium berücksichtigt. In einem Stylesheet können beliebig viele @media-Regeln vorhanden sein. Dadurch ist es möglich, die Deklarationen für die unterschiedlichsten Medientypen in einer einzigen Datei zusammenzufassen. Da das Stylesheet dadurch naturgemäß unübersichtlicher wird, muß jeder selbst entscheiden, ob er diesen Nachteil in Kauf nimmt.

Syntax:

@media <name> { Regeln }

Komponenten:

<name>: Bezeichnung des Medientyps. Zwar gibt CSS 2.1 eine Liste von Medientypen aus, betont aber, dass diese aufgrund der fortschreitenden Technologie keine definitive Werteliste für @media sein könne.
{ Regeln }: Dem genannten Medium zugeordnete Regeln. Dies ist nicht mehr und nicht weniger als ein absolut normales Stylesheet. Da jede Regel wiederum ein Paar geschweifter Klammern aufweist, enthalten @media-Regeln jeweils zwei geschweifte Klammern zu Beginn und am Ende.

Code-Beispiel:

@media screen { body { font-size: 16px } } @media print { body { font-size: 12pt } }

Browserunterstützung

Die At-Regel @media wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x:: Ebenso wie die Browser der Version 4 unterstützt auch IE/Win bis 5.x diese Regel noch nicht.
IE/Mac 5.x dagegen erkennt sie bereits.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Es ist aber bisher noch kein Browser eines Mobilgerätes bekannt, der @media umsetzt.

Ausblick:

Eine Erweiterung der @media-Regel und der medienspezifischen Attribute ist im CSS-3-Modul Media Queries beschrieben. Auf der Site der CC/PP werden gerätespezifische Profile und anderes vorgestellt, eine Norm über Struktur und Vokabular ist bereits gültig.