Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in Chrome 117

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Drei neue CSS-Funktionen erleichtern das Hinzufügen von reibungslosen Einstiegs- und Exit-Animationen.
Berechnen Sie Datasets höherer Ordnung mit Arraygruppierung.
Mit den Entwicklertools lassen sich lokale Überschreibungen einfacher vornehmen.
Und es gibt noch viel mehr.

Ich bin Adriana Jara. Sehen wir uns nun an, was es bei Chrome 117 für Entwickler Neues gibt.

Neue CSS-Funktionen für Ein- und Exit-Animationen

Mit diesen drei neuen CSS-Funktionen können Sie ganz einfach Eintritts- und Austrittsanimationen hinzufügen und Elemente wie Dialogfelder und Pop-ups, die geschlossen werden können, reibungslos von und zur obersten Ebene animieren.

Die erste Funktion ist transition-behavior. Verwenden Sie für die Umstellung diskreter Properties wie display den Wert allow-discrete für transition-behavior.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Anschließend werden mit der Regel @starting-style Eingabeeffekte aus display: none in die oberste Ebene animiert. Verwenden Sie @starting-style, um einen Stil anzuwenden, den der Browser aufrufen kann, bevor das Element auf der Seite geöffnet ist.

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

Zum Ausblenden eines popover- oder dialog-Elements aus der obersten Ebene fügen Sie zum Schluss die Eigenschaft overlay zur Liste der Übergänge hinzu. Fügen Sie das Overlay in den Übergang oder die Animation ein, um es zusammen mit den übrigen Elementen zu animieren. Stellen Sie sicher, dass es bei der Animation im obersten Layer verbleibt. Das sieht viel flüssiger aus.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Unter Vier neue CSS-Funktionen für reibungslose Ein- und Ausstiegsanimationen erfahren Sie, wie Sie diese Funktionen zur Verbesserung der Nutzerfreundlichkeit mit Bewegungselementen nutzen können.

Arraygruppierung

In der Programmierung ist die Arraygruppierung ein äußerst häufiger Vorgang, der am häufigsten bei der Verwendung der GROUP BY-Klausel von SQL und der MapReduce-Programmierung (die besser als „Map-Group-Reduce“ bezeichnet werden kann) zu sehen ist.

Durch die Möglichkeit, Daten in Gruppen zu kombinieren, können Entwickler Datasets höherer Ordnung berechnen. z. B. das Durchschnittsalter einer Kohorte oder die täglichen LCP-Werte für eine Webseite.

Mit der Arraygruppierung sind diese Szenarien möglich, da die statischen Methoden Object.groupBy und Map.groupBy hinzugefügt werden.

groupBy ruft eine angegebene Callback-Funktion einmal für jedes Element in einem iterierbaren Objekt auf. Die Callback-Funktion sollte einen String oder ein Symbol zurückgeben, das die Gruppe des verknüpften Elements angibt.

Im folgenden Beispiel findest du in der MDN-Dokumentation ein Array von Produkten mit der Methode groupBy, mit der die Produkte nach Typ gruppiert zurückgegeben werden.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

Weitere Informationen finden Sie in der Dokumentation zu groupBy.

Lokale Überschreibungen in den Entwicklertools optimiert.

Die Funktion für lokale Überschreibungen wurde optimiert. So können Sie im Steuerfeld Netzwerk ganz einfach Antwortheader und Webinhalte von Remote-Ressourcen simulieren, ohne darauf zugreifen zu müssen.

Wenn Sie Webinhalte überschreiben möchten, öffnen Sie den Bereich Netzwerk, klicken Sie mit der rechten Maustaste auf eine Anfrage und wählen Sie Inhalt überschreiben aus.

Die Überschreibungsoptionen im Drop-down-Menü einer Anfrage.

Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie in den Entwicklertools aktiviert. Falls Sie diese noch nicht eingerichtet haben, werden Sie von den Entwicklertools oben in der Aktionsleiste aufgefordert. Wählen Sie einen Ordner aus, in dem die Überschreibungen gespeichert werden sollen, und gewähren Sie den DevTools Zugriff darauf.

Wählen Sie einen Ordner aus und gewähren Sie über die Aktionsleiste oben Zugriff darauf.

Sobald die Überschreibungen eingerichtet sind, öffnet sich in den Entwicklertools Quellen > Überschreibungen > Editor zum Überschreiben von Webinhalten

Die überschriebenen Ressourcen werden im Bereich Netzwerk mit gekennzeichnet. Bewegen Sie den Mauszeiger auf das Symbol, um zu sehen, was überschrieben wird.

In diesem Artikel finden Sie alle Details und weitere Informationen zu den Entwicklertools in Chrome 117.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Der mit Spannung erwartete Wert subgrid für grid-template-columns und grid-template-rows ist jetzt in Chrome implementiert.
Es gibt einen WebSQL-Test zur Einstellung und einen Entwicklertest für die unload-Ereigniseinstellung.

Weitere Informationen

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

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.

Hallo Adriana Jara, und sobald Chrome 117 veröffentlicht wird, melde ich mich, um Ihnen die Neuerungen in Chrome mitzuteilen.