Als ich kürzlich meine Testsuite zur Anwendbarkeit von CSS Media Queries ergänzte, viel mir wieder ein das es ja einen Entwurf für die nächste Fassung der Media Query W3C Recommendation gibt. Daher habe ich für die zusätzlichen Features in diesem Dokument ebenfalls Tests ergänzt.

Media Queries Level 4

Was gibt es neues? Mit dem neuen Entwurf lässt sich der Unterschied zwischen Maus- und Touchscreenbedienung, die Updatefrequenz des Displays, die Umgebungsbeleuchtung und die Scriptingfähigkeit des Browsers berücksichtigen. Irgendwie funktioniert davon aber nur die Abfrage des Pointers-Devices und der Fähigkeit zu hovern. Beides funktioniert bislang im Chrome, wenn auch sonst nirgends.

Pointer-Devices sind Mäuse, Touchscreens und solcherart Eingabegeräte. Die Spezifikation unterscheidet dabei genaue und ungenaue Pointer oder aber gar keiner. Mäuse sind dabei ein typisches genaues Zeigergerät und ein Touchscreen wird als relative ungenau angesehen. Das Problem das ich hier sehe sind Geräte die sowohl über Maus als auch über einen Touchscreen verfügen. Dies lässt sich nicht abfragen da immer nur ein Wert angenommen werden kann.

@media only all and (pointer: fine) { … }

Die zweite Sache die zu mindestens im Chrome funktioniert ist die Abfrage der Fähigkeit Elemente zu hovern. Mit drei diskreten Werten hover, on-demand und none lässt sich erfragen ob das hovern von Elementen möglich ist (hover), nur möglich ist mit einer speziellen Aktion des Benutzers (on-demand) oder nicht möglich ist (none). In der Realität funktioniert aber keiner der Werte. Stattdessen verwendet man in Chrome den Wert 0 um auszudrücken das hovern nicht möglich ist. Die beiden anderen Werte aus der Spezifikation haben in Chrome kein Äquivalent.

@media only all and (hover: none) and (hover: 0) { … }

Internet Explorer 11 Height Contrast

Als Ergänzung habe ich auch noch einen Test hinzugefügt der eine proprietäre Funktion des Internet Exploreres 11 betrifft. Man kann Windows mit einem Farbschema konfigurieren das einen besonders hohen Kontrast aufweist. Der Internet Explorer ermöglicht seit Version 11 ein solches Farbschema im Layout zu berücksichtigen. Das proprietäre Media Feature -ms-high-contrast ermöglicht es das Layout einer Webseite ebenfalls mit hohem Kontrast zu gestalten wenn dies nötig ist.

@media screen and (-ms-high-contrast: active) { … }

Für das Feature gibt es 4 Werte: none, active, black-on-white und white-on-black. Damit lässt sich erkennen ob ein Farbschema mit hohem Kontrast eingestellt ist (active), oder etwas genauer, ob schwarzer Text auf weißem Grund (black-on-white) oder weißer Text auf schwarzem Grund (white-on-black) konfiguriert ist.