Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 117

Adriana Jara

Voici les informations à retenir :

Trois nouvelles fonctionnalités CSS permettent d'ajouter facilement des animations de début et de fin fluides.
Calculez des ensembles de données d'ordre supérieur à l'aide du regroupement de tableaux.
Les outils de développement facilitent les forcements locaux.
Et ce n'est pas tout !

Je m'appelle Adriana Jara. Voyons ce que Chrome 117 a de nouveau à offrir aux 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 s'ouvre 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 faire disparaître 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 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 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 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 d'un tableau est une opération extrêmement courante, que l'on voit le plus souvent lorsque nous utilisons la clause GROUP BY de SQL et la programmation MapReduce (qui peut être 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 quotidiennes du LCP pour 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, tiré de la documentation MDN, un tableau de produits est renvoyé par la méthode groupBy, 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 forçage dans le menu déroulant d'une requête.

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 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-y l'accès dans la barre d'action en haut de l'écran.

Une fois les forçages configurés, DevTools vous permet d'accéder à Sources > Forcements > Éditeur pour forcer le contenu Web.

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

Découvrez les nouveautés des outils de développement pour en savoir plus et obtenir plus d'informations à leur sujet dans Chrome 117.

Et bien plus !

Bien sûr, il y a bien d'autres choses.

La valeur subgrid tant attendue pour grid-template-columns et grid-template-rows est désormais implémentée dans Chrome.
Une évaluation avant l'abandon de WebSQL et une évaluation avant l'abandon de l'événement unload sont disponibles pour les développeurs.

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 supplémentaires dans Chrome 117.

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors 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.