Neu in Chrome 93

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und arbeite und filme von zu Hause aus. Sehen wir uns an, was es Neues für Entwickler in Chrome 93 gibt.

CSS-Modul-Scripts

Sie können jetzt CSS-Stylesheets mit import-Anweisungen laden, genau wie JavaScript-Module. Die Stylesheets können dann auf das Dokument oder die Shadow Roots angewendet werden, genau wie konstruierbare Stylesheets.

Die neue Funktion „CSS Module Scripts“ eignet sich hervorragend für benutzerdefinierte Elemente. Im Gegensatz zu anderen Methoden zum Anwenden von CSS über JavaScript müssen Sie keine Elemente erstellen oder JavaScript-Strings mit CSS-Text bearbeiten.

Um es zu verwenden, importieren Sie das Stylesheet mit assert {type: 'css'} und wenden Sie es dann auf document oder shadowRoot an, indem Sie adoptedStyleSheets aufrufen.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Achten Sie aber darauf, dass Sie das assert nicht weglassen, da die Datei sonst als JavaScript behandelt wird und nicht funktioniert.

Weitere Informationen finden Sie unter Using CSS Module Scripts to import stylesheets auf web.dev.

Window Placement API für mehrere Bildschirme

Für einige Apps ist es wichtig, neue Fenster zu öffnen und sie an bestimmten Stellen oder auf bestimmten Displays zu platzieren. Wenn ich beispielsweise Google Präsentationen für eine Präsentation verwende, sollen die Folien im Vollbildmodus auf dem primären Display und meine Rednernotizen auf dem anderen Display angezeigt werden.

Mit der Window Placement API für mehrere Bildschirme können die mit dem Computer des Nutzers verbundenen Displays aufgelistet und Fenster auf bestimmten Bildschirmen platziert werden. Dies ist der zweite Origin Trial und wir haben auf Grundlage Ihres Feedbacks einige Änderungen vorgenommen.

So können Sie schnell prüfen, ob mehr als ein Bildschirm mit dem Gerät verbunden ist:

const isExtended = window.screen.isExtended;
// returns true/false

Die Schlüsselfunktion befindet sich jedoch in window.getScreens(), wo alle Details zu den angeschlossenen Displays zu finden sind.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Sie können beispielsweise den primären Bildschirm festlegen und dann mit requestFullscreen() ein Element auf diesem Bildschirm anzeigen.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Außerdem bietet es eine Möglichkeit, auf Änderungen zu reagieren, z. B. wenn ein neues Display angeschlossen oder entfernt wird.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Weitere Informationen finden Sie im Artikel Managing several displays with the Multi-Screen Window Placement API von Tom auf web.dev.

Verkürzter Releasezyklus

Im März haben wir angekündigt, dass wir den Release-Zyklus verkürzen und alle vier Wochen eine neue Version von Chrome veröffentlichen werden.

Es ist so weit: Chrome 94 wird am 21. September veröffentlicht. Die geplanten Veröffentlichungstermine für die einzelnen Versionen finden Sie im Chrome-Kalender.

Neue PWA-Funktionen

Wenn Sie eine progressive Web-App entwickeln, sollten Sie sich die beiden neuen Origin Trials ansehen.

URL-Handler für PWAs

Wenn Sie eine PWA installiert haben und auf einen Link zu dieser PWA klicken, soll sie wahrscheinlich in der PWA und nicht in einem Browsertab geöffnet werden.

Wenn Sie url_handlers in Ihrem Web-App-Manifest angeben und eine web-app-origin-association-Datei in Ihr .well-known/-Verzeichnis einfügen, können Sie dem Browser mitteilen, dass Ihre installierte PWA geöffnet werden soll, wenn ein Nutzer auf einen Link zu Ihrer PWA klickt.

Beispiel für url_handlers in der Datei manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association-Beispieldatei:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Mit einer zusätzlichen Bestätigung können Sie sogar dafür sorgen, dass Ihre PWA Links von anderen Quellen verarbeitet, die Ihnen gehören.

Alle Details zum Ursprungstest finden Sie unter PWAs as URL Handlers auf web.dev.

Overlay für Fenstersteuerelemente

Das Overlay für Fenstersteuerelemente erstreckt den Clientbereich über das gesamte Fenster, einschließlich der Titelleiste und der Schaltflächen für die Fenstersteuerung wie „Schließen“, „Maximieren“ und „Minimieren“.

Mit dieser Funktion können Sie dafür sorgen, dass Ihre installierte PWA anderen installierten Apps ähnelt.

Weitere Informationen zum Origin-Trial finden Sie unter Overlay für Fenstersteuerelemente der Titelleiste Ihrer PWA anpassen.

PWA Summit

Im Oktober findet der PWA Summit statt. Es handelt sich um eine kostenlose Onlinekonferenz, die allen helfen soll, mit progressiven Web-Apps erfolgreich zu sein. Der PWA Summit ist eine Zusammenarbeit zwischen Mitarbeitern verschiedener Unternehmen, die an der Entwicklung von PWA-Technologien beteiligt sind: Google, Intel, Microsoft und Samsung.

Es gibt eine Menge toller Vorträge und Inhalte. Weitere Informationen und die Möglichkeit zur Registrierung finden Sie unter PWASummit.org.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Flexbox und Flexbox-Elemente unterstützen jetzt die Ausrichtungsschlüsselwörter start, end, self-start, self-end, left und right.
  • Die asynchrone Zwischenablage-API unterstützt jetzt SVG-Dateien.
  • Das Attribut media wird berücksichtigt, wenn meta auf theme-color gesetzt ist. Sie können also unterschiedliche Designfarben für den hellen und den dunklen Modus angeben.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 93.

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 94 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.