Nieuw in Chrome 117

Adriana Jara

U moet het volgende weten:

Ik ben Adriana Jara. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 117.

Nieuwe CSS-functies voor animaties bij openen en sluiten.

Met deze 3 nieuwe CSS-functies kun je makkelijk animaties toevoegen voor het openen en sluiten van elementen en soepel animeren naar en van de bovenste laag van sluitbare elementen, zoals dialoogvensters en popovers.

De eerste functie is transition-behavior. Als u afzonderlijke eigenschappen wilt overzetten, zoals display, gebruikt u de waarde allow-discrete voor 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;
}

Daarna wordt de regel @starting-style gebruikt om invoereffecten van display: none naar de bovenste laag te animeren. Gebruik @starting-style om een stijl toe te passen die de browser kan opzoeken voordat het element op de pagina wordt geopend.

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

Als je een popover of dialog wilt laten vervagen in de bovenste laag, voeg je de property overlay toe aan je lijst met overgangen. Neem de overlay op in de overgang of animatie om de overlay samen met de rest van de functies te animeren en te zorgen dat deze in de bovenste laag blijft tijdens het animeren. Dit ziet er veel vloeiender uit.

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

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

Ga naar 4 nieuwe CSS-functies voor vloeiende animaties bij het openen en sluiten voor meer informatie over hoe u deze functies gebruikt om de gebruikerservaring met beweging te verbeteren.

Matrixgroepering

In de programmeerwereld is groepering van arrays een veelvoorkomende bewerking. Deze wordt het vaakst gebruikt als we de GROUP BY-clausule van SQL en MapReduce-programmering gebruiken (wat beter kan worden beschouwd als map-group-reduce).

Door gegevens te combineren in groepen kunnen ontwikkelaars datasets van een hoger niveau berekenen. Bijvoorbeeld de gemiddelde leeftijd van een cohort of dagelijkse LCP-waarden voor een webpagina.

Groeperen van arrays maakt deze scenario's mogelijk door de statische methoden Object.groupBy en Map.groupBy toe te voegen.

groupBy roept een aangeleverde callbackfunctie één keer aan voor elk element in een iterabel. De callbackfunctie moet een tekenreeks of symbool retourneren dat de groep van het gekoppelde element aangeeft.

In het volgende voorbeeld uit de MDN-documentatie is er een reeks producten waarbij de methode groupBy wordt gebruikt om ze gegroepeerd op type te retourneren.

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 }
  ]
}
*/

Ga naar de groupBydocumentatie voor meer informatie.

Lokale overschrijvingen gestroomlijnd in DevTools.

De functie lokale overschrijvingen is nu gestroomlijnd, zodat je makkelijk reactieheaders en webcontent van externe bronnen kunt simuleren vanuit het deelvenster Netwerk zonder er toegang toe te hebben.

Als je webcontent wilt overschrijven, open je het deelvenster Netwerk, klik je met de rechtermuisknop op een verzoek en selecteer je Content overschrijven.

De overschrijvingsopties in het dropdownmenu van een verzoek.

Als je lokale overschrijvingen hebt ingesteld maar uitgezet, zet DevTools ze aan. Als je ze nog niet hebt ingesteld, vraagt DevTools je in de actiebalk bovenaan om dit te doen. Selecteer een map waarin je de overschrijvingen wilt opslaan en geef DevTools toegang tot die map.

Selecteer een map en geef er toegang toe in de actiebalk bovenaan.

Nadat de overschrijvingen zijn ingesteld, gaat DevTools naar Bronnen > Overschrijvingen > Editor, zodat je webcontent kunt overschrijven.

De overschreven bronnen worden in het deelvenster Netwerk aangegeven met Opgeslagen.. Plaats de cursor op het icoon om te zien wat er is overschreven.

Een overschrijvingsicoon naast een verzoek in het deelvenster Netwerk.

Ga naar Wat is er nieuw in DevTools voor alle details en meer informatie over DevTools in Chrome 117.

En meer

Er is natuurlijk nog veel meer.

Aanvullende informatie

Dit zijn maar enkele belangrijke punten. Check de links hieronder voor meer wijzigingen in Chrome 117.

Abonneren

Abonneer je op het YouTube-kanaal van Chrome Developers om up-to-date te blijven. Je krijgt dan een e-mailmelding als we een nieuwe video lanceren.

Ik ben Adriana Jara en zodra Chrome 117 is uitgebracht, ben ik hier om je te vertellen wat er nieuw is in Chrome.