Media Queries

Media Queries (deutsch: Medienabfragen) ordnen ein CSS Stylesheet einem Ausgabemedium zu und bestimmen dadurch, wie eine dazugehörige HTML-Datei auf verschiedenen Ausgabemedien dargestellt werden soll. So können durch bestimmte Merkmale, die in dem Stylesheet notiert werden, optimale Darstellungsvarianten für verschiedene Ausgabetypen wie Mobilfunk-Telefone, Tablets oder unterschiedliche Bildschirmformate ausgewählt werden.

Allgemeine Informationen

Media Queries sind ein wichtiger Teil von CSS3, der es Programmierern erlaubt, responsive Websites zu erstellen, die auf unterschiedlich großen Bildschirmen korrekt dargestellt werden. Korrekt bedeutet hier, dass der Inhalt nicht geändert wird, sondern die Art der Ausgabe bzw. der Darstellung. Im Zuge der Verbreitung von mobilen Endgeräten haben sich auch die Darstellungsformate grundlegend geändert. Bildschirme von Smartphones sind wesentlich kleiner als die von Desktop Computern. Auch Tablets, PDAs und Netbooks weisen verschiedene Größen der Screens auf.

Um für alle Darstellungsformate optimale Auszeichnung mittels CSS treffen zu können, werden vor dem Laden einer Website die Medieninformationen mit Media Queries abgefragt. Dabei ist es nicht notwendig, für jedes einzelne Gerät die passende Bildschirmgröße zu notieren, sondern vielmehr können Typen von Geräten, Mediafeatures sowie sogenannte Breakpoints gesetzt werden. Das Endgerät lädt dann den richtigen Teil der CSS Datei automatisch und zeigt den Inhalt so an, wie es die Größe des Bildschirms erlaubt.

Funktionen

Grundsätzlich bestehen Abstände aus einem Mediatype und optional auch aus mehreren Mediafeatures wie width, height oder color, um bestimmte Ausgabemerkmale für unterschiedliche Medien zu bestimmen. Media Queries können für unterschiedliche Gerätetypen im HTML-Dokument über das Tag eingebunden werden. Dazu muss neben den notwendigen Standardangaben der Wert screen zu dem Attribut media notiert werden. Wird dort nichts angegeben, gilt der Standardwert all.

<link rel="stylesheet" type="text/css"      href="style.css" media="screen" /> 

Mögliche Werte

• all: alle Geräte
• handheld: PDAs oder Mobiltelefone mit kleinen Bildschirmen
• print: Drucker
• tv: Fernseher oder ähnliche Geräte
• aural: Sprachbrowser, die den Text der Webseite vorlesen (Es gibt auch Befehle für Blindenschrift bzw. Brailledrucker)
• projection: Projektoren und ähnliche Geräte
• screen: Herkömmlicher Computer Bildschirm

Zudem können Media Queries in eine eigene CSS-Datei geschrieben werden. Hier werden allgemeine und abweichende CSS-Regeln mit @media print {} oder @media handheld{} definiert. Diese Variante hat den Vorteil, dass das Endgerät des Nutzers nur eine CSS-Datei laden muss. Es ist ohnehin empfehlenswert, HTML und CSS grundsätzlich voneinander zu trennen.

Breakpoints

Ein anderes Konzept ist das der Breakpoints. Hier werden nicht Medientypen notiert, sondern bestimmte Pixelgrößen, die für die Anzeige auf unterschiedlichen Endgeräten einen Fluchtpunkt bieten. Verwendet das Gerät eine bestimmte Anzahl von Pixeln, wird der Inhalt entsprechend dargestellt. So wird für 320 bis 759 Pixel ein einspaltiges Layout gewählt, das auch auf Handys angezeigt werden kann, während Tablets mit 760 bis 979 zwei Spalten darstellen können.

Wie viele Breakpoints gesetzt werden, ist dem Programmierer überlassen. Breakpoints können sowohl in der HTML- als auch in der CSS-Datei gesetzt werden.

Bedeutung für die Suchmaschinenoptimierung

Media Queries sind essentiell, wenn es um eine möglichst breite Nutzerschicht geht. Nutzer verwenden heutzutage verschiedene Endgeräte, um zu surfen, online einzukaufen oder verschiedene Services zu nutzen. Zur mobilen Optimierung gehören Media Queries schon alleine deshalb, weil auf diese Weise der Inhalt einer responsiven Website richtig angezeigt wird. Ist das nicht der Fall, sind Nutzer schnell abgeneigt und verlassen die Website, die sie mit ihrem mobilem Endgerät versucht haben zu erreichen.

Weblinks

• Ausführlicher Artikel für Media Queries bei mobilen Websites
• Media Queries: Übersicht
• Anwendungsbeispiele mit Quellcode
• Media Queries in CSS3: Spezifikation
• Beispiele für responsive Websites mit Media Queries