Nouveautés de Chrome 112

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Intéressons-nous maintenant aux nouveautés de Chrome 112 pour les développeurs.

Prise en charge de 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: l'imbrication des règles de style.

Avant l'imbrication, chaque sélecteur devait être explicitement déclaré, séparément des les uns les autres. Cela entraîne des répétitions, l'encombrement de la feuille de style et une dispersion expérience.

Avant
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Après l'imbrication, les sélecteurs peuvent être les règles de style continu et associées peuvent être regroupé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 associés. Elle peut également aider les styles à correspondre 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 les instances de sélecteur associées dans les fichiers.

L'imbrication peut vous aider à:

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

Consultez cet article pour obtenir des conseils qui vous aideront à tirer le meilleur parti de l'imbrication CSS. Cliquez ici pour obtenir de l'aide concernant l'imbrication dans les outils de développement.

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

L'élément HTML <dialog> est la méthode standardisée pour représenter une boîte de dialogue ou un autre composant interactif, comme une alerte qu'il est possible de fermer ou une sous-fenêtre, qui doit s'afficher au-dessus de l'ensemble du contenu d'une page Web.

Cet élément HTML est la méthode recommandée pour créer un contenu de ce type, car ses fonctionnalités ont été conçues pour améliorer la facilité d'utilisation et l'accessibilité.

L'une de ces fonctionnalités consiste à gérer 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 sélection de la boîte de dialogue s'intéressent aux éléments sélectionnables au clavier plutôt qu'aux éléments sélectionnables L'élément <dialog> est lui-même sélectionné si l'attribut autofocus est défini.

L'élément <dialog> lui-même est sélectionné comme élément de remplacement au lieu d'être "réinitialiser" à l'élément <body>.

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

Ignorer les gestionnaires d'extraction no-op de service worker.

À partir de Chrome 112, le démarrage du service worker et l'envoi de l'écouteur du chemin critique de navigation seront omis si un user-agent détermine 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 d'extraction constituait l'une des conditions requises pour les PWA pour qu'une application Web puisse être installée. 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 n'entraîne que des frais généraux, sans apporter les avantages qui pourraient être mis en œuvre avec le service worker approprié, comme la mise en cache ou les fonctionnalités hors connexion. Chrome les ignore donc désormais 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 encourage les développeurs à les supprimer.

Avertissements dans les outils de développement concernant les gestionnaires d&#39;extraction de service worker vides.

Et bien plus !

Bien entendu, ce n'est pas tout !

  • Le setter pour document.domain est désormais obsolète.
  • Il existe une phase d'évaluation pour l'abandon de X-Requested-With header dans WebView.
  • Dans les outils de développement, l'enregistreur peut désormais effectuer des enregistrements à l'aide de sélecteurs de pierre.

Documentation complémentaire

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

S'abonner

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.

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