Nouveautés de Chrome 117

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Intéressons-nous maintenant aux 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 de manière fluide les éléments réductibles de la couche supérieure, tels que les boîtes de dialogue et les popovers.

La première fonctionnalité est transition-behavior. Pour effectuer la transition de propriétés discrètes, telles que 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 permet ensuite d'animer les effets des entrées depuis 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 effectuer un fondu d'une popover ou d'une dialog à partir de la couche supérieure, ajoutez la propriété overlay à votre liste de transitions. Incluez la superposition dans la transition ou l'animation pour animer la superposition avec le reste des fonctionnalités et vous assurer qu'elle reste dans la couche supérieure lors de l'animation. Le rendu 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 de début et de fin fluides pour savoir comment utiliser ces fonctionnalités afin d'améliorer l'expérience utilisateur avec le mouvement.

Regroupement de tableaux

En programmation, le regroupement de tableaux est une opération extrêmement courante, qui se produit le plus souvent lorsque nous utilisons la clause SQL GROUP BY et la programmation MapReduce (qui est mieux considéré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 de plus haut niveau. (par exemple, l'âge moyen d'une cohorte ou les valeurs LCP quotidiennes d'une page Web).

Le regroupement d'arrays permet de mettre en œuvre 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, issu de la documentation MDN, il existe un tableau de produits avec la méthode groupBy utilisée pour les renvoyer, regroupés par type.

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.

Les forçages locaux ont été simplifiés dans les outils de développement.

La fonctionnalité Remplacements locaux est désormais simplifiée pour vous permettre de 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 Network (Réseau), effectuez un clic droit sur une requête, puis sélectionnez Override content (Remplacer le contenu).

Options de remplacement dans le menu déroulant d'une requête.

Si vous avez configuré des forçages locaux, mais que vous les avez désactivés, DevTools les active. Si vous ne l'avez pas encore fait, DevTools vous invite à le faire dans la barre d'action en haut de l'écran. Sélectionnez un dossier dans lequel stocker les forçages et autorisez DevTools à y accéder.

Sélectionnez un dossier et autorisez l'accès à celui-ci dans la barre d'action en haut.

Une fois les forçages configurés, les outils de développement vous redirigent vers Sources > Remplacements > Editor pour vous permettre de remplacer le contenu Web

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

Icône de forçage à côté d'une requête dans le panneau "Network" (Réseau)

Pour en savoir plus sur les outils pour les développeurs dans Chrome 117, consultez les nouveautés de DevTools.

Et bien plus !

Bien entendu, ce n'est pas tout !

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications apportées à Chrome 117.

S'abonner

Pour vous tenir informé, abonnez-vous à la Chaîne YouTube des développeurs Chrome, et vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

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