ist ein vom W3C vorgestellte Empfehlung für die Abfrage von Eigenschaften der darstellenden Media-Typen mit Hilfe von CSS.
CSS Level 3 (CSS3) wird von der CSS Working Group in eigenständigen Modulen entwickelt, um zukünftige Anforderungen schneller einarbeiten zu können. Für Media Queries werden die mit CSS 2.0 vorgestellten Media-Typen um die Möglichkeit erweitert, Eigenschaften abzufragen. So können Formatvorlagen bereitgestellt werden, die die technischen Spezifikationen des darstellendes Gerätes optimal unterstützen.
Dies wird besonders bei mobilen Geräten benötigt, da z. B. Smartphones Displays in verschiedensten Größen besitzen. Durch die Abfrage dieser Werte kann die Web-Inhalte so besser angepasst werden, indem Vorlagen für verschiedene Größen angegeben werden können. Obwohl der Status des Dokumentes erst Candidate Recommondation (dt.: Standardanwärter) ist, unterstützen bereits die meisten Browser für moderne Smartphones und Tablet-PCs die beschriebenen Techniken.
Realisiert wird die Abfrage über den bekannten Meta-Tag link
, dessen Inhalt die Abfrageparameter zu den Eigenschaften enthält. Über <link rel="stylesheet" type="text/css" href="<datei>" content="<mediaquery>" />
können die Eigenschaften des darstellenden Gerätes abgefragt werden und das Anwenden der Vorlagendatei gesteuert werden.
Eigenschaften, die verwendet werden können, sind u. a. height
(Höhe) und width
(Breite) für das Browser-Fenster, device-height
und device-width
für die Auflösung des Gerätedisplays sowie color
(Farbe) bzw. monochrome
(einfarbig) für Eigenschaften des Displays. Durch das Hinzufügen von only
(nur) kann präzisiert werden, dass die Angaben nur für diesen Media-Typ ist, mit and
(und) können Eigenschaften verknüpft werden sowie mit not
(nicht) kann ein Media-Typ oder eine Eigenschaft ausgeschlossen werden.
Die Unterstützung für CSS durch die modernen Browser ist sehr unterschiedlich (a). Teilweise werden Elemente aus CSS3 bereits unterstützt, während Elemente aus CSS2 noch fehlen.
Beispiel
<link rel="stylesheet" type="text/css" href="beispiel.css"
media="only screen and (max-device-width=480px) and (color)" />
Im Beispiel würden die Formatvorlagen in der Datei beispiel.css nur angewendet, wenn das Display des Gerätes eine maximale Auflösung von 480 Pixel im Hochformat besitzt und Farben unterstützt.
Kleine! Tools
MeTAGenerator 4.0β - ein kleiner! Mega-Tag-Generator
W3C - Technical Reports
{Media Queries
- http://www.w3.org/TR/css3-mediaqueries/} (CR)
Weiterführende Links
{Cascading Style Sheets home page
- http://www.w3.org/Style/CSS/}
@ W3C
(a) {Comparison of layout engines (Cascading Style Sheets)
- http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29}
@ en.Wikipedia.org