Outils de grille CSS dans les outils de développement

Changhao Han

Pourquoi avons-nous créé les 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 complexe en deux dimensions et de définir des règles sur la taille, l'alignement et l'ordre de chaque élément enfant d'une grille. La grille CSS a été introduite après l'essor de Flexbox. Ensemble, elles peuvent aider les développeurs à améliorer le responsive design sans avoir recours à des alignements complexes ou à 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 à un dimensionnement flexible et à des 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 d'outils

Collaboration entre Chrome et Edge

Les outils de grille CSS ont attiré l'attention à la fois des outils pour les développeurs Chrome et des outils pour les développeurs Edge. Nous avons décidé de collaborer depuis le début. Nous avons partagé les ressources produit, d'ingénierie et de conception des deux équipes, et nous nous sommes coordonnés chaque semaine pour atteindre cet objectif.

Récapitulatif des fonctionnalités

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

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

Examinons-les de plus près.

Superpositions persistantes de la grille

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

Ces informations supplémentaires sont superposées à l'élément qui vous intéresse. 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. Il y a deux parties principales que nous aimerions ajouter pour les superpositions de grille CSS:

• nous voulons afficher des informations plus utiles sur les grilles, par exemple les dimensions créées et les écarts
• 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 avons réussi à atteindre ces deux objectifs.

Tailles créées et tailles calculées

L'un des aspects les plus difficiles du débogage de la grille CSS réside dans les nombreuses façons de définir la taille des pistes de la grille. Par exemple, vous pouvez utiliser une combinaison de valeurs de pixels, de pourcentages, de fractions, de fonctions de répétition et de 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 mapper ces tailles de piste créées aux tailles de piste calculées que le navigateur a calculées pour nous. Pour combler cet écart, nous plaçons ces deux informations côte à côte sur la superposition:

La chaîne située avant le point correspond à la valeur créée, et celle située 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 à la spécification de la grille CSS. Cela aurait nécessité de nombreux scénarios compliqués et il s’agirait essentiellement d’un double des efforts de Blink. Par conséquent, avec l'aide de l'équipe Style de Blink, nous avons créé une nouvelle API du moteur de style qui expose les "valeurs en cascade". Une valeur en cascade correspond à la valeur effective finale, après la cascade CSS, pour une propriété CSS. Il s'agit de la valeur qui est gagnante une fois que le moteur de style a compilé toutes les feuilles de style, mais avant de calculer des valeurs (par exemple, pourcentages, 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. Lorsque vous passez la souris hors de l'appareil, la superposition disparaît. Pour les superpositions "Grille", nous voulions quelque chose de différent: plusieurs grilles peuvent être mises en surbrillance simultanément, et les superpositions "Grille" peuvent rester activées tandis que les superpositions classiques lorsque l'utilisateur pointe dessus restent fonctionnelles.

Exemple :

Cependant, la superposition dans les outils de développement n'a pas été conçue pour ce mécanisme multi-éléments et persistant (il a été créé il y a de nombreuses années). Nous avons donc dû refactoriser la conception de superposition pour que cela fonctionne. Nous avons ajouté un nouveau GridHighlightTool à une suite d'outils de mise en surbrillance existante, qui a ensuite évolué pour devenir un PersistentTool global permettant de mettre en évidence 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 en superposition recherche les éléments à dessiner, ces configurations sont également incluses.

Pour permettre aux outils de développement de contrôler ce qui doit être mis en évidence, nous avons créé une commande CDP pour la superposition persistante en 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 façon de le dessiner. Cela nous permet d'ajouter un mécanisme de persistance multi-éléments 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 "Grille", nous avons décidé d'ajouter de petits badges à côté des conteneurs "Grille" dans l'arborescence DOM. Ces badges peuvent également aider les développeurs à identifier les conteneurs de type Grille dans leurs structures DOM.

Modifications apportées à l'arborescence DOM

