Nouveautés de Chrome 117

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Découvrons ensemble 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 de manière fluide depuis et vers la couche supérieure des éléments ignorables tels que les boîtes de dialogue et les fenêtres pop-up.

Première caractéristique : 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 d'entrée à partir 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. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

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

/*  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'un dialog à partir de la couche supérieure, ajoutez la propriété overlay à votre liste de transitions. Incluez une superposition dans la transition ou l'animation pour l'animer avec les autres éléments géographiques et vous assurer qu'elle reste dans la couche supérieure lors de l'animation. L'apparence 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 savoir comment les utiliser afin d'améliorer l'expérience utilisateur avec les mouvements.

Regroupement de tableaux

En programmation, le regroupement de tableaux est une opération extrêmement courante. Elle se produit le plus souvent lorsque nous utilisons la clause GROUP BY de SQL et la programmation MapReduce (mieux connue sous le nom de 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 plus élevé. 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é.

L'exemple suivant, issu de la documentation MN, présente 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.

Simplification des forçages locaux dans les outils de développement.

La fonctionnalité de remplacement local est désormais simplifiée : vous pouvez facilement simuler des en-têtes de réponse et du contenu Web de ressources distantes depuis le panneau Network, sans y accéder.

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

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

Si des forçages locaux sont configurés, mais 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 invitent à les afficher dans la barre d'action en haut de la page. Sélectionnez le dossier dans lequel stocker les forçages et autorisez les outils de développement à y accéder.

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

Une fois les forçages configurés, les outils de développement vous permettent d'accéder à Sources > Remplacements > Éditeur pour 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 remplacement en regard d'une demande dans le panneau "Réseau".

Découvrez les nouveautés des outils de développement pour en savoir plus sur les outils de développement dans Chrome 117.

Et bien plus !

Bien sûr, ce n'est pas tout.

Complément d'informations

Nous n'aborderons ici que certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 117.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Adriana Jara, soja, et dès la sortie de Chrome 117, je serai là pour vous faire part des nouveautés de Chrome !