Neu in Chrome 100

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 100 für Entwickler neu ist.

Chrome 100

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

Chrome- und Firefox-Logo

Chrome 100 ist bereits verfügbar und Firefox 100 wird schon bald veröffentlicht. Diese dreistelligen Versionsnummern können auf Websites, auf denen die Browserversion auf irgendeine Weise ermittelt werden muss, zu Problemen führen. In den letzten Monaten haben das Firefox- und das Chrome-Team Tests durchgeführt, bei denen der Browser die Versionsnummer 100 meldete, obwohl dies nicht der Fall war.

Dies führte zu einigen gemeldeten Problemen, von denen viele bereits behoben wurden. Wir benötigen jedoch noch Ihre Hilfe.

  • Wenn Sie ein Website-Administrator sind, testen Sie Ihre Website 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 oder gleich 100 sind.

Weitere Informationen finden Sie unter Chrome und Firefox erreichen bald die Hauptversion 100 auf web.dev.

100 coole Webmomente

Promobild für „100 coole Webmomente“

Es war spannend zu sehen, wie das Web gewachsen ist und welche tollen Dinge Sie in den letzten 100 Chrome-Releases entwickelt haben. Wir haben uns gedacht, dass es Spaß machen könnte, in Erinnerungen zu schwelgen und #100CoolWebMoments zu feiern, die in den letzten 14 Jahren passiert sind.

Teile uns mit, welche Momente dir am besten gefallen haben. Wenn wir etwas vergessen haben (und das ist sehr wahrscheinlich), tweetet uns @Chromiumdev mit #100CoolWebMoments. Viel Spaß!

Reduzierter User-Agent-String

Apropos User-Agent: Chrome 100 ist die letzte Version, die standardmäßig einen nicht reduzierten User-Agent-String unterstützt. Dabei wird der User-Agent-String durch die neue User-Agent Client Hints API ersetzt.

Ab Chrome 101 wird der User-Agent schrittweise reduziert.

Weitere Informationen dazu, was und wann entfernt wird, finden Sie im [Chromium-Blog][crblog] unter Ursprungstest zur Reduzierung der Informationen im User-Agent-String.

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 Präsentationen für eine Präsentation verwende, sollen die Folien im Vollbildmodus auf dem primären Bildschirm und meine Vortragsnotizen auf dem anderen Bildschirm angezeigt werden.

Mit der Window Placement API für mehrere Bildschirme können die mit dem Computer des Nutzers verbundenen Bildschirme 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(), das Details zu den angehängten Bildschirmen enthält.

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

Sie können beispielsweise den primären Bildschirm festlegen und dann mit requestFullscreen() ein Element auf diesem Display 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);
}

Es bietet auch die Möglichkeit, Änderungen zu erkennen, z. B. wenn 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 von Tom 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 einem HID-Gerät eine Berechtigung widerrufen können, die von einem Nutzer gewährt wurde.

// 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 makeReadOnly()-Methode NFC-Tags dauerhaft schreibgeschützt machen.

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

Weitere Informationen

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

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 101 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.