Neu in Chrome 112

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mein Name ist Adriana Jara. Sehen wir uns an, was es in Chrome 112 Neues für Entwickler 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 Selektor explizit und getrennt voneinander deklariert werden. Dies führt zu Wiederholungen, einem großen Stylesheet-Volumen und einer unübersichtlichen Autorenansicht.

Vorher
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Nach dem Verschachteln können Selektoren fortgesetzt und zugehörige Stilregeln darin gruppiert werden.

Nachher
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Durch das Verschachteln müssen Entwickler weniger Auswahlen wiederholen und können Stilregeln für zugehörige Elemente an einer Stelle platzieren. Außerdem können Sie so dafür sorgen, dass die Stile zum HTML-Code passen, auf den sie ausgerichtet sind.

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

Vorteile von verschachtelten Elementen:

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

In diesem Artikel finden Sie Tipps, wie Sie das CSS-Verschachteln optimal nutzen. Informationen zur Unterstützung von Verschachtelungen in den DevTools finden Sie hier.

Algorithmusaktualisierung für den ursprünglichen Fokus von <dialog>.

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.

Dieses HTML-Element ist die empfohlene Methode zum Erstellen solcher Inhalte, da seine Funktionen für eine bessere und einheitlichere Nutzerfreundlichkeit und Barrierefreiheit entwickelt wurden.

Eine dieser Funktionen ist die Auswahl des Elements, das beim Öffnen des Dialogfelds den Fokus erhält. In dieser Version wurde der Algorithmus, der dieses Element auswählt, aktualisiert.

Ab jetzt gilt Folgendes:

Bei den Schritten zum Fokussieren des Dialogfelds werden Elemente berücksichtigt, die sich per Tastatur fokussieren lassen, und nicht beliebige fokussierbare Elemente. Das <dialog>-Element selbst erhält den Fokus, wenn das Attribut „autofocus“ festgelegt ist.

Der Fokus wird stattdessen auf das <dialog>-Element gelegt, anstatt auf das <body>-Element zurückgesetzt zu werden.

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

Service Worker-Abholer ohne Aktion werden übersprungen.

Ab Chrome 112 werden der Start des Service Workers und die Listenerauslieferung aus dem kritischen Navigationspfad weggelassen, wenn ein User-Agent feststellt, dass alle Abruf-Listener des Service Workers No-Ops sind.

Diese Funktion beschleunigt die Navigation auf diesen Seiten.

Der Abruf-Handler war eine der PWA-Anforderungen, damit eine Webanwendung installiert werden konnte. Wir vermuten, dass dies der Grund dafür ist, dass einige Websites im Grunde 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. Chrome überspringt 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 viel mehr.

  • Der Setter für document.domain ist jetzt eingestellt.
  • Es gibt einen Ursprungstest für die Einstellung von X-Requested-With header in WebView
  • Der Rekorder in den DevTools kann jetzt mit Durchdringungs-Selektoren aufzeichnen.

Weitere Informationen

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

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