Neu in Chrome 99

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Der Countdown auf Version 100 von Chrome und Firefox ist nur wenige Wochen entfernt.
  • Mit CSS-Kaskadierungsebenen haben Sie mehr Kontrolle über Ihr CSS und können Stilkonflikte 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 viele weitere.

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

Chrome 100 und Firefox 100

Chrome 100 wird Ende März (2022) und Firefox 100 kurz danach Anfang Mai ausgeliefert. Beide sind eine Hauptversionsnummer und werden auf drei Ziffern umgestellt. Wenn für Ihren Code jedoch zwei Ziffern erwartet werden, kann die neue Versionsnummer Probleme verursachen.

Jeder Code, der Versionsnummern prüft oder den User-Agent-String analysiert, sollte auf Probleme überprüft werden.

Seite mit Chrome-Flags, auf der die neue Option #force-major-version-to-100 hervorgehoben wird

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

Im Menü „Einstellungen“ 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 baldige Hauptversion 100.

CSS-Abfolgeebenen

In Chrome 99 wird die Unterstützung für CSS-Abfolgeebenen und die CSS-Regel @layer eingeführt. Sie bieten eine explizitere Kontrolle über Ihre CSS-Dateien, um Stilkonflikte zu vermeiden. Das ist besonders nützlich für große Codebases, Designsysteme und beim Verwalten von Drittanbieterstilen in Anwendungen.

Sie fügen der CSS-Abfolge eine neue Ebene hinzu. Bei mehrschichtigen Stilen hat die Priorität einer Ebene immer Vorrang vor der Spezifität eines Sellektors.

Abbildung aus der Projektdemo zur Aufschlüsselung der Benutzeroberfläche

Wenn Sie einen Link innerhalb eines .card in einem .post stylen möchten, wird die spezifischere Auswahl angewendet. Mit der Regel @layer können Sie die Stilspezifität jedes Elements genauer definieren und dafür sorgen, dass der Linkstil in Ihrer Karte den Linkstil in Ihrem Beitrag überschreibt.

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

  .link {
    color: blue;
  }
}

Das liegt an der Kaskadenpräferenz. Mit mehrschichtigen Stilen werden neue Ebenen erstellt.

Kaskadierende Ebenen mit der CSS-Regel @layer werden in Chrome 99, Firefox 97 und Safari 15.4 Beta unterstützt. Weitere Informationen finden Sie unter Kaskadenebenen kommen in 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 HTML-InputElements. Das ist die kanonische Methode zum Anzeigen einer Browserauswahl, nicht nur für date, sondern auch für time-, color- und andere <input>-Elemente mit Auswahlmöglichkeiten.

Screenshots der Browserauswahl
Datumsauswahl 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() auf das Element <input> auf. In diesem Beispiel habe ich es in einen try…catch-Block gepackt. So kann ich ein Fallback bereitstellen, falls der Browser die API nicht unterstützt oder die Auswahl nicht angezeigt werden kann. So wird sichergestellt, dass Nutzer weiterhin eine gute Nutzererfahrung 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.
  }
});

Unter Browserauswahl für Datum, Uhrzeit, Farbe und Dateien anzeigen finden Sie weitere Informationen und alle <input>-Typen, für die Sie showPicker() verwenden können.

…und vieles mehr

Natürlich gibt es noch viele weitere.

Die Canvas2D API wurde aktualisiert und es wurden neue Funktionen hinzugefügt, darunter:

  • 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 Manifest der Webanwendung alternative Farben für den dunklen Modus angeben können.

Außerdem ist jetzt die Handschrifterkennungs-API verfügbar.

Weitere Informationen

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

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