Neu in Chrome 93

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage, arbeite von zu Hause aus und drehe von zu Hause aus. Als Nächstes sehen wir uns an, was es für Entwickler bei Chrome 93 Neues gibt.

CSS-Modulskripts

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

Die neue Funktion für CSS-Modulskripts eignet sich hervorragend für benutzerdefinierte Elemente. Im Gegensatz zu anderen Methoden, um CSS über JavaScript anzuwenden, müssen keine Elemente erstellt oder mit JavaScript-Strings mit CSS-Text herumgearbeitet werden.

Wenn Sie es verwenden möchten, importieren Sie das Stylesheet mit assert {type: 'css'} und wenden 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];

Aber Vorsicht: Wenn Sie assert weglassen, wird die Datei als JavaScript behandelt und funktioniert nicht.

Ausführliche Informationen finden Sie unter CSS-Modulskripts zum Importieren von Stylesheets verwenden auf web.dev.

Multi-Screen Window Placement API

Bei einigen Apps ist es eine wichtige Funktion, neue Fenster zu öffnen und sie an bestimmten Stellen oder auf bestimmten Bildschirmen zu platzieren. Wenn ich beispielsweise Präsentationen zum Präsentieren verwende, möchte ich, dass die Folien auf dem Hauptdisplay im Vollbildmodus und meine Vortragsnotizen auf dem anderen Display im Vollbildmodus angezeigt werden.

Mit der Multi-Screen Window Placement API kannst du die Bildschirme auflisten, die mit dem Computer des Nutzers verbunden sind, und Fenster auf bestimmten Bildschirmen platzieren. Dies ist der zweite Ursprungstest. Aufgrund Ihres Feedbacks haben wir eine Reihe von Änderungen vorgenommen.

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

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

Die Hauptfunktion befindet sich jedoch in window.getScreens(), das alle Details zu den verknüpften Bildschirmen enthält.

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

Sie können beispielsweise den Hauptbildschirm festlegen und dann requestFullscreen() verwenden, um ein Element auf diesem Bildschirm anzuzeigen.

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 er eine Möglichkeit, auf Änderungen zu warten, z. B. ob ein neuer Bildschirm 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 bietet Toms Artikel Mehrere Bildschirme mit der Multi-Screen Window Placement API verwalten auf web.dev.

Verkürzter Veröffentlichungszyklus

Im März haben wir unsere Pläne angekündigt, den Release-Zyklus zu verkürzen und alle vier Wochen eine neue Version von Chrome herauszubringen.

Dieser Zeitpunkt ist gekommen, und am 21. September werden wir Chrome 94 ausliefern. Das geplante Veröffentlichungsdatum für jede Version finden Sie im Chrome-Kalender.

Neue PWA-Funktionen

Wenn Sie eine progressive Web-App erstellen, gibt es zwei neue Ursprungstests, die Sie sich ansehen sollten.

URL-Handler für PWAs

Wenn Sie eine PWA installiert haben und auf einen Link zu dieser PWA klicken, möchten Sie sie wahrscheinlich in der PWA und nicht in einem Browsertab öffnen.

Wenn Sie url_handlers in Ihrem Web-App-Manifest angeben und eine web-app-origin-association-Datei in das .well-known/-Verzeichnis einfügen, können Sie dem Browser mitteilen, dass sie in der installierten 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 ein wenig zusätzlicher Bestätigung kannst du dann sogar dafür sorgen, dass deine PWA Links aus anderen Quellen enthält, deren Inhaber du bist.

Alle Details zum Ursprungstest finden Sie unter PWAs als URL-Handler auf web.dev.

Overlay für Fenstersteuerelemente

Das Overlay für Fenstersteuerelemente erweitert den Clientbereich auf das gesamte Fenster, einschließlich der Titelleiste und der Schaltflächen für die Fenstersteuerung, z. B. die Schaltflächen zum Schließen, Maximieren und Minimieren.

Mit dieser Funktion können Sie Ihre installierte PWA anderen installierten Apps ähneln.

Weitere Informationen zum Ursprungstest finden Sie unter Das Overlay für Fenstersteuerelemente der Titelleiste Ihrer PWA anpassen.

PWA Summit

Der PWA Summit findet im Oktober statt. Es ist eine kostenlose Onlinekonferenz, die darauf ausgerichtet ist, allen mit progressiven Web-Apps zum Erfolg zu verhelfen. Der PWA Summit ist ein Gemeinschaftsprojekt von einigen Unternehmen, die an der Entwicklung von PWA-Technologien beteiligt sind: Google, Intel, Microsoft und Samsung.

Es gibt jede Menge gute Vorträge und jede Menge Inhalte. Weitere Informationen und die Möglichkeit zur Anmeldung findest du unter PWASummit.org.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Flexbox- und Flexbox-Elemente unterstützen jetzt die Ausrichtungs-Keywords: start, end, self-start, self-end, left und right.
  • Die asynchrone Zwischenablage-API unterstützt jetzt SVG-Dateien.
  • Das Attribut media wird beim Festlegen von meta als theme-color berücksichtigt, sodass Sie unterschiedliche Designfarben für den hellen und den dunklen Modus angeben können.
<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 Punkte. Weitere Änderungen in Chrome 93 finden Sie unter den folgenden Links.

Abo

Abonnieren Sie den YouTube-Kanal für Chrome-Entwickler, um auf dem Laufenden zu bleiben. Dann werden Sie per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 94 veröffentlicht wird, melde ich Ihnen, was es bei Chrome Neues gibt.