Neu in Chrome 100

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 100 gibt.

Chrome 100

Als Browser zum ersten Mal Version 10 erreichten, gab es einige Probleme, da die Hauptversionsnummer von einer auf zwei Ziffern umgestellt wurde. Hoffentlich haben wir ein paar Dinge gelernt, die den Übergang von zwei auf drei Ziffern erleichtern.

Chrome- und Firefox-Logo

Chrome 100 ist jetzt verfügbar und Firefox 100 wird in Kürze veröffentlicht. Diese dreistelligen Versionsnummern können Probleme auf Websites verursachen, die die Browserversion auf irgendeine Weise identifizieren. In den letzten Monaten haben das Firefox-Team und das Chrome-Team Tests durchgeführt, bei denen der Browser die Versionsnummer 100 gemeldet hat, obwohl dies nicht der Fall war.

Das hat zu einigen gemeldeten Problemen geführt, von denen viele bereits behoben wurden. Wir benötigen aber weiterhin Ihre Hilfe.

  • Wenn Sie eine Website verwalten, testen Sie sie mit Chrome und Firefox 100.
  • Wenn Sie eine User-Agent-Parsing-Bibliothek entwickeln, fügen Sie Tests zum Parsen von Versionen hinzu, die größer oder gleich 100 sind.

Weitere Informationen finden Sie unter Chrome and Firefox soon to reach major version 100 auf web.dev.

100 coole Webmomente

Promobild für „100 Cool Web Moments“

Es war spannend, das Wachstum des Webs zu beobachten und zu sehen, was Sie in den letzten 100 Chrome-Releases alles entwickelt haben. Wir haben uns gedacht, dass es schön wäre, die letzten 14 Jahre Revue passieren zu lassen und die #100CoolWebMoments zu feiern.

Lass uns wissen, welche Momente dir am besten gefallen haben. Wenn wir etwas übersehen haben (und das ist sicher der Fall), dann twittert uns unter @Chromiumdev mit dem Hashtag #100CoolWebMoments. Viel Spaß!

Reduzierter User-Agent-String

Apropos User-Agent: Chrome 100 ist die letzte Version, in der standardmäßig ein nicht reduzierter User-Agent-String unterstützt wird. Dies ist Teil einer Strategie, den User-Agent-String durch die neue User-Agent Client Hints API zu ersetzen.

Ab Chrome 101 wird der User-Agent schrittweise reduziert.

Weitere Informationen dazu, was entfernt wird und wann, finden Sie im [Chromium-Blog][crblog] unter User Agent Reduction Origin Trial and Dates.

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.

Mit window.screen.isExtended 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 Hauptfunktion befindet sich jedoch in window.getScreenDetails(), die Details zu den angeschlossenen Displays enthält.

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

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

try {
  const screens = await window.getScreenDetails();
  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 oder sich die Auflösung ändert.

const screens = await window.getScreenDetails();
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 aktualisierten Artikel von Tom Managing several displays with the Multi-Screen Window Placement API auf web.dev.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Es gibt eine neue forget()-Methode für HID-Geräte, mit der Sie eine vom Nutzer erteilte Berechtigung für ein HID-Gerät widerrufen können.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

Bei WebNFC können Sie mit der Methode makeReadOnly() NFC-Tags dauerhaft schreibgeschützt machen.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Weitere Änderungen in Chrome 100 finden Sie unter den folgenden Links.

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 101 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.