Allen recht

Designer von Webseiten wollen ihre Produkte anders als auf Desktop-PCs aussehen lassen, wenn jemand ein Smartphone zum Surfen nutzt. Ein Fall für den Einsatz von Cascading Stylesheets, genauer: den Media Queries von CSS3.

Lesezeit: 11 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen 18 Beiträge
Von
  • Michael Jendryschik

Webautoren können auf verschiedenerlei Weise den Geltungsbereich von Cascading Stylesheets auf bestimmte Medien einschränken, sowohl bei der Einbindung als auch für bestimmte Regeln innerhalb eines Stylesheet. Bei dessen Einbindung per link-Element dient das media-Attribut dazu anzugeben, für welche Ausgabemedien die referenzierte Datei bestimmt ist. Welche Medientypen infrage kommen, zeigt die Tabelle „CSS-Medientypen“. So wird im folgenden Code die Datei style.css nur geladen, wenn es sich beim Ausgabemedium um einen Computerbildschirm handelt:

<link rel="stylesheet" type="text/css"
href="style.css" media="screen" />
CSS-Medientypen
Typ Ausgabemedium
all alle Geräte
aural Sprachbrowser, die den Inhalt der Webseite vorlesen
braille Geräte mit Braillezeile. Der Text der Webseite wird in die veränderte Oberflächenstruktur der Braillezeile umgewandelt.
embossed Brailledrucker. Den gestanzten Text der Website können blinde Menschen ertasten.
handheld Handcomputer wie Palms oder Mobiltelefone, meist mit monochromen Bildschirmen und geringer Bandbreite
print Drucker
projection Projektoren und ähnliche Geräte
screen Bildschirm (Computermonitor)
tty für die Ausgabe auf nichtgrafischen Ausgabemedien mit Festbreitenschrift, wie Terminals oder Textbrowser
tv Fernseher oder ähnliche Geräte

Den Import von Stylesheets über die At-Regel @import können Webautoren ebenfalls medienabhängig gestalten, indem sie das Ausgabemedium hinten anfügen:

@import url("style.css") screen; 

Um bestimmte Regeln innerhalb eines Stylesheet (oder style-Elements) nur auf bestimmte Medien anzuwenden, können Webautoren auf die At-Regel @media zurückgreifen. Der Header, die Seitenspalte und der Footer werden in der folgenden Vorgabe nur für den Fall ausgeblendet, dass die Webseite ausgedruckt wird:

@media print {
div#header,
div#sidebar,
div#footer { display: none; }
}

Mit CSS3 Media Queries, von denen beim W3C eine fast fertige Standardisierung als Candidate Recommendation vorliegt, können Webdesigner die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht.

Syntax von Media Queries
Bezeichnung Code
Media Query screen and (max-width: 300px)
Medientyp screen and (max-width: 300px)
Verknüpfung screen and (max-width: 300px)
Ausdruck screen and (max-width: 300px)
Merkmal screen and (max-width: 300px)
Wert screen and (max-width: 300px)

Drei Codebeispiele für den Einsatz von Media Queries sollen zeigen, wie das abläuft: Das über das folgende link-Element eingebundene Stylesheet wird nur berücksichtigt, wenn das Ausgabemedium ein Computerbildschirm ist und die Anzeigefläche des Benutzerprogramms, zumeist ein Browser, maximal 300 Pixel beträgt:

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width: 300px)" /> 

Folgendes Kurzlisting zeigt die Anwendung von Media Queries innerhalb eines style-Elements: Die Hintergrundfarbe des body-Elements ist abhängig davon, wie ein Nutzer das Ausgabegerät, beispielsweise ein iPad, in der Hand hält (orientation).

<style type="text/css">
@media screen and (orientation: portrait) {
body { background-color: white; }
}
@media screen and (orientation: landscape) {
body { background-color: black; }
}
</style>

Darstellung und Menge der angezeigten Elemente hängen von der Fensterbreite ab (Abb. 1).

Microsoft demonstriert die Anwendung von Media Queries im Rahmen der Internet Explorer 9 Platform Demos anhand einer Bildergalerie, deren Darstellung von der Breite des Browserfensters abhängig ist. Abbildung 1 zeigt, dass sich die Anzahl der Bilder pro Zeile sowie die Menge der dargestellten Elemente ändern. Dafür sorgen unter anderem folgende Media Queries, die die Wirkungsbereiche der darin enthaltenen Regeln, die hier fehlen, einschränken:

