media-queries

CSS3 Media-Queries Anwendungsbeispiel

Bereits mit CSS2 konnte man bestimmte Media-Typen als Ausgabegeräte ansprechen und ihnen unterschiedliche Style-Angaben zuweisen. Ein zu druckendes Dokument sollte in der Regel den jeweiligen Artikel mit Überschrift und -text enthalten, nicht aber alle anderen sicht- (oder unsicht-)baren Elemente der Webseite wie Navigation, Werbung, etc.

Ich habe hier meist media=“print“ für die Druck- und media=“screen“ für die Bildschirmausgabe eines HTML-Dokumentes gebraucht. Mit zunehmender Zahl an mobilen Endgeräten wurde auch media=“handheld“ populärer. Aber schon hier fingen die Komplikationen an, da natürlich nicht alle mobilen Endgeräte sich als „handheld“ outen oder gar die entsprechenden Anweisungen verstehen wollten.

Grundsätzlich verfügbar waren neben den genannten Media-Typen auch „all“, „braille“, „projection“, „tty“, „tv“, „embossed“ und „speech“.

Mit CSS3 Media-Queries haben wir nun die Möglichkeit, gezielt auf Mediengrössen und Ausrichtungen der jeweiligen Endgeräte zu servieren.

Im Wesentlichen schaut man bei einem Endgerät auf die im Browser zur Verfügung stehende Breite oder Höhe eines Viewports (Angaben in der Regel in Pixel, px), also die Breite oder Höhe des jeweiligen (Browser-)Fensters oder die Auflösung des Bildschirms z. B. bei Smartphones und Tablets. Auch die Ausrichtung „landscape“ (Querformat) und „portrait“ (Hochformat) ist greifbar. Dies ist gerade für pad bzw. Tablets wichtig.

Ich möchte hier und heute noch gar nicht weiter auf die Möglichkeiten und deren Anwendung eingehen.

Wichtig für mich war es am Anfang, das Thema „vor die Augen“ also visualisiert zu bekommen. Zu sehen, was passiert, wenn ich das Browserfenster kleiner und größer mache oder wenn ich meinen 22″ Bildschirm auf die Seite stelle, das Pad drehe …

Im Netz gibt es viele tolle Beispielseiten, die genau dies tun.
Wer verstehen will, muss selber (nach-)machen, finde ich. Also habe ich mir mein eigenes Visualisierungsbeispiel nachgebaut. Dieses recht einfache Beispiel zeigt unterschiedliche Hintergrundfarben bei unterschiedlicher Breite des Viewports. Es lässt sich aber auch schnell erweitern oder verschönern. Unterschiedliche Hintergrundbilder an unterschiedlichen Positionen, etc., Probieren geht hier teils über Studieren. Anwenden ist sehr wichtig, da es, wie ich finde, ein interessantes und (ge-)wichtiges Thema innerhalb der neuen Möglichkeiten von CSS3 ist.

Hier meine Übungsdatei (und ich kann heute noch begeistert 😀 Minuten lang die Grösse des Browserfensters ändern. „Entdecke was möglich ist“, hier ist wieder einmal der Spieltrieb geweckt):
http://www.css3.de/spielwiese/media-queries/index.html

Baut euch am besten selbst eure eigene Datei nach, wer nicht viel tippen, sondern doch mehr ausprobieren will, findet bei www.andilicious.com eine schöne Vorlage für viele unterschiedliche Endgeräte.