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 concernant la taille, l'alignement et l'ordre de chaque élément enfant d'une grille. La grille CSS a été introduite après le succès de Flexbox. Ensemble, elles peuvent aider les développeurs à améliorer le responsive design sans faire de piratages d'alignement compliqués ou de mise en page assistée par JavaScript.
En tant que système de mise en page relativement nouveau, la grille CSS est également difficile à comprendre. Sa syntaxe est assez polyvalente : il suffit de rechercher fiche grille. Il existe de nombreuses façons d'obtenir la même mise en page. De plus, le dimensionnement flexible et les pistes implicites rendent plus difficile l'explication des raisons pour lesquelles la mise en page est ou ne se comporte pas comme elle le devrait. C'est pourquoi nous avons décidé de proposer un outil dédié à la grille CSS dans les outils de développement. Les développeurs pourront ainsi mieux comprendre ce que fait leur code CSS et savoir comment choisir la mise en page appropriée.
Conception des outils
Une collaboration entre Chrome et Edge
Les outils de grille CSS ont capté l'attention des outils pour les développeurs Chrome et des outils de développement Edge. Nous avons décidé de collaborer dès le début. Nous avons partagé nos ressources produit, d'ingénierie et de conception auprès des deux équipes, et nous nous sommes coordonnés chaque semaine pour y parvenir.
Résumé des fonctionnalités
Les outils de grille CSS présentent trois fonctionnalités principales:
- Superposition persistante spécifique à la grille qui facilite les informations dimensionnelles et d'ordre
- Badges de l'arborescence DOM mettant en évidence les conteneurs de la grille CSS et permettant d'activer/de désactiver les superpositions de la grille
- 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).
- Un éditeur de grille CSS dans le volet Styles
Voyons cela de plus près.
Superpositions persistantes de la grille
Dans les outils de développement, une superposition est un instrument performant qui fournit des informations sur la mise en page et le style d'un élément individuel:
Ces informations supplémentaires sont superposées sur l'élément qui vous intéresse. Auparavant, lorsque vous pointiez sur une grille à l'ouverture des outils de développement, la superposition affichait les informations sur le modèle de la zone, mais limitait la mise en surbrillance du contenu aux éléments de la grille sans en expliquer la raison. Nous aimerions ajouter deux éléments principaux aux superpositions de la grille CSS:
- Nous souhaitons afficher des informations plus utiles sur les grilles, par exemple sur les dimensions et les écarts créés.
- nous voulons rendre les superpositions autocollantes afin de pouvoir regarder plusieurs grilles en même temps, et nous pouvons voir les superpositions mettant à jour les informations de la grille lorsque nous modifions les styles des éléments
Découvrons comment nous avons réussi à atteindre ces deux objectifs.
Tailles créées et tailles calculées
L'un des aspects les plus complexes du débogage de la grille CSS réside dans les nombreuses façons de définir les tailles des pistes de la grille. Par exemple, vous pouvez utiliser une combinaison de valeurs de pixels, de valeurs de pourcentage, de fractions, de fonctions de répétition et de fonctions 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 pistes créées aux tailles de pistes 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, tandis que la chaîne 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 selon la spécification de la grille CSS. Cela aurait impliqué de nombreux scénarios complexes, et ne serait fondamentalement qu'une duplication des efforts de Blink. Par conséquent, avec l'aide de l'équipe Style de Blink, nous avons obtenu une nouvelle API du moteur de style qui présente 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 une fois que le moteur de style a compilé toutes les feuilles de style, mais avant de calculer réellement des valeurs, comme les pourcentages, les fractions, etc.
Nous utilisons désormais cette API pour afficher les valeurs créées dans des superpositions de grille.
Superpositions persistantes
Avant l'utilisation des outils de grille CSS, la superposition dans les outils de développement était simple: il fallait pointer sur un élément, soit dans le volet de l'arborescence DOM des outils de développement, soit directement sur la page inspectée, pour afficher une superposition décrivant cet élément. Vous passez la souris ailleurs, et la superposition disparaît. Pour les superpositions de grille, nous voulions quelque chose de différent: plusieurs grilles peuvent être mises en surbrillance simultanément et les superpositions de grille peuvent rester activées tandis que les superpositions standards lorsque l'utilisateur pointe dessus restent fonctionnelles.
Exemple :
Toutefois, la superposition dans les outils de développement n'a pas été conçue pour ce mécanisme persistant et multi-élément (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, 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 superposition persistante (grille, Flex, etc.), nous conservons un champ de configuration respectif dans l'outil persistant. Chaque fois que le surligneur en superposition vérifie quoi dessiner, il inclut également ces configurations.
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 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. Cela nous permet d'ajouter un mécanisme persistant multi-élément sans rompre le comportement actuel lors du survol.
Badges de grille en temps réel
Pour aider les développeurs à activer et désactiver facilement les superpositions de la grille, nous avons décidé d'ajouter de petits badges à côté des conteneurs de la 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 à afficher dans l'arborescence DOM, nous souhaitons faciliter au maximum leur ajout. 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 pour configurer les badges. S’il existe plusieurs badges pour un élément, ils sont triés par catégorie de badges, puis par ordre 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, les fonctionnalités d'accessibilité sont intégrées dès le départ. Chaque badge interactif est obligatoire pour fournir un aria-label par défaut et actif, tandis que les badges en lecture seule utilisent le nom de leur 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 des outils de développement. Par exemple, les nœuds nouvellement ajoutés apparaissent instantanément dans l'arborescence DOM et les noms de classes supprimés disparaissent aussitôt. Nous souhaitons que l'état du badge de la grille reflète également les mêmes informations à jour. Toutefois, cela s'est avéré difficile à implémenter, car il n'y avait aucun moyen pour les outils de développement de recevoir des notifications lorsque des éléments affichés dans l'arborescence DOM reçoivent des mises à jour de style calculées. Le seul moyen existant de savoir quand un élément devient ou cesse d'être un conteneur de type grille consiste à interroger en permanence le navigateur pour obtenir les informations de style à jour de chaque élément. Le coût serait absolument élevé.
Pour permettre au frontal de savoir plus facilement quand le style d'un élément a été modifié, nous avons ajouté une nouvelle méthode CDP pour l'interrogation des mises à jour de style. Pour mettre à jour le 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 de la grille, nous demandons au navigateur de suivre:
{
"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 veulent être à nouveau informés des mises à jour de style, ils peuvent envoyer cette demande d'interrogation au lieu d'interroger en permanence le backend depuis 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 arborescence DOM facilitent 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. Nous avons donc décidé de créer un volet de barre latérale dédié aux outils de mise en page. Cela nous donne un espace dédié pour rassembler tous les conteneurs de la grille et pour configurer toutes les options de superposition de la grille. Le volet Mise en page nous permet également d'y placer les futurs outils gourmands en mise en page (Flexbox et Requêtes de conteneur, par exemple).
Rechercher des éléments selon des styles calculés
Pour afficher la liste des conteneurs de la grille CSS dans le volet Mise en page, nous devons rechercher des nœuds DOM en fonction des styles calculés. L'opération s'est avérée non plus simple, car tous les nœuds DOM ne sont pas connus des outils de développement lorsque ceux-ci sont ouverts. Les outils de développement ne connaissent qu'un petit sous-ensemble de nœuds, généralement au niveau le plus élevé de la hiérarchie DOM, pour démarrer l'arborescence DOM des outils de développement. Pour des raisons de performances, les autres nœuds ne seront récupérés que sur demande ultérieure. Nous avons donc besoin d'une nouvelle commande CDP pour collecter tous les nœuds de la page et les filtrer en fonction de leur style calculé:
# 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 la grille CSS sur une page, avec la possibilité de traverser des cadres iFrame et des racines fantômes, et d'afficher ces conteneurs dans le volet de mise en page.
Conclusion
Les outils de grille CSS ont été l'un des premiers projets d'outils de conception des outils de développement à prendre en charge une fonctionnalité de plate-forme Web. Elle a introduit de nombreux outils de base dans les outils de développement, comme les superpositions persistantes, les badges de l'arborescence DOM et le volet Mise en page. Elle a ouvert la voie à de futurs outils de mise en page dans les outils pour les développeurs Chrome, 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 les examinerons plus tard.
Télécharger les canaux de prévisualisation
Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant même que vos utilisateurs ne le fassent.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans le message, ou de tout autre sujet lié aux outils de développement.
- Envoyez-nous une suggestion ou des commentaires via crbug.com.
- Signalez un problème lié aux outils de développement en accédant à Plus d'options
> Aide > Signaler un problème dans les outils de développement. - Envoyez un tweet à @ChromeDevTools.
- Laissez des commentaires sur les nouveautés des outils de développement vidéos YouTube ou les vidéos YouTube de nos conseils sur les outils de développement.