zurück zum Artikel

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.

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" /> 

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 [1] 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.

Einsatz von link und @media

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>
 

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 [2]. 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.

Verknüpfung von Medientyp und -merkmal

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.

Mehrere Queries kombinieren

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)" /> 

Queries negieren und verstecken

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.

 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 

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.

Abhängig von Breite und Höhe ausliefern

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.

 <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)" /> 

Fazit: Wie weit Browser schon sind

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 [3] 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.

Michael Jendryschik

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

[5]Literatur

[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 [6]

(hb [7])

URL dieses Artikels:
https://www.heise.de/-1058764

Links in diesem Artikel:
[1] http://www.w3.org/TR/css3-mediaqueries/
[2] http://www.alistapart.com/articles/responsive-web-design/
[3] http://www.opera.com/docs/specs/
[4] http://www.itemis.de
[5] 
[6] http://www.ix.de/ix100912
[7] mailto:hb@ix.de

Copyright © 2010 Heise Medien