CSS At-Regel: @media – Referenz und Beispiel

stylesheet.css · @media

At-Regeln gelten für das ganze Stylesheet und haben kein einzelnes Element, an dem sich ein Regler drehen ließe. Das Code-Beispiel weiter unten zeigt die Syntax, der Abschnitt Erläuterungen die Wirkung.

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.

Medientypen und Mediengruppen

Neben den Medientypen, die eine Regel auswählt, kennt CSS 2.1 Mediengruppen, die beschreiben, was ein Medium kann: ob es fortlaufend oder seitenweise ausgibt, ob es visuell, akustisch oder taktil ist, ob es Farbe kennt und ob es Raster oder freie Positionierung erlaubt.

Diese Gruppen tauchen in keinem Stylesheet auf, sie stehen in der Spezifikation. Sie beantworten die Frage, welche Eigenschaft in welchem Medium überhaupt eine Bedeutung hat, und deshalb steht in dieser Referenz auf jeder Eigenschaftsseite eine Mediengruppe.

Für den Autor ist das die nützlichere Sicht. Nicht jeder Medientyp braucht eigene Regeln, aber es lohnt zu wissen, dass ein Abstand in einem akustischen Medium nichts bedeutet und eine Pause in einem visuellen nichts.

Von der Art des Geräts zu seinen Eigenschaften

Die Medientypen fragen nach der Art des Geräts, und genau daran sind sie gescheitert. Von den zehn Typen aus CSS 2.1 haben sich zwei durchgesetzt; die übrigen wurden von keinem oder fast keinem Anwenderprogramm gemeldet, und der Typ für Kleingeräte wurde von Mobilbrowsern gemieden, weil die zugehörigen Stylesheets damals stark vereinfachte Seiten lieferten.

Die Nachfolge trat eine Erweiterung derselben At-Regel an, die nicht mehr nach der Art des Geräts fragt, sondern nach seinen Eigenschaften: nach der verfügbaren Breite, nach der Ausrichtung, nach der Art der Eingabe. Das ist die verlässlichere Frage, denn sie beschreibt die Bedingung, unter der eine Regel gelten soll, statt sie einer Gerätekategorie zu unterstellen.

Die Syntax dieser Seite gilt dabei unverändert weiter: Die At-Regel mit einem Typ davor ist der einfachste Fall der heutigen Schreibweise, und der Typ für den Druck ist nach wie vor der wichtigste Anwendungsfall.

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.

Relevante Links

CSS-3-Modul Media Queries,
CC/PP Info-Seite,
CC/PP Struktur und Vokabular

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

At-Regel @media