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 Version 10 erreichten, gab es einige Probleme, da die Hauptversionsnummer von einer auf zwei Ziffern gestiegen war. Hoffentlich haben wir ein paar Dinge gelernt, die die Umstellung 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 für eine Website verantwortlich 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 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 #100CooleWebmomente aus den letzten 14 Jahren zu feiern.

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

Verringerter 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, die Verwendung des User-Agent-Strings durch die neue User-Agent Client Hints API zu ersetzen.

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 und Zeitplan.

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 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 wichtigsten Funktionen finden Sie jedoch unter window.getScreenDetails(), wo Details zu den angeschlossenen Displays angezeigt werden.

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);
}

Außerdem können Sie damit Änderungen erkennen, 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 Mehrere Displays mit der Window Placement API für mehrere Bildschirme 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();

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.