Zusammenfassung

  • Am 4. April 2001 veröffentlichte das W3C den ersten Working Draft für Media Queries. HTML4 und CSS2 kannten bereits Medientypen wie screen und print; der Entwurf fügte gezielte Fragen zur Umgebung hinzu.
  • Auf die Candidate Recommendation vom 8. Juli 2002 folgte die Recommendation vom 19. Juni 2012. Ausdrücke für Breite, Höhe und Farbe konnten die Darstellung eines einzigen Dokuments steuern.

Die Reportage trug drei Spalten und war im großen Fenster sehr zufrieden mit sich. Sobald die Redakteurin das Fenster schmaler zog, begannen die Spalten um Ellenbogenfreiheit zu streiten. Die Überschrift musste weichen, die Navigation stand im Weg. Aus dem Drucker kam die nächste Beschwerde: Auf Papier braucht niemand eine ausladende Klickleiste. Der Text hatte nichts angestellt. Nur sein Anzug war in einer einzigen Größe geschneidert.

Der erste W3C Working Draft vom 4. April 2001 begann mit einem bestehenden Werkzeug. HTML4 und CSS2 konnten zwischen screen und print unterscheiden. Damit bekam Papier bereits andere Stilregeln als ein Bildschirm. Doch zwei Bildschirmfenster können sehr verschieden breit sein. Beide schlicht „screen“ zu nennen, ist ungefähr so hilfreich, wie dem Schneider als Maß „Erwachsener“ zu geben.

Media Queries ließen das Stylesheet genauer nachfragen. Breite, Höhe, Farbe und Auflösung konnten als Merkmale der Umgebung in Bedingungen stehen. min-width konnte Raum für eine Anordnung verlangen; max-width konnte eine andere bei weniger Platz aufrufen. Auch die Papierbreite spielte in den Beispielen mit. Der Browser kennt den Ort, an dem gelesen wird. Der Autor schreibt die Bedingungen und die dazugehörigen Stilregeln.

Eine dreispaltige Geschichte macht die Wirkung sichtbar. Im großen Fenster stehen Foto, Artikel und Zusatzkasten nebeneinander. Wird es enger, wandert der Kasten nach unten, die Überschrift erhält wieder Platz. Auf Papier kann die Bildschirmnavigation gehen und der Text seine Zeilen ordentlich setzen. Die Redaktion muss dafür keine drei Geschichten verfassen. Sie entscheidet über drei Anordnungen derselben Geschichte.

Die Candidate Recommendation vom 8. Juli 2002 brachte das Modell im Standardisierungsprozess weiter. „Candidate“ ist hier eine genaue Stufe. Das Wort bescheinigt keine gleichzeitige Unterstützung durch alle Browser des Jahres 2002. Der Mechanismus blieb klar: feinere Bedingungen für die Präsentation bei gemeinsamem Inhalt.

Mit der W3C Recommendation vom 19. Juni 2012 gab es eine abschließende Referenz für diese Fassung. Ein Medientyp kann null oder mehr Merkmalsausdrücke erhalten. Breite, Höhe und Farbe gehören dazu; die Beispiele verwenden min-width und max-width für Bereiche und behandeln auch gedruckte Seiten. Eine Schwelle sollte dort liegen, wo der Inhalt anfängt zu klemmen. Wer sie nach dem Namen eines gerade beliebten Geräts setzt, überlässt die Seitengestaltung dem Schaufenster.

Die Maße haben eine kleine Falle. px bezeichnet in der Query CSS-Pixel, keine physisch abgezählten Bildpunkte. Ein dichtes Display kann viel mehr Leuchtpunkte besitzen, als die Layoutbreite in CSS-Pixeln vermuten lässt. Für die Frage, ob eine Spalte passt, zählt die Breite, mit der das Layout rechnet. Die Zahl auf der Geräteverpackung ist kein brauchbares Schnittmuster.

Die Recommendation legt außerdem only, not und den Umgang mit unbekannten Merkmalen fest. Sie erwartet, dass User Agents bei Änderungen der Umgebung Queries neu prüfen und die Seite neu anordnen, macht jede unmittelbare Reaktion aber nicht zur unbedingten Pflicht. Deshalb gehört zur Arbeit am Stylesheet auch das Anprobieren: Fenster verändern, Druckansicht öffnen, den tatsächlichen Browser betrachten. Eine gültige Regel kann immer noch eine schlechte Jacke auswählen.

Die Macht ist dabei sinnvoll verteilt. Die Redaktion legt fest, wann die Spalten umziehen und wie die Druckseite aussieht. Der Browser misst die Umgebung des Lesers und entscheidet, welche Bedingung zutrifft. Der Leser kann das Fenster verschieben und die Wahl sofort beurteilen. Die Reportage blieb dieselbe; CSS hatte endlich eine Garderobe mit mehr als einem Bügel.