Nouveautés de Chrome 112

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés de Chrome 112 pour les développeurs.

Prise en charge des CSS pour l'imbrication.

L'une de nos fonctionnalités préférées de préprocesseur CSS est désormais intégrée au langage: les règles de style d'imbrication.

Avant l'imbrication, chaque sélecteur devait être déclaré explicitement, séparément les uns des autres. Cela entraîne des répétitions, une accumulation de feuilles de style et une expérience de création éparse.

Avant
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Après l'imbrication, vous pouvez poursuivre les sélecteurs et regrouper les règles de style qui leur sont associées.

Après
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

L'imbrication aide les développeurs en réduisant le besoin de répéter les sélecteurs tout en colocalisant les règles de style pour les éléments connexes. Cela permet également d'adapter les styles au code HTML qu'ils ciblent.

Si le composant .nesting de l'exemple a été supprimé du projet, vous pouvez supprimer l'ensemble du groupe au lieu de rechercher dans les fichiers des instances de sélecteur associées.

L'imbrication peut aider à:

  • Organisation.
  • Réduction de la taille des fichiers
  • Refactorisation.

Consultez cet article pour obtenir des conseils pour tirer le meilleur parti de l'imbrication CSS. Si vous avez besoin d'aide pour l'imbrication dans les outils de développement, cliquez ici.

Mise à jour de l'algorithme pour le ciblage initial de <dialog>.

L'élément HTML <dialog> est la manière standardisée de représenter une boîte de dialogue ou un autre composant interactif, tel qu'une alerte pouvant être ignorée ou une sous-fenêtre, qui doit s'afficher au-dessus de tout autre contenu d'une page Web.

Cet élément HTML est recommandé pour créer ce type de contenu, car ses fonctionnalités ont été conçues pour offrir une facilité d'utilisation et une accessibilité cohérentes et de meilleure qualité.

L'une de ces fonctionnalités gère l'élément sélectionné lorsque la boîte de dialogue est ouverte. Dans cette version, l'algorithme qui sélectionne cet élément a été mis à jour.

À partir de maintenant:

Les étapes de mise au point de la boîte de dialogue examinent les éléments sélectionnables au clavier au lieu de tout élément sélectionnable. L'élément <dialog> lui-même est sélectionné si l'attribut de mise au point automatique est défini.

L'élément <dialog> lui-même est sélectionné en remplacement au lieu d'être réinitialisé sur l'élément <body>.

Consultez la documentation pour en savoir plus sur l'élément <dialog>.

Gestionnaires de récupération no-op de service worker ignorés.

À partir de Chrome 112, le démarrage du service worker et l'envoi des écouteurs à partir du chemin critique de navigation seront omis si un user-agent identifie que tous les écouteurs d'extraction du service worker sont no-ops.

Cette fonctionnalité accélère la navigation sur ces pages.

Disposer du gestionnaire de récupération constituait l'une des exigences des PWA pour qu'une application Web puisse être installée. Nous pensons que c'est peut-être la raison pour laquelle certains sites ont essentiellement un gestionnaire d'extraction vide. Toutefois, le démarrage d'un service worker et l'exécution d'un écouteur no-op ne fait qu'entraîner des frais généraux, sans offrir les avantages qui pourraient être mis en œuvre avec un service worker approprié, comme la mise en cache ou les fonctionnalités hors connexion. Chrome les ignore donc pour améliorer la navigation.

Dans le cadre de ce changement, Chrome affichera des avertissements dans la console si tous les écouteurs d'extraction du service worker sont no-ops, et incitera les développeurs à les supprimer.

Avertissements dans les outils de développement concernant des gestionnaires de récupération de service worker vides.

Et bien plus !

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

  • Abandon du setter pour document.domain.
  • Une phase d'évaluation est disponible pour l'abandon de X-Requested-With header dans WebView.
  • L'enregistreur dans les outils de développement peut désormais enregistrer avec des sélecteurs de morceaux.

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 112.

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.

Je m'appelle Adriana Jara. Dès la sortie de Chrome 113, je serai là pour vous dire les nouveautés de Chrome !