Neu in Chrome 99

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Der Countdown bis zur Version 100 von Chrome und Firefox läuft.
  • Mit CSS-Kaskadierungsebenen haben Sie mehr Kontrolle über Ihr CSS und können Konflikte bei der Stilspezifität vermeiden.
  • Mit der Methode showPicker() können Sie programmatisch eine Browserauswahl für <input>-Elemente wie date, color und datalist anzeigen.
  • Und es gibt noch viel mehr.

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

Chrome 100 und Firefox 100

Chrome 100 wird Ende März 2022 veröffentlicht und Firefox 100 kurz darauf, Anfang Mai. Beide sind ein wichtiger Meilenstein bei der Versionsnummer und gehen auf drei Ziffern über. Wenn Ihr Code jedoch zwei Ziffern erwartet, kann die neue Versionsnummer Probleme verursachen.

Jeder Code, der Versionsnummern prüft oder den User-Agent-String parst, sollte überprüft werden, um sicherzustellen, dass es keine Probleme gibt.

Die Seite „Chrome-Flags“ mit der neuen Option „#force-major-version-to-100“

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

In den Einstellungen von Firefox Nightly können Sie die Option „Firefox 100 User-Agent-String“ aktivieren. Es ist ratsam, Ihre Website zu testen, um sicherzugehen, dass alles wie erwartet funktioniert.

Weitere Informationen

CSS-Kaskadenebenen

Die Unterstützung für CSS-Kaskadenebenen und die CSS-Regel @layer wird in Chrome 99 eingeführt. Sie bieten eine explizitere Steuerung Ihrer CSS-Dateien, um Konflikte bei der Stilspezifität zu vermeiden. Das ist besonders nützlich für große Codebases, Designsysteme und wenn Sie Stile von Drittanbietern in Anwendungen verwalten.

Sie führen eine neue Ebene in die Kaskade von CSS ein. Bei geschichteten Stilen hat die Priorität einer Ebene immer Vorrang vor der Spezifität eines Selektors.

Abbildung aus der Projektdemo zum Aufteilen der Benutzeroberfläche

Wenn Sie versuchen, einen Link in einem .card innerhalb eines .post zu formatieren, wird der spezifischere Selektor angewendet. Mit der @layer-Regel können Sie die Stilspezifität der einzelnen Elemente genauer angeben und dafür sorgen, dass der Linkstil auf Ihrer Karte den Linkstil in Ihrem Beitrag überschreibt.

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

  .link {
    color: blue;
  }
}

Das liegt an der Kaskadenpriorität. Durch geschichtete Stile werden neue Kaskadenebenen erstellt.

Kaskadenebenen mit der CSS-Regel @layer werden in Chrome 99, Firefox 97 und Safari 15.4 Beta unterstützt. Weitere Informationen finden Sie unter Cascade layers are coming to your 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 in 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 Auswahlen.

Screenshots von Browserauswahlen
Browser-Datumsauswahlen in Chrome für Computer, Chrome für Mobilgeräte, Safari für Computer, Safari für Mobilgeräte und Firefox für Computer (Juli 2021)

Rufen Sie dazu showPicker() für das <input>-Element auf. In diesem Beispiel habe ich sie in einen try…catch-Block eingeschlossen. So kann ich einen Fallback bereitstellen, wenn der Browser die API nicht unterstützt oder die Auswahl nicht angezeigt werden kann. So wird dafür gesorgt, dass Nutzer weiterhin eine gute Erfahrung machen.

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

Hier finden Sie ausführliche Informationen und alle verschiedenen <input>-Typen, die Sie für showPicker() verwenden können.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Die Canvas2D API wurde aktualisiert und bietet jetzt neue Funktionen, darunter:

  • Zwei neue Ereignisse für ContextLost und ContextRestored
  • willReadFrequently-Option
  • Unterstützung weiterer CSS-Textmodifikatoren
  • und mehr…

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

Und die Handschrifterkennungs-API ist jetzt verfügbar.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Weitere Änderungen in Chrome 99 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 100 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.