Ein kleines! Lexikon des Internet Werbung

Media Queries @ Ein kleines! Lexikon des Internet


Erklärung | W3C-Standards | Weiterführende Links | Finden | Navigation

Ansichten: Bildschirm   Druck   ohne

Media Queries

ist ein vom W3C vor­ge­stellte Empfehlung für die Ab­frage von Eigen­schaften der dar­stellenden Media-Typen mit Hilfe von CSS.
CSS Level 3 (CSS3) wird von der CSS Working Group in eigen­ständigen Modulen entwickelt, um zukünftige An­for­de­rungen schneller ein­arbeiten zu können. Für Media Queries werden die mit CSS 2.0 vorgestellten Media-Typen um die Mög­lich­keit erweitert, Eigen­schaften abzu­fragen. So können Format­vor­lagen bereit­ge­stellt werden, die die tech­ni­schen Spe­zi­fi­ka­tionen des dar­stel­lendes Gerätes optimal unter­stützen.

Dies wird besonders bei mobilen Geräten benötigt, da z. B. Smart­phones Displays in ver­schieden­sten Größen besitzen. Durch die Abfrage dieser Werte kann die Web-Inhalte so besser ange­passt werden, indem Vorlagen für verschiedene Größen angegeben werden können. Obwohl der Status des Do­ku­mentes erst Candidate Recommondation (dt.: Standardanwärter) ist, unterstützen bereits die meisten Browser für moderne Smart­phones und Tablet-PCs die beschriebenen Techniken.

Realisiert wird die Abfrage über den bekannten Meta-Tag link, dessen In­halt die Ab­fra­ge­pa­ra­meter zu den Eigen­schaften enthält. Über <link rel="stylesheet" type="text/css" href="<datei>" content="<mediaquery>" /> können die Eigen­schaften des dar­stel­lenden Gerätes ab­ge­fragt werden und das Anwenden der Vor­lagen­datei 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 Auf­lösung des Geräte­displays 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 mo­der­nen Browser ist sehr un­ter­schied­lich (a). Teil­weise wer­den Ele­men­te aus CSS3 be­reits unter­stützt, während Ele­mente 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