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 sind lokale Überschreibungen einfacher.
- Und es gibt noch viele weitere Funktionen.
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.
Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie in den Entwicklertools aktiviert. Falls Sie sie 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.
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.
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.
Der mit Spannung erwartete Wert
subgrid
fürgrid-template-columns
undgrid-template-rows
ist jetzt in Chrome implementiert.Es gibt einen Test zur Einstellung von
WebSQL
und einen Entwickler-Testzeitraum für die Einstellung desunload
-Ereignisses.
Weitere Informationen
Hier werden nur einige wichtige Punkte behandelt. Klicken Sie auf die Links unten, zusätzliche Änderungen in Chrome 117.
- Neu bei den Chrome-Entwicklertools (117)
- Chrome 117: Einstellung und Entfernung
- ChromeStatus.com-Updates für Chrome 117
- Änderungsliste für das Chromium-Quell-Repository
- Release-Kalender für Chrome
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.