Was ich bei macOS vermisse: Window Snapping

Seit ein paar Monaten bin ich nun stolzer Besitzer eines MacBook Pro und nutze seitdem auch hauptsächlich nicht mehr Windows sondern macOS.

Auch wenn mir das Betriebssystem an sich sehr gut gefällt (vor allem auch vom Optischen her), gibt es eine Sache die ich besondern von Windows vermisse. Diese Feature wurde erstmals mit Windows 7 integriert und nennt sich „Aero Snap“. Hierbei kann man ein Fenster ganz einfach per Drag-and-Drop an eine Bildschirmkante ziehen und das Fenster wird automatisch an die jeweilige Seite „angedockt“. Auf diese Weise wird Multitasking deutlich vereinfacht, da so Fenster schnell und einfach nebeneinander angeordnet werden können.

Mit dem Split View bietet macOS zwar ein ähnliches Feature, ist in meinen Augen aber nicht ganz das Gleiche. Beim Split View können lediglich zwei Fenster gleichzeitig sichtbar sein, beide werden dann auf eine eigene Arbeitsfläche ausgelagert und beide befinden sich quasi im Vollbildmodus.

Durch Dritthersteller-Apps lässt sich „Snapping“ übrigens auch bei macOS realisieren. Vor allem Magnet ist sehr beliebt und auch habe es bei mir installiert und nutze es ständig. Es ist besser als gar nichts, funktioniert aber leider nicht genau so schön wie Snapping unter Windows.
Zum Beispiel ist die Geste, das zum Maximieren, das Fenster an den oberen Bildschirmrand zu ziehen. Hier kommt es oft zu Irritationen, da die Geste ein Fenster in einen anderen Arbeitsraum zu ziehen ähnlich ist.

Wie ihr Frosted Glass fürs Web nutzen könnt

Der sogenannte Frosted Glass-Effekt (oder von Microsoft auch Acrylic genannt) ist momentan sehr angesagt. Ich habe auch schon mal ein Video produziert, in dem ich gezeigt habe wie ihr den Effekt mit CSS erzeugen könnt. Leider gibt es mit dieser Technik noch ein paar Probleme, wodurch man sie noch nicht wirklich produktiv einsetzen kann.

Ein Problem ist, dass für die Technik immer ein Hintergrundbild definiert werden muss. Das setzt aber voraus, dass zwischen dem Element mit dem Effekt und dem Hintergrund nichts liegen darf.

Das Element mit dem Effekt ist nämlich nicht wirklich transparent, sondern hat nur den gleichen Hintergrund wie der Body.
Man könnte eine Art Screenshot machen und dieses als Hintergrund benutzen.
Das habe ich mal ausprobiert:

Wie im Beispiel beschrieben, nutze ich html2canvas um das HTML in ein Canvas zu konvertieren. Das Canvas wandel ich dann wiederum in ein Bild um, damit es als Hintergrundbild genutzt werden kann.
Das gesamte Beispiel gibt es hier: https://lgkonline.github.io/frosted-glass/

Die React Komponente react-acrylic geht hier den gleichen Weg, um den Effekt zu erzeugen. Es sei aber gesagt, diese Technik nicht sehr performant ist, da es sehr rechenintensiv ist ein Screenshot zu erzeugen und je nachdem wie viele Elemente es auf der Seite gibt, dauert es auch länger.

Ein anderes Problem ist, dass Browser wie Edge und Firefox beim Scrollen stocken, wenn ein Hintergrundbild als fixed gesetzt ist. Dafür habe ich leider noch keine Lösung gefunden. Diese Problematik wird hier auf Stack Overflow auch genannt.

Auch ist es doch sehr aufwändig, den Effekt zu erzeugen. Es gibt aber Möglichkeiten, sich die Arbeit zu erleichtern.
Auf CodePen habe ich ein Beispiel veröffentlicht, in dem ich eine React Komponente erstellt habe, wodurch ich den Effekt schneller an jeder beliebigen Stelle einbinden kann:

See the Pen FrostedGlass React Component by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

Update

Ich habe eine neue CSS-Spezifikation gefunden, mit der es deutlich einfacher wird, den Effekt einzusetzen: backdrop-filter
Mit backdrop-filter: blur(10px); könnte man also Frosted Glass realisieren.
Derzeit wird backgroup-filter leider nur von Safari für macOS und iOS unterstützt, soll aber auch in der nächsten Edge-Version verfügbar sein (Quelle: caniuse.com).

Ich konnte backdrop-filter erfolgreich in diesem Pen testen.

Link zum CodePen: https://codepen.io/lgkonline/pen/GQrLeV