Microsoft verbessert die Darstellung von Web-Apps im Edge-Browser auf Desktop-Geräten. Das Unternehmen hat die Verfügbarkeit der Window Controls Overlay-Funktion angekündigt, die Webentwicklern dies ermöglicht Nutzen Sie zusätzlichen Platz in der Titelleiste einer Web-App, ähnlich wie es native Apps bei den meisten Betriebssystemen tun Systeme.
Web-Apps funktionieren derzeit auf Desktop-Geräten so, dass sie Inhalte nur gezielt innerhalb des App-Fensters zeichnen können. Die oben angezeigte Titelleiste ist für die Anzeige des Seitentitels, der Browsersteuerelemente und allgemeiner Fenstersteuerelemente des Betriebssystems reserviert. Sofern Sie keine benutzerdefinierte Web-App erstellen, die nicht auf einen Browser angewiesen ist, schränkt dies den Bereich ein, in dem Entwickler nützliche Inhalte für ihre Apps anzeigen können.
Mit der Fenstersteuerungsüberlagerung gibt Microsoft Edge in der Titelleiste Platz für die Anzeige von Apps frei welche Inhalte sie auch immer wünschen, was für Menüs der obersten Ebene, Suchleisten und andere Funktionen nützlich sein kann. Anstatt dass die Titelleiste 30 Pixelreihen einnimmt, werden die Fenstersteuerelemente – wie die Schaltflächen zum Minimieren und Schließen – jetzt als Overlay über dem Web-App-Inhalt angezeigt.
Als Entwickler können Sie dies nutzen, indem Sie Ihrem Web-App-Manifest ein Display-Override-Manifest-Mitglied hinzufügen Verwenden Sie dann CSS-Variablen, um zu verhindern, dass Ihre Web-App Elemente unter den Fenstersteuerelementen in der Ecke der App zeichnet. Da die Fenstersteuerungen unter Windows, Linux oder macOS unterschiedlich sind, müssen Sie je nach Plattform, auf der die App ausgeführt wird, unterschiedliche Breitenvariablen verwenden. Weitere Informationen zu dieser Funktion finden Sie unter Mozilla Developer Network.
Microsoft sprach vor über zwei Jahren erstmals über das Window Controls Overlay und begann einige Zeit später mit der Implementierung in die Chromium-Engine. Die Funktion ist jetzt in Edge und Chrome ab Version 105 sowie Opera Version 91 verfügbar. Andere Chromium-basierte Browser sollten es ebenfalls unterstützen, wenn sie die neueste Chromium-Version ausführen. Außerdem wurde eine formelle Spezifikation veröffentlicht, die andere Browser wie Firefox dazu anregen soll, die Funktion ebenfalls zu implementieren.
Quelle:Microsoft