Neu in Chrome 100

Pete LePage

Dazu sollten Sie Folgendes wissen:

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es bei Chrome 100 Neues für Entwickler gibt.

Chrome 100

Als die Browserversion 10 erstmals erreichten, gab es einige Probleme, da die Hauptversionsnummer von einer Ziffer auf zwei ging. Hoffentlich haben wir einige Dinge gelernt, die den Übergang von zwei auf drei Ziffern erleichtern.

Chrome- und Firefox-Logo

Chrome 100 ist ab sofort verfügbar und Firefox 100 wird demnächst veröffentlicht. Diese dreistelligen Versionsnummern können auf Websites, die die Identifizierung der Browserversion erfordern, Probleme verursachen. In den letzten Monaten haben das Firefox-Team und das Chrome-Team Tests durchgeführt, bei denen der Browser die Versionsnummer 100 meldet, obwohl dies nicht der Fall ist.

Dabei wurden einige Probleme gemeldet, von denen viele bereits behoben wurden. Aber wir benötigen noch Ihre Hilfe.

  • Wenn Sie ein Website-Administrator sind, testen Sie sie mit Chrome und Firefox 100.
  • Wenn Sie eine User-Agent-Parsing-Bibliothek entwickeln, fügen Sie Tests hinzu, um Versionen zu parsen, die größer als und gleich 100 sind.

Weitere Informationen findest du auf web.dev unter Chrome und Firefox werden bald die Hauptversion 100 erreichen.

100 coole Webmomente

Promobild für 100 Coole Web-Momente

Es ist toll, das Wachstum des Webs und all die tollen Dinge zu sehen, die du in den letzten 100 Chrome-Versionen erstellt hast. Wir dachten, es würde Spaß machen, in Erinnerungen zu schweben und die #100CoolWebMoments der letzten 14 Jahre zu feiern.

Sag uns, welche Momente dir am besten gefallen haben. Wenn wir etwas übersehen haben (und wir sicher sind, dass wir das getan haben), twittern Sie uns @Chromiumdev mit #100CoolWebMoments. Viel Spaß!

Verkürzter User-Agent-String

Apropos User-Agent: Chrome 100 ist die letzte Version, die standardmäßig einen nicht reduzierten User-Agent-String unterstützt. Dies ist Teil einer Strategie, bei der die Verwendung des User-Agent-Strings durch die neue User-Agent Client Hints API ersetzt wird.

Ab Chrome 101 wird der User-Agent schrittweise reduziert.

Weitere Informationen darüber, was wann entfernt wird, findest du im Ursprungstest zur Reduzierung von User-Agents und zu den Datumsangaben im [Chromium-Blog][crblog].

API zur Platzierung von Multiscreen-Fenstern

Bei einigen Apps ist es eine wichtige Funktion, neue Fenster zu öffnen und sie an bestimmten Stellen oder in bestimmten Ansichten zu platzieren. Wenn ich beispielsweise Präsentationen 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 ist es möglich, die mit dem Computer des Nutzers verbundenen Displays aufzulisten und Fenster auf bestimmten Bildschirmen zu platzieren.

Mit window.screen.isExtended kannst du 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(), das Details zu den verknüpften Bildschirmen enthält.

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

Du kannst beispielsweise den Hauptbildschirm festlegen und dann requestFullscreen() verwenden, um ein Element im Vollbildmodus anzuzeigen.

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 ist es möglich, auf Änderungen zu warten, z. B. ob ein neuer Bildschirm angeschlossen oder entfernt wird, sich die Auflösung ändert usw.

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 Mehrere Bildschirme mit der Multi-Screen Window Placement API verwalten 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 von einem 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();

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

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

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Informationen zu weiteren Änderungen in Chrome 100.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

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