@media (min-width: 950px) {
/* breite Browserfenster */
}
@media (min-width: 450px) and
(max-width: 950px) {
/* Darstellung auf Netbooks */ }
@media (max-width: 450px) {
/* mobile Geräte */ }

Einen weiteren sinnvollen Einsatz von Media Queries zeigt Ethan Marcotte in seinem bei A List Apart erschienenen Artikel Responsive Web Design. Marcotte hebt das Spaltenlayout seiner Beispielseite auf, sobald das Fenster zu schmal wird und die Breite für die mehrspaltige Darstellung nicht mehr ausreicht:

@media screen and (max-width: 600px) {
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
}

Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten -merkmalen (sogenannten Media Features) miteinander verknüpfen. media="screen and (max-width: 300px)", eins der oben angeführten Beispiele, besteht aus folgenden Teilen:

Der Medientyp screen schränkt den Geltungsbereich auf Computerbildschirme ein. Der Ausdruck max-width: 300px schränkt zusätzlich auf eine maximale Bildschirmbreite ein. Zum Einsatz kommt das Medienmerkmal max-width, dem der Wert 300px zugewiesen wurde.

Das Schlüsselwort and drückt ein logisches Und aus. Alle Bedingungen müssen erfüllt sein, damit die Media Query true ergibt und das CSS angewandt wird. Ist eine Bedingung nicht erfüllt, lautet das Ergebnis false und das CSS wird ignoriert.

and steht – wie in diesem Fall – zwischen der Angabe eines Medientyps und einem Ausdruck; and kann aber ebenso gut zwei Ausdrücke miteinander verknüpfen, beispielsweise (min-width: 450px) and (max-width: 950px).

Ohne Angabe eines Medientyps entspricht das der Angabe all. Die Regeln im obigen Code mit den drei @media-Anweisungen gelten folglich für alle Medien.

Webautoren können mehrere Media Queries in einer kombinieren, indem sie sie durch Kommata getrennt aneinanderreihen. Das Komma steht für ein logisches Oder. Die Angabe

@import url("style.css") screen, projection; 

bedeutet: Importiere das Stylesheet style.css, wenn es sich um einen Computerbildschirm oder einen Projektor (oder ein ähnliches Gerät) handelt. Wer weitere einschränkende Medienmerkmale hinzufügen möchte, beispielsweise eine Mindestbreite, muss beachten, dass es sich hierbei um zwei getrennte Media Queries handelt. Bei der Angabe

@import url("style.css") screen, projection and (min-width: 800px); 

bezieht sich das min-width-Merkmal folglich nur auf die zweite Query, das heißt ausschließlich auf die Ausgabe auf Projektoren. Wer beide Medientypen einschränken möchte, muss wie folgt vorgehen:

@import url("style.css") screen and (min-width: 800px), projection and (min-width: 800px); 

Dasselbe gilt für die Einbindung per link-Element:

<link rel="stylesheet" type="text/css" href="style.css"
media="screen and (min-width: 800px),
projection and (min-width: 800px)" />

Media Queries können mit den Schlüsselwörtern not und only eingeleitet werden. not entspricht einer logischen Negation. Wenn alle Bedingungen einer Media Query (ohne die Negation) zutreffen, sorgt es dafür, dass das Stylesheet nicht geladen wird; wenn sie nicht zutreffen, sorgt not dafür, dass es geladen wird. Das per

<link rel="stylesheet" type="text/css" href="style.css"
media="not screen and (color)" />

eingebundene Stylesheet findet Berücksichtigung, wenn es sich beim Ausgabegerät nicht um einen Farbbildschirm handelt. only ist ein Workaround für veraltete Browser und Benutzerprogramme, die mit den Media Queries aus CSS3 nicht umzugehen wissen und Stylesheets laden würden, die nicht für sie bestimmt sind. Aktuelle Browser behandeln Media Queries, die mit only eingeleitet werden, so, als ob das Schlüsselwort dort nicht stünde.

