Nouveautés de Chrome 117

Adriana Jara

Voici quelques points à retenir :

Je m'appelle Adriana Jara. Découvrons les nouveautés de Chrome 117 pour les développeurs.

Nouvelles fonctionnalités CSS pour les animations d'entrée et de sortie.

Ces trois nouvelles fonctionnalités CSS complètent l'ensemble pour ajouter facilement des animations d'entrée et de sortie, et animer en douceur les éléments dismissibles de la couche supérieure, tels que les boîtes de dialogue et les pop-ups.

La première fonctionnalité est transition-behavior. Pour faire la transition des propriétés discrètes, comme display, utilisez la valeur allow-discrete pour 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;
}

La règle @starting-style est ensuite utilisée pour animer les effets d'entrée de display: none et dans la couche supérieure. Utilisez @starting-style pour appliquer un style que le navigateur peut rechercher avant que l'élément ne soit ouvert sur la page.

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

Enfin, pour estomper un popover ou un dialog de la couche supérieure, ajoutez la propriété overlay à votre liste de transitions. Incluez la superposition dans la transition ou l'animation pour l'animer avec le reste des fonctionnalités et assurez-vous qu'elle reste au premier plan lors de l'animation. Le résultat sera beaucoup plus fluide.

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

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

Consultez Quatre nouvelles fonctionnalités CSS pour des animations d'entrée et de sortie fluides pour découvrir comment utiliser ces fonctionnalités afin d'améliorer l'expérience utilisateur grâce au mouvement.

Regroupement de tableaux

En programmation, le regroupement de tableaux est une opération extrêmement courante, que l'on rencontre le plus souvent lorsque l'on utilise la clause GROUP BY de SQL et la programmation MapReduce (qui est mieux pensée comme map-group-reduce).

La possibilité de combiner des données en groupes permet aux développeurs de calculer des ensembles de données d'ordre supérieur. Par exemple, l'âge moyen d'une cohorte ou les valeurs LCP quotidiennes d'une page Web.

Le regroupement de tableaux permet ces scénarios en ajoutant les méthodes statiques Object.groupBy et Map.groupBy.

groupBy appelle une fonction de rappel fournie une fois pour chaque élément d'un itérable. La fonction de rappel doit renvoyer une chaîne ou un symbole indiquant le groupe de l'élément associé.

Dans l'exemple suivant, tiré de la documentation MDN, un tableau de produits est renvoyé groupé par type à l'aide de la méthode groupBy.

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

Pour en savoir plus, consultez la documentation groupBy.

Simplification des remplacements locaux dans les outils de développement.

La fonctionnalité Remplacements locaux est désormais simplifiée. Vous pouvez ainsi simuler facilement les en-têtes de réponse et le contenu Web des ressources distantes à partir du panneau Réseau sans y avoir accès.

Pour remplacer le contenu Web, ouvrez le panneau Réseau, effectuez un clic droit sur une requête, puis sélectionnez Remplacer le contenu.

Options de remplacement dans le menu déroulant d'une demande.

Si vous avez configuré des remplacements locaux, mais que vous les avez désactivés, les outils de développement les activent. Si vous ne les avez pas encore configurés, les outils de développement vous y invitent dans la barre d'action en haut de l'écran. Sélectionnez un dossier dans lequel stocker les remplacements et autorisez les outils de développement à y accéder.

Sélectionnez un dossier et autorisez-y l'accès dans la barre d'action en haut de l'écran.

Une fois les remplacements configurés, les outils de développement vous redirigent vers Sources > Remplacements > Éditeur pour vous permettre de remplacer le contenu Web.

Notez que les ressources remplacées sont indiquées par Enregistré. dans le panneau Réseau. Pointez sur l'icône pour voir ce qui est remplacé.

Icône de remplacement à côté d'une requête dans le panneau "Réseau".

Pour en savoir plus sur les outils de développement dans Chrome 117, consultez Nouveautés des outils pour les développeurs.

Et bien plus !

Bien sûr, il y en a beaucoup d'autres.

Documentation complémentaire

Cette liste ne couvre que quelques points clés. Consultez les liens ci-dessous pour découvrir les autres modifications apportées à Chrome 117.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo.

Je m'appelle Adriana Jara et, dès que Chrome 117 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.