Media Queries Level 4: Pointer optimiert Websites für Zeigegeräte

Dank Media Queries lässt sich eine Website unter anderem für verschiedene Auflösungen und Geräteorientierungen gestalten. So ist es möglich, für nahezu alle Geräte ein optimales Aussehen bereitzustellen. Eine Sache konnte bislang jedoch nicht berücksichtigt werden, nämlich das Zeigegerät beziehungsweise der Pointer. Zwar darf man sich bei kleinen Auflösungen relativ sicher sein, dass es sich um ein Smartphone mit entsprechender Gestensteuerung handelt; zwischen gestengesteuerten Tablets und mausgesteuerten Desktoprechnern zu unterscheiden, war mit den gängigen Media-Query-Methoden jedoch nicht möglich. Dabei ist die Unterscheidung zwischen Gestensteuerung und Maus nicht unwichtig. Per Maus kann wesentlich genauer gesteuert werden als per Finger. So sind einfache Textlinks am Desktoprechner kein Problem, während man auf Smartphones und Tablets teils etwas Geschick benötigt, um einen solchen Link zu treffen. Dank des neuen Pointer-Media-Querys aus der Spezifikation Media Queries Level 4 kann man nun das Design einer Website speziell für das verwendete Zeigegerät anpassen.

Pointer erkennt Genauigkeit der Eingabe

Statt das Zeigegerät eines Gerätes konkret zu erkennen – zum Beispiel Maus oder Gestensteuerung per Touchdisplay – unterscheidet das Pointer-Media-Query die Genauigkeit der Eingabe. So gibt es den Wert „fine“, der für ein hohes Maß an Genauigkeit steht. Gemeint ist damit vor allem die Maus. Aber auch Geräte mit Touchpads und Eingabestiften werden den Wert „fine“ ausgeben.

Der mittlere Wert „coarse“ definiert eine grobe Genauigkeit, was vor allem bei der Steuerung per Fingergesten zutrifft. Das ist bei den meisten Smartphones und Tablets der Fall, aber auch bei einigen Konsolen wie der Wii. Diese werden per Spielecontroler gesteuert, die ebenfalls keine hohe Genauigkeit aufweisen. Als letztes gibt es noch den Wert „none“; in diesem Fall existiert kein Zeigegerät. Das Gerät wird also ausschließlich per Tastatur bedient.

Anwendung des „pointer“-Features

Innerhalb eines Stylesheets wird das „pointer“-Feature über die „@media“-Regel angegeben. Darin lassen sich dann beliebige CSS-Eigenschaften definieren, die beim Zutreffen des angegebenen Pointers angewendet werden.

@media (pointer: coarse) {
  input {
    padding 10px;
    font-size: 20px;
  }
}

Im Beispiel zeichnen wir per „@media“-Regel ein Abschnitt für Geräte mit grobem Zeigegerät aus. Darin definieren wir Eigenschaften für das „<input>“-Element. Diese sorgen dafür, dass alle Eingabefelder auf Smartphones und Tablets mit größerer Schrift und einem größeren Innenabstand versehen werden. So sind diese Eingabefelder per Fingergeste leichter zu erreichen.

Verschiedene Pointer können wir auch in einer Regel zusammenfassen. So ist es möglich, CSS-Eigenschaften für Geräte mit grober und hoher Genauigkeit zu definieren.

@media (pointer: coarse) and (pointer: fine) {
  …
}

Im Beispiel schließen wir alle Geräte aus, die ohne Eingabezeiger auskommen – also beispielsweise solche, die ausschließlich per Tastatur bedient werden.

„any-pointer“ und Geräte mit mehreren Zeigegeräten

Nicht jedes Gerät hat ausschließlich einen Pointer. Viele Tablets und Smartphones haben Eingabestifte und viele Desktoprechner und Notebooks besitzen mittlerweile Touchdisplays. Dadurch wird es schwierig, das „richtige“ Layout für eine Website auszugeben. Da man letztendlich nicht weiß, wie der jeweilige Nutzer die Website bedient, muss man sich zwangsläufig für eine Variante entscheiden.

Dank des „any-pointer“-Features ist es zumindest möglich, herauszufinden, ob unter den gegebenenfalls verschiedenen Zeigegeräten ein bestimmtes vorhanden ist. „any-pointer“ kennt dieselben drei Werte, die auch „pointer“ kennt.

@media (any-pointer: coarse) {
  …
}

Die „@media“-Regel im Beispiel wird also dann ausgeführt, wenn der Rechner mindestens ein Zeigegerät mit grober Genauigkeit unterstützt. Während „any-pointer“ erkennt, ob eines der Pointer eine gewisse Genauigkeit besitzt, erkennt „pointer“ immer nur für den primären Zeiger die Genauigkeit. Welcher das ist, hängt vom Gerät ab.

Auch wenn „pointer“ und „any-pointer“ vom Prinzip her nicht geeignet sind, auf bestimmte Geräte zu schließen, kann vor allem in Kombination mit der Displaybreite sehr gut erkannt werden, ob jemand per Smartphone, Tablet oder Desktoprechner unterwegs ist. Es wird zukünftig also noch genauer möglich sein, eine Website für bestimmte Geräte zu optimieren.

Browsersupport

Derzeit wird das „pointer“-Feature nur von Chrome ab Version 38 unterstützt. Das „any-pointer“-Feature wird sogar nur von Nightly-Builds des Chrome-Browsers unterstützt. Andere Browser können mit dem Pointer-Media-Query im Moment noch gar nichts anfangen.

Man sollte also in jedem Fall ein allgemein gültiges Layout jenseits des „pointer“-Features platzieren und innerhalb dieses Media-Query nur etwaige Layoutanpassungen vornehmen. So kann man sicher sein, dass der Browser zumindest das Grundlayout anzeigt.

(dpe)