<link rel="stylesheet" type="text/css" href="style.css"
media="only screen and (color)" />

Dem tieferen Verständnis der Syntax von CSS Media Queries hilft ein Blick auf die formale Grammatik [1], siehe Listing 1. Sie basiert auf der Version der Autoren des Mozilla Developer Center, die die offizielle, aber unübersichtliche, formale Grammatik in eine lesbare Pseudo-Backus-Naur-Form übersetzt haben. Die letzte Regel listet alle Medienmerkmale auf.

Mehr Infos

Listing 1: Formale Grammatik der Media Queries

 Media_Query: [[only | not]? <Medientyp> [ and <Ausdruck> ]*]
| <Ausdruck> [ and <Ausdruck> ]*
Ausdruck: ( <Merkmal> [: <Wert>]? ) 
 Medientyp: all | aural | braille | handheld | print |
projection | screen | tty | tv | embossed
 Merkmal: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| aspect-ratio | min-aspect-ratio | max-aspect-ratio
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid

Das Layout reagiert auf die Fensterbreite: Ist nicht mehr genügend Platz vorhanden, wird die Seite einspaltig (Abb. 2).

Die jeweiligen Ausgabemedien und – geräte verfügen über unterschiedliche Merkmale, über die Webdesigner die Anwendung von CSS einschränken können. Die Tabelle „Medienmerkmale, ...“ listet alle Merkmale auf, die in der aktuellen W3C Candidate Recommendation [a] aufgeführt sind. <Integer>, <Länge>, <Seitenverhältnis> und <Auflösung> sind Schlüsselworte. <Integer> steht für eine natürliche Zahl, <Länge> für eine Dezimalzahl mit Einheit, zum Beispiel 400px oder 7.5em. <Seitenverhältnis> repräsentiert eine Angabe in der Form <Integer>, Schrägstrich (/), <Integer>, beispielsweise 4/3 oder 16/9. <Auflösung> steht für eine Dezimalzahl, direkt gefolgt von der Einheit dpi oder dpcm, etwa 72dpi.

Viele der Merkmale kann man mit den Präfixen min- und max- notieren; min- entspricht „größer oder gleich“, max- „kleiner oder gleich“ dem angegebenen Wert.

Medienmerkmale, erlaubte Werte, Anwendungsbereiche
Merkmal Werte Medientypen min/max Beschreibung
aspect-ratio <Seitenverhältnis> Bitmap ja Verhältnis der Merkmale width und height
color <Integer> visuelle ja Farbtiefe des Geräts
color-index <Integer> visuelle ja Anzahl der Einträge in der Farb-Lookup-Tabelle des Geräts
device-aspect-ratio <Seitenverhältnis> Bitmap ja Verhältnis der Merkmale device-width und device-height
device-height <Länge> visuelle und taktile ja Höhe des Geräts
device-width <Länge> visuelle und taktile ja Breite des Geräts
grid <Integer> visuelle und taktile nein Grid oder Bitmap
height <Länge> visuelle und taktile ja Höhe der Anzeigefläche
monochrome <Integer> visuelle ja Anzahl der Bits pro Pixel im Bildspeicher eines einfarbigen Geräts
orientation portrait, landscape Bitmap nein Ausrichtung des Geräts
resolution <Auflösung> Bitmap ja Auflösung des Geräts
scan interlaced, progressive TV nein Zeilensprungverfahren oder progressive Abtastung
width <Länge> visuelle und taktile ja Breite der Anzeigefläche

width beschreibt die Breite der Anzeigefläche des Benutzerprogramms, beispielsweise die des Viewport eines Browserfensters, height entsprechend die Höhe. Folgendes Stylesheet wird nur geladen, wenn der Viewport mindestens 500px hoch ist:

<link rel="stylesheet" type="text/css" href= 
"vertical-align.css"
media="screen and (min-height: 500px)" />

device-width beschreibt die Breite des Geräts, beispielsweise des Monitors, height wiederum die Höhe. Folgendes Stylesheet kommt auf einem iPhone zur Anwendung, dessen Bildschirmauflösung 480 x 320 Pixel beträgt (in der horizontalen Ansicht):

