Voici les informations à retenir :
- Trois nouvelles fonctionnalités CSS permettent d'ajouter facilement des animations d'entrée et de sortie.
- 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 : ce n'est pas tout.
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.
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.
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 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 sur les outils de développement dans Chrome 117.
Et bien plus !
Bien sûr, ce n'est pas tout.
La valeur
subgrid
très attendue pourgrid-template-columns
etgrid-template-rows
est désormais implémentée dans Chrome.Un essai d'abandon de
WebSQL
et un essai pour les développeurs sont prévus pour l'abandon de l'événementunload
.L'API
notRestoredReasons
pour le cache amélioré, mentionnée dans la vidéo sur Chrome 116, devrait être lancée dans cette version.
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.
- Nouveautés des outils pour les développeurs Chrome (117)
- Abandons et suppressions de Chrome 117
- Mises à jour de ChromeStatus.com pour Chrome 117
- Liste des modifications du dépôt source Chromium
- Agenda des versions Chrome
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 !