Microsoft hat für sein neues Dual-Screen-Gerät Surface Duo eine Erweiterung für CSS und Javascript veröffentlicht. Wobei, veröffentlicht ist leicht übertrieben: Die neuen Funktionen verbergen sich noch im Experimentierbereich des Browsers Edge.

CSS

Mit dem neuen Media-Feature screen-spanning lässt sich auf Geräten mit zweigeteiltem Display ein spezielles Styling anwenden. Momentan kann man damit zwischen vertikal oder horizontal geteilten Displays unterscheiden. Das Feature ist mir für meine Testseite zu Media Queries endlich mal was neues und wurde daher auch gleich eingebaut. Beim ausprobieren aber nicht vergessen die experimentellen Features zu aktivieren (edge://flags/#enable-experimental-web-platform-features)

Das erkennen von betroffenen Geräten ist ein erster Schritt. Um die Position und besonderst die Breite des Bereichs zwischen den Displayteilen in seinem Stylesheet berücksichtigen zu können gibt es zusätzlich neue Variablen mit denen es möglich ist die Aufteilung der eigenen Inhalte auf die Teile des Displays zu organisieren. Ich hab das für die oben erwähnte Testseite auf Basis eines Gridlayouts beispielhaft gemacht. Aber auch hier sind die Möglichkeiten auf den einfachen Fall eines zweiteiligen Displays beschränkt.

@media all and (screen-spanning: single-fold-vertical) {
  body {
    display: grid;
    grid-template-areas:
        "header nav"
       	"main nav"
        "main aside"
       	"main footer";
    grid-template-columns: env(fold-left) calc(100% - env(fold-left) - env(fold-width));
    grid-template-rows: auto auto 1fr auto;
    grid-gap: 0px env(fold-width);
  }
}

Javascript

Parallel zu CSS gibt einem Microsoft auch die Möglichkeit mittels Javascript auf die Teilung von Displays zuzugreifen. Hierbei wurde mit der Window Segments Enumeration API aber ein flexiblerer Ansatz gewählt der gut für verschiedenste Anordnungen von beliebig vielen Displays klar kommen sollte. Eine Einschränkung besteht konzeptionell lediglich darin das die Displays rechteckig sein müssen. Das liegt daran das die Beschreibung eines Teils der Anzeigefläche über einen Punkt (links oben) und einer Breite und Höhe geschieht. Diese Informationen kann man den Einträgen eines Arrays entnehmen das man wiederum mit window.getWindowSegments() erhält.

Fazit

Die Möglichkeiten im Styling mittels CSS sind noch beschränkt auf den einfachsten Fall, trotzdem ein pragmatischer Ansatz für die aufkommende Geräteklasse mit geteilten oder faltbaren Displays. Im Bereich Javascript gibt es diese Einschränkung nicht.

Ich hätte mir aber gewünscht das die Implementierung nicht nur mobile Geräte wie das Surface Duo unterstützen würde. Auch bei Desktops gibt es durchaus Multimonitorkonfigurationen die sich in der Window Segments Enumeration API niederschlagen könnten sobald sich ein Browserfenster über mehrere Monitore erstreckt.