Neu in Chrome 117

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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.

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

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.

Wählen Sie oben in der Aktionsleiste einen Ordner aus und gewähren Sie den 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 Gespeichert. gekennzeichnet. Bewegen Sie den Mauszeiger auf das Symbol, um zu sehen, was überschrieben wird.

Ein Überschreibungssymbol neben einer Anfrage im Bereich „Network“ (Netzwerk).

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.

Weitere Informationen

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

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.