Neu in Chrome 117

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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

Neue CSS-Funktionen für Animationen zum Ein- und Ausblenden.

Mit diesen drei neuen CSS-Funktionen können Sie ganz einfach Ein- und Ausblendeanimationen hinzufügen und Elemente, die auf der obersten Ebene geschlossen werden können, z. B. Dialogfelder und Pop-overs, flüssig animieren.

Das erste Feature ist transition-behavior. Verwenden Sie für den Übergang von diskreten Attributen 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 wird die @starting-style-Regel verwendet, um Einblendungseffekte von display: none in die oberste Ebene zu animieren. Verwenden Sie @starting-style, um einen Stil anzuwenden, den der Browser nachschlagen kann, bevor das Element auf der Seite geöffnet wird.

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

Wenn Sie schließlich ein popover oder dialog aus der obersten Ebene ausblenden möchten, fügen Sie die Eigenschaft overlay in Ihre Liste der Übergänge ein. Fügen Sie das Overlay in den Übergang oder die Animation ein, um es zusammen mit den anderen Elementen zu animieren und dafür zu sorgen, dass es bei der Animation auf der obersten Ebene bleibt. Das sieht dann viel flüssiger aus.

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

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

Weitere Informationen zur Verwendung dieser Funktionen zur Verbesserung der Nutzerfreundlichkeit durch Animationen finden Sie unter Vier neue CSS-Funktionen für sanfte Ein- und Ausblendeanimationen.

Array-Gruppierung

In der Programmierung ist die Array-Gruppierung ein sehr 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 wird) auftritt.

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

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

groupBy ruft eine bereitgestellte Callback-Funktion einmal für jedes Element in einem Iterable auf. Die Callback-Funktion sollte einen String oder ein Symbol zurückgeben, das die Gruppe des zugehörigen Elements angibt.

Im folgenden Beispiel aus der MDN-Dokumentation wird ein Array von Produkten mit der Methode groupBy verwendet, um sie nach Typ gruppiert 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 Lokale Überschreibungen wurde optimiert. Sie können jetzt Antwortheader und Webinhalte von Remote-Ressourcen über das Netzwerk-Panel ganz einfach simulieren, ohne darauf zugreifen zu müssen.

Wenn Sie Webinhalte überschreiben möchten, öffnen Sie den Bereich Netzwerk, rechtsklicken Sie auf eine Anfrage und wählen Sie Inhalte ü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 Sie sie noch nicht eingerichtet haben, werden Sie in der Aktionsleiste oben in DevTools dazu aufgefordert. Wählen Sie einen Ordner aus, in dem die Überschreibungen gespeichert werden sollen, und gewähren Sie DevTools Zugriff darauf.

Wählen Sie einen Ordner aus und gewähren Sie in der Aktionsleiste oben Zugriff darauf.

Nachdem die Überschreibungen eingerichtet sind, werden Sie in DevTools zu Quellen > Überschreibungen > Editor weitergeleitet, 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 Netzwerkbereich.

Weitere Informationen zu den Entwicklertools in Chrome 117

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

Dies sind nur einige wichtige Highlights. Weitere Änderungen in Chrome 117 finden Sie unter den folgenden Links.

Abonnieren

Wenn Sie auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Hallo, ich bin Adriana Jara und sobald Chrome 117 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.