Outils de grille CSS dans les outils de développement

Changhao Han
Changhao Han
X GitHub

Pourquoi avons-nous créé des outils de grille CSS ?

La grille CSS est un système de mise en page CSS très puissant qui permet aux développeurs Web de créer une mise en page bidimensionnelle complexe et de définir des règles sur la taille, l'alignement et l'ordre de chaque élément enfant d'une grille. CSS Grid a été introduit après la popularisation de Flexbox. Ensemble, ils peuvent aider les développeurs à obtenir un meilleur design responsif sans avoir recours à des astuces d'alignement complexes ni à une mise en page assistée par JavaScript.

En tant que système de mise en page relativement nouveau, la grille CSS est également difficile à adopter. Sa syntaxe est assez polyvalente (il suffit de rechercher un aide-mémoire). Il existe de nombreuses façons d'obtenir la même mise en page. De plus, grâce au dimensionnement flexible et aux pistes implicites, il est plus difficile de comprendre pourquoi la mise en page est ou ne se comporte pas comme elle le devrait. C'est pourquoi nous avons décidé de fournir des outils de grille CSS dédiés dans les outils de développement, afin que les développeurs puissent mieux comprendre les actions de leur code CSS et savoir comment choisir la bonne mise en page.

Conception des outils

Un effort commun entre Chrome et Edge

Les outils de grille CSS ont attiré l'attention des outils pour les développeurs Chrome et Edge. Nous avons décidé de collaborer dès le départ. Nous avons partagé les ressources de produit, d'ingénierie et de conception des deux équipes, et nous nous sommes coordonnés chaque semaine pour y parvenir.

Résumé des fonctionnalités

Les outils de grille CSS offrent trois fonctionnalités principales:

  1. Superposition persistante spécifique à la grille qui fournit des informations sur les dimensions et l'ordre
  2. Badges dans l'arborescence DOM qui mettent en évidence les conteneurs de la grille CSS et activent les superpositions de la grille
  3. Volet de barre latérale permettant aux développeurs de personnaliser l'affichage des superpositions DOM (par exemple, en modifiant la couleur et la largeur des règles)
  4. Éditeur de grille CSS dans le volet Styles

Voyons-les plus en détail.

Superpositions persistantes de grille

Dans DevTools, une superposition est un outil puissant qui fournit des informations sur la mise en page et le style d'un élément individuel:

ALT_TEXT_HERE

Ces informations supplémentaires sont superposées à l'élément d'intérêt. Auparavant, lorsque vous pointiez sur une grille avec les outils de développement ouverts, la superposition affichait les informations sur le modèle de zone, mais limitait la mise en surbrillance du contenu aux éléments de la grille sans en expliquer la raison. Nous souhaitons ajouter deux éléments principaux pour les superpositions de grille CSS:

  • Nous souhaitons afficher des informations plus utiles sur les grilles, par exemple les dimensions et les écarts créés par l'auteur.
  • nous voulons que les superpositions soient persistantes, afin de pouvoir regarder plusieurs grilles en même temps, et nous pouvons voir les superpositions mettre à jour les informations de la grille lorsque nous modifions les styles des éléments

Voyons comment nous y sommes parvenus.

Tailles créées par l'auteur et tailles calculées

L'une des difficultés du débogage de la grille CSS est qu'il existe de nombreuses façons de définir les tailles de lignes de grille. Par exemple, vous pouvez utiliser une combinaison de valeurs en pixels, de valeurs en pourcentage, de fractions, de la fonction de répétition et de la fonction minmax pour créer des tailles de piste polyvalentes:

