Neu in Chrome 112

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mein Name ist Adriana Jara. Sehen wir uns nun an, was es bei Chrome 112 für Entwickler Neues gibt.

CSS-Unterstützung für Verschachtelung.

Eine unserer bevorzugten CSS-Präprozessorfunktionen ist jetzt in die Sprache integriert: die Stilregeln für Verschachtelungen.

Vor der Verschachtelung musste jeder Selector explizit und unabhängig von miteinander kommunizieren. Dies führt zu Wiederholungen, zu großen Mengen an Stylesheets und zu einer Streuung des Authorings. Nutzererfahrung.

Vorher
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Nach der Verschachtelung können Selektoren und zugehörige Stilregeln können gruppiert werden.

Nachher
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Durch das Verschachteln von Elementen können Entwickler einfacher Selektoren wiederholen und gleichzeitig Stilregeln für verwandte Elemente an einem Ort platzieren. Außerdem können die Designs dem HTML-Code entsprechen, auf den sie ausgerichtet sind.

Wenn die Komponente „.nesting“ im Beispiel aus dem Projekt entfernt wurde, können Sie die gesamte Gruppe löschen, anstatt Dateien nach zugehörigen Selektorinstanzen zu suchen.

Das Nesting kann bei Folgendem helfen:

  • Organisation.
  • Die Dateigröße wird verringert.
  • Refaktorierung.

Tipps zur optimalen Verwendung der CSS-Verschachtelung finden Sie in diesem Artikel. Die Unterstützung für Verschachtelungen in Entwicklertools finden Sie hier.

Algorithmusaktualisierung für <dialog> anfänglichen Fokus.

Das HTML-Element <dialog> ist die standardisierte Möglichkeit, ein Dialogfeld oder eine andere interaktive Komponente darzustellen, z. B. eine Benachrichtigung, die geschlossen werden kann oder ein Unterfenster, das über allen anderen Inhalten einer Webseite angezeigt werden muss.

Das HTML-Element ist die empfohlene Methode zum Erstellen solcher Inhalte, da die zugehörigen Funktionen für eine bessere und einheitlichere Nutzerfreundlichkeit und Zugänglichkeit entwickelt wurden.

Eine dieser Funktionen legt fest, welches Element fokussiert wird, wenn das Dialogfeld geöffnet wird. In dieser Version wurde der Algorithmus, der dieses Element auswählt, aktualisiert.

Ab jetzt gilt Folgendes:

Bei den Schritten zur Fokussierung des Dialogfelds werden fokussierbare Elemente der Tastatur anstelle von fokussierbaren Elementen berücksichtigt. Das <dialog>-Element selbst wird fokussiert, wenn dafür das Attribut „Autofokus“ festgelegt ist

Das <dialog>-Element selbst wird als Fallback fokussiert und nicht zurückgesetzt. <body>-Element hinzu.

Weitere Informationen zum Element <dialog> finden Sie in der Dokumentation.

No-Op-Abruf-Handler des Service Workers werden übersprungen.

Ab Chrome 112 werden der Service Worker-Start und der Listener, der Informationen aus dem kritischen Navigationspfad gesendet hat, ausgelassen, wenn ein User-Agent feststellt, dass alle Abruf-Listener des Service Workers fehlerfrei sind.

Diese Funktion beschleunigt die Navigation auf diesen Seiten.

Der Abruf-Handler war eine der PWA-Anforderungen für die Installation einer Web-App. Dies könnte der Grund dafür sein, dass einige Websites im Wesentlichen einen leeren Abruf-Handler haben. Das Starten eines Service Workers und die Ausführung eines No-Op-Listeners bringt jedoch nur Overhead mit sich, ohne die Vorteile zu nutzen, die mit dem richtigen Service Worker wie Caching oder Offlinefunktionen implementiert werden könnten. Daher überspringt Chrome sie jetzt, um die Navigation zu verbessern.

Im Rahmen dieser Änderung werden in Chrome Konsolenwarnungen angezeigt, wenn alle Abruf-Listener des Service Workers fehlerfrei sind. Entwickler werden aufgefordert, diese Abruf-Listener zu entfernen.

Warnungen in den Entwicklertools für leere Service Worker-Abruf-Handler.

…und vieles mehr

Natürlich gibt es noch viele weitere.

  • Der Setter für document.domain wurde verworfen.
  • Es gibt einen Ursprungstest für die Einstellung von X-Requested-With header in WebView
  • Der Rekorder in den Entwicklertools kann jetzt mit pierce-Selektoren aufnehmen.

Weitere Informationen

Hier werden nur einige wichtige Punkte behandelt. Klicken Sie auf die Links unten, zusätzliche Änderungen in Chrome 112.

Abonnieren

Um immer auf dem Laufenden zu bleiben, abonniere die YouTube-Kanal für Chrome-Entwickler, Außerdem wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Adriana Jara. Sobald Chrome 113 veröffentlicht ist, erfährst du, was es Neues bei Chrome gibt.