<link rel="stylesheet" type="text/css" 
href="iphone.css"
media="only screen and (max-device-width:
480px)" />

aspect-ratio gibt das Verhältnis der Merkmale width und height zueinander an, device-aspect-ratio das der Merkmale device-width und device-height. Angenommen, ein Computerbildschirm hat eine Auflösung von 1280 x 720 Pixel, was einem Seitenverhältnis von 16:9 entspricht, dann würden unter anderem folgende Media Queries das Gerät ansprechen:

screen and (device-aspect-ratio: 16/9)
screen and (device-aspect-ratio: 32/18)
screen and (device-aspect-ratio: 1280/720)

orientation vergleicht die Merkmale height und width miteinander: Wenn height größer oder gleich width ist, hat das Merkmal den Wert portrait, andernfalls landscape.

Über die link-Elemente in Listing 2 können Webautoren spezielle Stylesheets für die Darstellung auf dem iPad bereitstellen – die Auflösung beträgt 1024 x 768 Pixel. Abhängig davon, wie das Gerät in der Hand liegt, wird entweder das Stylesheet ipad-portrait.css geladen oder ipad-landscape.css. Letzteres dient zudem der Darstellung auf Bildschirmen anderer Geräte mit einer Auflösung von mehr als 1024 Pixeln.

Mehr Infos

Listing 2: Stylesheets fürs iPad

 <link rel="stylesheet" type="text/css" href="ipad-portrait.css"
media="(min-device-width: 481px) and (max-device-width: 1024px)
and (orientation: portrait)" />
 <link rel="stylesheet" type="text/css" href="ipad-landscape.css"
media="(min-device-width: 481px) and (max-device-width: 1024px)
and (orientation: landscape)" />
 <link rel="stylesheet" type="text/css" href="ipad-landscape.css"
media="(min-device-width: 1025px)" />

Aktuelle Browser unterstützen CSS Media Queries schon heute gut, lediglich Nutzer des Internet Explorer müssen sich noch eine Weile gedulden.

Opera kann seit Version 8 mit Media Queries umgehen. Aktuelle Versionen, basierend auf der Rendering-Engine Presto, unterstützen Media Queries fast vollständig, sowohl mobile als auch Desktop-Versionen. Eine aktuelle Übersicht der unterstützten Standards stellt Opera auf der Seite Web specifications support bereit. Firefox kann seit Version 3.5 (Gecko 1.9.1) mit Media Queries umgehen. Mit Version 3.6 (Gecko 1.9.2) kamen einige proprietäre Medienmerkmale hinzu, die nicht Teil der derzeitigen Candidate Recommendation sind.

Safari bietet einen umfangreichen Media-Queries-Support, was Webautoren nutzen können, um mobile Geräte wie iPhones und iPads anzusprechen. Safaris Rendering-Engine WebKit kommt außerdem in Googles Chrome zum Einsatz, daher ist die Media-Queries-Unterstützung in diesem Browser nahezu identisch mit Safari. Der Internet Explorer kann bis Version 8 nicht mit Media Queries umgehen, erst im Rahmen der Arbeit am IE 9 zieht Microsoft nach. Wenn es nach den im Testing Center veröffentlichten Tests geht, wird der IE 9 Media Queries umfangreich unterstützen.

leitet den Bereich Webentwicklung bei der itemis AG in Lünen. Er ist Buchautor, schreibt Fachartikel und spricht auf Konferenzen. Nicht nur als Webkraut setzt er sich für Webstandards ein.

[1] Michael Jendryschik; Vom Großen zum Kleinen: EBNF: die erweiterte Backus-Naur-Form verstehen; iX 2/2004, S. 116

iX-Link: www.ix.de/ix100912

Mehr Infos

iX-Tract

  • Version 3 der Cascading Stylesheets enthält ein Modul, mit dessen Hilfe Webdesigner die Auslieferung des Inhalts von der Art des anfragenden Geräts abhängig machen können.
  • Außer zwischen Bildschirm und Handheld zu unterscheiden, kann man das Stylesheet etwa nach Größe des Displays oder dessen Ausrichtung (hoch oder quer) auswählen.
  • Viele Browser können schon heute Media Queries verarbeiten, der Internet Explorer soll mit Version 9 nachziehen.

(hb)