Dazu sollten Sie Folgendes wissen:
- Drei neue CSS-Funktionen erleichtern das Hinzufügen von flüssigen Einstiegs- und Exit-Animationen.
- Berechnen Sie Datasets höherer Ordnung mit der Arraygruppierung.
- Die Entwicklertools erleichtern lokale Überschreibungen.
- Und es gibt viele weitere.
Mein Name ist Adriana Jara. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 117 gibt.
Neue CSS-Funktionen für Einstiegs- und Exit-Animationen
Diese drei neuen CSS-Funktionen vervollständigen das Set, sodass Sie ganz einfach Einstiegs- und Exit-Animationen hinzufügen sowie nahtlos zu und von den auswählbaren Elementen der obersten Ebene wie Dialogen und Pop-overs animieren können.
Die erste Funktion ist transition-behavior
. Verwenden Sie zum Übertragen diskreter Attribute wie display
den allow-discrete
-Wert 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
Eintragseffekte von display: none
in die oberste Ebene animiert. Mit @starting-style
können Sie einen Stil anwenden, nach dem der Browser suchen kann, bevor das Element auf der Seite geöffnet wird.
/* 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);
}
Wenn Sie schließlich popover
oder dialog
von der obersten Ebene ausblenden möchten, fügen Sie der Liste der Übergänge die Eigenschaft overlay
hinzu. Binden Sie ein Overlay in den Übergang oder in die Animation ein, um das Overlay zusammen mit den anderen Funktionen zu animieren. Achten Sie außerdem darauf, dass es bei der Animation auf der obersten Ebene bleibt. 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;
}
Im Artikel Vier neue CSS-Funktionen für flüssige Einstiegs- und Exit-Animationen erfahren Sie, wie Sie mit diesen Funktionen die Nutzerfreundlichkeit durch Bewegungselemente verbessern können.
Arraygruppierung
In der Programmierung ist die Array-Gruppierung eine äußerst gängige Operation, die am häufigsten auftritt, wenn wir die GROUP BY-Klausel von SQL und die MapReduce-Programmierung verwenden (was besser als Map-group-Reduce betrachtet werden kann).
Durch die Möglichkeit, Daten in Gruppen zu kombinieren, können Entwickler höherrangige Datasets berechnen. z. B. das Durchschnittsalter einer Kohorte oder tägliche LCP-Werte für eine Webseite.
Für solche Szenarien bietet die Array-Gruppierung die Möglichkeit, die statischen Methoden Object.groupBy
und Map.groupBy
hinzuzufügen.
groupBy
ruft eine bereitgestellte Callback-Funktion einmal für jedes Element in einem iterierbaren Element auf. Die Callback-Funktion sollte einen String oder ein Symbol zurückgeben, das die Gruppe des zugehörigen Elements angibt.
Das folgende Beispiel aus der MDN-Dokumentation enthält ein Produktarray mit der Methode groupBy
, um sie gruppiert nach ihrem Typ zurückzugeben.
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, sodass Sie ganz einfach Antwortheader und Webinhalte von Remote-Ressourcen aus dem Steuerfeld Netzwerk simulieren können, ohne darauf zuzugreifen.
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.
Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie von den Entwicklertools aktiviert. Wenn du sie noch nicht eingerichtet hast, wirst du von den Entwicklertools oben in der Aktionsleiste dazu aufgefordert. Wähle einen Ordner aus, in dem die Überschreibungen gespeichert werden sollen, und erlaube den Entwicklertools Zugriff darauf.
Nachdem die Überschreibungen eingerichtet wurden, rufen die Entwicklertools Quellen > Überschreibungen > Editor auf, damit Sie Webinhalte überschreiben können.
Die überschriebenen Ressourcen sind im Bereich Netzwerk mit gekennzeichnet. Bewegen Sie den Mauszeiger auf das Symbol, um zu sehen, was überschrieben wird.
Unter Neue Funktionen in den Entwicklertools 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
subgrid
-Wert fürgrid-template-columns
undgrid-template-rows
ist jetzt in Chrome implementiert.Es gibt einen Test zur Einstellung von
WebSQL
und einen Testzeitraum für Entwickler für die Einstellung vonunload
-Ereignissen.Die
notRestoredReasons
API für bfcache, die im Video zu Chrome 116 erwähnt wurde, sollte in dieser Version eingeführt werden.
Weitere Informationen
Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 117.
- Neu in den Chrome-Entwicklertools (117)
- Einstellung und Entfernung von Chrome 117
- ChromeStatus.com-Updates für Chrome 117
- Änderungsliste des Chromium-Quell-Repositorys
- Release-Kalender für Chrome
Abo
Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.
Hallo Adriana Jara, und sobald Chrome 117 veröffentlicht wird, informiere ich dich über alles, was es in Chrome Neues gibt.