Neu in Chrome 117

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mein Name ist 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

Diese drei neuen CSS-Funktionen vervollständigen einfaches Hinzufügen von Ein- und Exit-Animationen, und gleitend zu und von der obersten Ebene animieren, um schließbare Elemente wie Dialoge und Popovers zu ändern.

Die erste Funktion ist transition-behavior. Wenn Sie diskrete Eigenschaften wie display umstellen möchten, verwenden Sie 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. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. 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;
}

/*  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 Array-Gruppierung ein äußerst häufiger Vorgang, der am häufigsten auftritt, wenn wir die GROUP BY-Klausel von SQL und die MapReduce-Programmierung verwenden (was besser als „map-group-reduce“ zu verstehen ist).

Dank der 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.

Durch die Arraygruppierung werden diese Szenarien durch Hinzufügen der statischen Methoden Object.groupBy und Map.groupBy ermöglicht.

groupBy ruft eine bereitgestellte Callback-Funktion für jedes Element in einer Iteration einmal 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 das Steuerfeld 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 Entwicklertools 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 Gespeichert. gekennzeichnet. Bewegen Sie den Mauszeiger auf das Symbol, um zu sehen, was überschrieben wird.

Ein Überschreibungssymbol neben einer Anfrage im Steuerfeld „Netzwerk“.

Sehen Sie sich die Neuerungen in den Entwicklertools an, um mehr über die Entwicklertools in Chrome 117 zu erfahren.

…und vieles mehr

Natürlich gibt es noch viele weitere.

Weitere Informationen

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

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.

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