Étant donné que les badges Grid ne sont pas les seuls badges que nous souhaitons afficher dans l'arborescence des DOM, nous souhaitons que l'ajout de badges soit aussi simple que possible. ElementsTreeElement, la classe chargée de créer et de gérer les éléments individuels de l'arborescence DOM dans les outils de développement, a été mise à jour avec plusieurs nouvelles méthodes publiques de configuration des badges. S'il existe plusieurs badges pour un élément, ils sont triés par catégorie de badges, puis leur nom par ordre alphabétique s'ils se trouvent dans la même catégorie. Les catégories disponibles incluent Security, Layout, etc., et Grid appartient à la catégorie Layout.

De plus, nous proposons une prise en charge des fonctionnalités d'accessibilité intégrée dès le départ. Chaque badge interactif doit fournir une valeur par défaut et un aria-label actif, tandis que les badges en lecture seule utilisent le nom de leur badge comme aria-labels.

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

De nombreuses modifications DOM sont répercutées en temps réel dans l'arborescence DOM des outils de développement. Par exemple, les nœuds nouvellement ajoutés apparaissent instantanément dans l'arborescence DOM, et les noms des classes supprimées disparaissent également instantanément. Nous souhaitons que l'état du badge "Grille" reflète également les mêmes informations à jour. Toutefois, l'implémentation s'est avérée difficile à implémenter, car les outils de développement n'avaient aucun moyen de recevoir des notifications lorsque des éléments affichés dans l'arborescence DOM reçoivent 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 permettre au frontal de savoir plus facilement quand le style d'un élément a été modifié, nous avons ajouté une méthode CDP pour l'interrogation des mises à jour de style. Pour obtenir les mises à jour de style des nœuds DOM, nous commençons par indiquer au navigateur les déclarations CSS que nous voulons suivre. Dans le cas des badges Grille, nous demandons au navigateur de garder une trace des éléments suivants:

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

Nous envoyons ensuite une demande d'interrogation. Lorsque des mises à jour de style suivies sont disponibles pour les nœuds DOM dans le panneau "Elements", le navigateur envoie aux outils de développement une liste des nœuds mis à jour et résout la demande d'interrogation existante. Chaque fois que les outils de développement souhaitent être à nouveau informés des mises à jour de style, ils peuvent envoyer cette demande d'interrogation au lieu d'interroger constamment le backend de chaque nœud. Les outils de développement peuvent également modifier les déclarations CSS suivies en envoyant une nouvelle liste au navigateur.

Volet de mise en page

Bien que les badges de l'arborescence DOM contribuent à la visibilité des grilles CSS, nous souhaitons parfois afficher la liste de toutes les grilles CSS d'une page donnée, et activer ou désactiver facilement leurs superpositions persistantes pour déboguer leurs mises en page. Par conséquent, nous avons décidé de créer un volet de barre latérale dédié aux outils de mise en page. Nous disposons ainsi d'un espace dédié pour rassembler tous les conteneurs "Grille" et configurer toutes les options pour les superpositions de grille. Ce volet Layout (Mise en page) nous permet également d'y placer de futurs outils gourmands en mise en page (comme Flexbox ou des requêtes de conteneur).

Rechercher des éléments à l'aide de styles calculés

Pour afficher la liste des conteneurs de grille CSS dans le volet Layout (Mise en page), nous devons rechercher les nœuds DOM à l'aide des 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. À la place, 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 grille CSS ont été l'un des premiers projets d'outils de conception d'outils de développement à prendre en charge une fonctionnalité de la plate-forme Web. Il a lancé de nombreux outils de base dans les outils de développement, tels que des superpositions persistantes, des badges d'arborescence DOM et du volet Layout (Mise en page), ce qui a ouvert la voie à de futurs outils de mise en page dans les outils pour les développeurs Chrome, tels que Flexbox et les requêtes de conteneur. 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 les passerons en revue à l’avenir.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.