Neu in Chrome 99

Pete LePage

Dazu sollten Sie Folgendes wissen:

• Die Version 100 von Chrome und Firefox steht nur noch wenige Wochen bevor.
• 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 darauf Anfang Mai veröffentlicht. Beide Versionen sind Meilensteine bei der Versionsnummer und werden auf drei Ziffern umgestellt. Wenn in Ihrem 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.

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 ist empfehlenswert, Ihre Website zu testen, damit Sie sicher sein können, dass alles wie erwartet funktioniert.

Ausführliche Informationen finden Sie im Artikel Chrome und Firefox erreichen bald die 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.

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. In HTML InputElements gibt es eine neue showPicker()-Methode. Dies ist die kanonische Methode, eine Browserauswahl anzuzeigen, nicht nur für date, sondern auch für time, color und andere <input>-Elemente mit Auswahlen.

Datumsauswahl in Chrome-Desktop, Chrome-Mobilgeräten, Safari-Desktop, Safari-Mobilgeräten und Firefox-Desktop (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 einen Fallback bereitstellen, falls der Browser die API nicht unterstützt oder die Auswahl nicht anzeigen 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 viel mehr.

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.

• Das ist neu in den Chrome-Entwicklertools (99)
• Eingestellte und entfernte Funktionen in Chrome 99
• Aktualisierungen von ChromeStatus.com für Chrome 99
• Liste der Änderungen am Chromium-Quellcode-Repository
• Chrome-Veröffentlichungskalender

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.