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 facilitent l'ajout d'animations d'entrée et de sortie fluides.
Calculez des ensembles de données d'ordre supérieur grâce au regroupement de tableaux.
Les outils de développement facilitent les remplacements locaux.
Et ce n'est pas tout

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 vers et depuis les éléments de la couche supérieure pouvant être ignorés, tels que les boîtes de dialogue et les fenêtres pop-up.

La première caractéristique est transition-behavior. Pour effectuer la transition de propriétés discrètes, telles que display, utilisez la valeur allow-discrete de 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. 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'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;
}

Découvrez 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 grâce aux mouvements.

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 (que l'on considère mieux comme map-group-reduce).

La possibilité de combiner des données dans des 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 active 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, 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 de groupBy.

Remplacements locaux simplifiés dans les outils de développement

La fonctionnalité Remplacements locaux est désormais simplifiée pour que vous puissiez facilement simuler 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 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 les avez pas encore configurés, ils s'affichent 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 l'accès à celui-ci dans la barre d'action située 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 dans le panneau Network (Réseau). Pointez sur l'icône pour voir ce qui a été 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 entendu, ce n'est pas tout !

La valeur subgrid tant attendue pour grid-template-columns et grid-template-rows est désormais implémentée dans Chrome.
Il existe une évaluation avant arrêt de WebSQL et un essai destiné aux développeurs pour l'abandon de l'événement unload.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens ci-dessous pour modifications supplémentaires dans Chrome 117.

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.

Bonjour Adriana Jara. Dès la sortie de Chrome 117, je serai là pour vous présenter les nouveautés de Chrome.