Neu in Chrome 99

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Der Countdown für Version 100 von Chrome und Firefox läuft in wenigen Wochen.
  • Mit CSS-Cascade-Ebenen haben Sie mehr Kontrolle über Ihren CSS-Code und können Konflikte zwischen Stilen vermeiden.
  • Mit der Methode showPicker() können Sie programmatisch eine Browserauswahl für <input>-Elemente wie date, color und datalist anzeigen lassen.
  • Und es gibt viele weitere.

Mein Name ist Pete LePage. Sehen wir uns nun an, was es für Entwickler in Chrome 99 Neues gibt.

Chrome 100 und Firefox 100

Chrome 100 wird Ende März 2022 ausgeliefert und Firefox 100 kurz darauf Anfang Mai. Beide sind ein Meilenstein für die Hauptversion und werden auf drei Stellen übertragen. Wenn für Ihren Code jedoch zwei Ziffern erwartet werden, könnte die neue Versionsnummer Probleme verursachen.

Jeder Code, der Versionsnummern überprüft oder den User-Agent-String parst, sollte überprüft werden, um mögliche Probleme zu beheben.

Seite mit den Chrome-Flags, die die neue Option „#force-major-version-to-100“ hervorheben

In Chrome ändert das Flag #force-major-version-to-100 die aktuelle Versionsnummer in 100.

Im Einstellungsmenü von Firefox Nightly können Sie die Option "Firefox 100 User-Agent String" aktivieren. Es empfiehlt sich, Ihre Website zu testen, um sicherzustellen, dass alles wie erwartet funktioniert.

Ausführliche Informationen finden Sie unter Chrome und Firefox erreichen bald Hauptversion 100.

CSS-Cascade-Ebenen

Die Unterstützung für CSS Cascade Layers und die CSS-Regel @layer ist ab Chrome 99 geplant. Damit haben Sie mehr Kontrolle über Ihre CSS-Dateien, um Stilkonflikte zu vermeiden. Dies ist besonders nützlich bei großen Codebasen, Designsystemen und bei der Verwaltung von Drittanbieterstilen in Anwendungen.

Damit wird der CSS-Kaskade eine neue Ebene hinzugefügt. Bei Stilen mit mehreren Ebenen hat die Priorität einer Ebene immer Vorrang vor der Spezifität eines Selektors.

Illustration aus der Projektdemo mit der unterteilten Benutzeroberfläche

Wenn Sie versuchen, einen Link zu gestalten, werden Sie in einem .card innerhalb eines .post feststellen, dass die spezifischere Auswahl angewendet wird. Mit der @layer-Regel kannst du die Stilspezifität der einzelnen Elemente deutlicher darlegen und dafür sorgen, dass der Linkstil auf deiner Karte den Linkstil in deinem Beitrag überschreibt.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Dies liegt an der Kaskadenpriorität. Mithilfe von Ebenenstilen werden neue Kaskadenebenen erstellt.

Ebenen unter Verwendung der CSS-Regel @layer werden in Chrome 99, Firefox 97 und Safari 15.4 Beta unterstützt. Weitere Informationen finden Sie unter Cascade-Ebenen in Kürze an Ihren Browser.

showPicker() für Eingabeelemente

Lange Zeit mussten wir auf benutzerdefinierte Widget-Bibliotheken oder Hacks zurückgreifen, um eine Datumsauswahl anzuzeigen. Es gibt eine neue showPicker()-Methode für die HTML-InputElements. Dies ist die kanonische Methode, um eine Browserauswahl anzuzeigen, nicht nur für date, sondern auch für time, color und andere <input>-Elemente mit Auswahl.

Screenshots der Browserauswahl
Die Datumsauswahl im Browser auf Computern in Chrome, in Chrome für Mobilgeräte, in Safari auf Computern und in Safari auf Computern sowie in Firefox (Juli 2021).

Wenn Sie ihn verwenden möchten, rufen Sie showPicker() für das <input>-Element auf. In diesem Beispiel habe ich einen try…catch-Block eingefügt. So kann ich ein Fallback anbieten, falls der Browser die API nicht unterstützt oder die Auswahl nicht angezeigt werden kann. Die Nutzer sollten also trotzdem eine gute User Experience haben.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Ausführliche Informationen und die verschiedenen <input>-Typen, für die showPicker() verwendet werden kann, findest du unter Browserauswahl für Datum, Uhrzeit, Farbe und Dateien anzeigen.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Die Canvas2D API wurde aktualisiert und enthält unter anderem folgende neue Funktionen:

  • Zwei neue Ereignisse für ContextLost und ContextRestored
  • Eine willReadFrequently-Option
  • Mehr Unterstützung für CSS-Textmodifikatoren
  • Und vieles mehr.

Es gibt einen neuen Ursprungstest, mit dem PWAs im Web-App-Manifest für den dunklen Modus alternative Farben angeben können.

Die Handschrifterkennungs-API ist jetzt verfügbar.

Weitere Informationen

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

Abo

Abonnieren Sie den YouTube-Kanal für Chrome-Entwickler, um auf dem Laufenden zu bleiben. Dann werden Sie per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

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