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 in Chrome 93 für Entwickler Neues gibt.

CSS-Modulscripts

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

Die neue Funktion „CSS-Modulscripts“ eignet sich hervorragend für benutzerdefinierte Elemente. Und im Gegensatz zu anderen Möglichkeiten, CSS aus JavaScript anzuwenden, müssen Sie keine Elemente erstellen oder JavaScript-Strings mit CSS-Text bearbeiten.

Wenn Sie es verwenden möchten, importieren Sie das Stylesheet mit assert {type: 'css'} und wenden Sie es dann auf die document oder shadowRoot an, indem Sie adoptedStyleSheets aufrufen.

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

Wenn Sie das assert jedoch weglassen, wird die Datei als JavaScript behandelt und funktioniert nicht.

Weitere Informationen finden Sie unter web.dev im Artikel CSS-Modulscripts zum Importieren von Stylesheets verwenden.

Window Placement API für mehrere Bildschirme

Für einige Apps ist es eine wichtige Funktion, neue Fenster zu öffnen und an bestimmten Stellen oder auf bestimmten Displays zu platzieren. Wenn ich beispielsweise mit Google Präsentationen eine Präsentation halte, möchte ich, dass die Folien auf dem Hauptbildschirm im Vollbildmodus angezeigt werden und meine Notizen auf dem anderen Bildschirm.

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 Test für die Funktion „Herkunftsermittlung“. Wir haben auf Grundlage deines Feedbacks einige Änderungen vorgenommen.

So prüfen Sie schnell, ob mehr als ein Display mit dem Gerät verbunden ist:

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

Die wichtigsten Funktionen finden Sie jedoch unter window.getScreens(). Dort finden Sie alle Details zu den angeschlossenen Displays.

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 können Sie damit auf Änderungen achten, 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 Mehrere Displays mit der Window Placement API für mehrere Bildschirme verwalten von Tom auf web.dev.

Verkürzter Releasezyklus

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

Dieser Zeitpunkt ist nun gekommen und 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 zwei neue Ursprungstests 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 Manifest der Webanwendung angeben und dem Verzeichnis .well-known/ eine web-app-origin-association-Datei hinzufügen, können Sie dem Browser mitteilen, dass die PWA 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 einer kleinen zusätzlichen Bestätigung können Sie Ihre PWA auch so konfigurieren, dass sie Links von anderen Ursprüngen verarbeitet, die Ihnen gehören.

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

Overlay für Fenstersteuerelemente

Mit dem Overlay für Fenstersteuerelemente wird der Clientbereich so erweitert, dass er das gesamte Fenster abdeckt, einschließlich der Titelleiste und der Schaltflächen für die Fenstersteuerung wie „Schließen“, „Maximieren“ und „Minimieren“.

Mit dieser Funktion können Sie Ihre installierte PWA so aussehen lassen, wie andere installierte Apps.

Weitere Informationen zum Ursprungstest finden Sie unter Hier finden Sie weitere Informationen zum Anpassen des Overlays für Fenstersteuerelemente der Titelleiste Ihrer PWA.

PWA Summit

Im Oktober findet der PWA Summit statt. Es ist eine kostenlose Onlinekonferenz, die sich darauf konzentriert, allen bei der erfolgreichen Nutzung von Progressive Web-Apps zu helfen. 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 großartiger 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 viele weitere.

  • Für Flexbox und Flexbox-Elemente werden jetzt die Ausrichtungs-Keywords start, end, self-start, self-end, left und right unterstützt.
  • Die Async Clipboard API unterstützt jetzt SVG-Dateien.
  • Außerdem wird das Attribut media berücksichtigt, wenn Sie meta theme-color festlegen. So können Sie 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 Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Änderungen in Chrome 93.

Abonnieren

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

Ich bin Pete LePage. Sobald Chrome 94 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.