.grid-cards {
    display: grid;
    width: 200px;
    height: 300px;
    grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Cependant, il serait difficile de faire correspondre ces tailles de piste créées aux tailles de piste calculées que le navigateur a calculées pour nous. Pour combler cette lacune, nous avons placé ces deux informations côte à côte dans la superposition:

ALT_TEXT_HERE

La chaîne avant le point correspond à la valeur créée, et la chaîne après le point représente la valeur calculée réelle.

Auparavant, les outils de développement ne pouvaient pas obtenir les valeurs créées. En théorie, nous pourrions analyser nous-mêmes les valeurs créées dans les outils de développement et les calculer conformément aux spécifications de la grille CSS. Cela aurait nécessité de nombreux scénarios complexes et ne constituerait qu'une duplication des efforts de Blink. Par conséquent, avec l'aide de l'équipe Style de Blink, le moteur de style nous a fourni une nouvelle API qui expose les "valeurs en cascade". Une valeur en cascade correspond à la valeur effective finale d'une propriété CSS, après la cascade CSS. Il s'agit de la valeur qui est gagnante après que le moteur de style a compilé toutes les feuilles de style, mais avant de calculer des valeurs, telles que des pourcentages, des fractions, etc.

Nous utilisons maintenant cette API pour afficher les valeurs créées dans les superpositions de grille.

Superpositions persistantes

Avant les outils de grille CSS, la superposition dans les outils de développement était simple: vous pointez sur un élément, soit dans le volet de l'arborescence DOM des outils de développement, soit directement dans la page inspectée, et vous verrez une superposition décrivant cet élément. Vous déplacez le pointeur, et la superposition disparaît. Pour les superpositions de grilles, nous voulions quelque chose de différent: plusieurs grilles peuvent être mises en surbrillance simultanément, et les superpositions de grilles peuvent rester activées tandis que les superpositions standards au survol restent fonctionnelles.

Exemple :

ALT_TEXT_HERE

Toutefois, la superposition dans DevTools n'a pas été conçue avec ce mécanisme persistant multi-élément à l'esprit (elle a été créée il y a de nombreuses années). Nous avons donc dû refactoriser la conception de la superposition pour que cela fonctionne. Nous avons ajouté un nouveau GridHighlightTool à une suite d'outils de mise en surbrillance existante, qui a ensuite évolué vers un PersistentTool global permettant de mettre en surbrillance toutes les superpositions persistantes en même temps. Pour chaque type de superpositions persistantes (grille, Flex, etc.), nous conservons un champ de configuration respectif dans l'outil persistant. Chaque fois que le surligneur de superposition vérifie ce qu'il doit dessiner, il inclut également ces configurations.

Pour permettre à DevTools de contrôler ce qui doit être mis en surbrillance, nous avons créé une nouvelle commande CDP pour la superposition persistante de la grille:

# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
  parameters
    # An array of node identifiers and descriptors for the highlight appearance.
    array of GridNodeHighlightConfig gridNodeHighlightConfigs

où chaque GridNodeHighlightConfig contient des informations sur le nœud à tracer et sur la manière de le dessiner. Cela nous permet d'ajouter un mécanisme persistant multi-élément sans perturber le comportement actuel du survol.

Badges de la grille en temps réel

Pour aider les développeurs à activer et désactiver facilement les superpositions de grille, nous avons décidé d'ajouter de petits badges à côté des conteneurs de grille dans l'arborescence DOM. Ces badges peuvent également aider les développeurs à identifier les conteneurs de type Grille dans leurs structures DOM.

ALT_TEXT_HERE

Modifications apportées à l'arborescence DOM

Étant donné que les badges Grid ne sont pas les seuls que nous souhaitons afficher dans l'arborescence DOM, nous souhaitons faciliter l'ajout de badges. ElementsTreeElement, la classe chargée de créer et de gérer des éléments d'arborescence DOM individuels dans DevTools, a été mise à jour avec plusieurs nouvelles méthodes publiques pour configurer des badges. Si plusieurs badges sont associés à un élément, ils sont triés par catégorie, puis par nom alphabétique s'ils appartiennent à la même catégorie. Les catégories disponibles incluent Security, Layout, etc., et Grid appartient à la catégorie Layout.

De plus, l'accessibilité est intégrée dès le départ. Chaque badge interactif doit fournir un aria-label par défaut et un aria-label actif, tandis que les badges en lecture seule utilisent leur nom de badge comme aria-label.

Comment avons-nous obtenu des mises à jour de style en temps réel ?

De nombreuses modifications DOM sont reflétées en temps réel dans l'arborescence DOM de DevTools. Par exemple, les nœuds nouvellement ajoutés apparaissent instantanément dans l'arborescence DOM, et les noms de classe supprimés disparaissent également instantanément. Nous souhaitons que l'état du badge de la grille reflète également les mêmes informations à jour. Cependant, cette approche s'est avérée difficile à implémenter, car DevTools n'avait aucun moyen de recevoir des notifications lorsque les éléments affichés dans l'arborescence DOM recevaient des mises à jour de style calculées. La seule façon existante de savoir quand un élément devient ou cesse d'être un conteneur "Grille" est d'interroger en permanence le navigateur pour obtenir les informations de style à jour de chaque élément. Cela coûterait interdit aux autres utilisateurs.

Pour que le front-end puisse savoir plus facilement quand le style d'un élément est mis à jour, nous avons ajouté une nouvelle méthode CDP pour la récupération des mises à jour de style. Pour obtenir des mises à jour de style des nœuds DOM, nous commençons par indiquer au navigateur les déclarations CSS que nous souhaitons suivre. Pour les badges de grille, nous demandons au navigateur de suivre les éléments suivants:

{
  "display": "grid",
  "display": "inline-grid",
}

Nous envoyons ensuite une requête de sondage. En cas de mise à jour de style tracée pour les nœuds DOM dans le panneau "Éléments", le navigateur envoie à DevTools une liste des nœuds mis à jour et résout la requête de sondage existante. Chaque fois que DevTools souhaite être averti des mises à jour de style, il peut envoyer cette requête d'interrogation au lieu d'interroger constamment le backend à partir de chaque nœud. DevTools peut également modifier les déclarations CSS suivies en envoyant une nouvelle liste au navigateur.

Volet "Mise en page"

Bien que les badges de l'arborescence DOM facilitent la visibilité des grilles CSS, il est parfois utile d'afficher la liste de toutes les grilles CSS d'une page donnée, et d'activer ou de désactiver facilement leurs superpositions persistantes pour déboguer leurs mises en page. C'est pourquoi nous avons décidé de créer un volet de barre latérale dédié uniquement aux outils de mise en page. Nous disposons ainsi d'un espace dédié pour rassembler tous les conteneurs de grille et configurer toutes les options des superpositions de grille. Ce volet Mise en page nous permet également d'y placer les futurs outils de mise en page (par exemple, Flexbox et les requêtes de conteneur).

Rechercher des éléments par styles calculés

Pour afficher la liste des conteneurs CSS Grid dans le volet Mise en page, nous devons rechercher les nœuds DOM par styles calculés. Cela s'est avéré compliqué non plus, car tous les nœuds DOM ne sont pas connus des outils de développement lorsqu'ils sont ouverts. En effet, les outils de développement ne connaissent qu'un petit sous-ensemble de nœuds, généralement au niveau supérieur de la hiérarchie DOM, juste pour lancer l'arborescence DOM. Pour des raisons de performances, les autres nœuds ne seront récupérés que sur demande. Cela signifie que nous avons besoin d'une nouvelle commande CDP pour collecter tous les nœuds de la page et les filtrer en fonction de leurs styles calculés:

# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
  parameters
    # Node ID pointing to the root of a subtree.
    NodeId nodeId
    # The style to filter nodes by (includes nodes if any of properties matches).
    array of CSSComputedStyleProperty computedStyles
    # Whether or not iframes and shadow roots in the same target should be traversed when returning the
    # results (default is false).
    optional boolean pierce
  returns
    # Resulting nodes.
    array of NodeId nodeIds

Cela permet à l'interface des outils de développement d'obtenir une liste des conteneurs de grille CSS sur une page, éventuellement en transférant des iFrames et des racines fantômes, et de les afficher dans le volet "Mise en page".

Conclusion

Les outils de conception CSS Grid ont été l'un des premiers projets d'outils de conception DevTools à prendre en charge une fonctionnalité de la plate-forme Web. Elle a lancé de nombreux outils fondamentaux dans DevTools, comme les superpositions persistantes, les badges de l'arborescence DOM et le volet Mise en page, et a ouvert la voie aux futurs outils de mise en page dans Chrome DevTools, comme les requêtes Flexbox et Container. Il a également posé les bases des éditeurs Grid et Flexbox, qui permettent aux développeurs de modifier les alignements Grid et Flexbox de manière interactive. Nous y reviendrons plus tard.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.