Inspecteur de grille CSS : examiner les grilles

L'inspecteur de grilles permet de trouver, d'examiner, et de modifier les grilles CSS en utilisant les outils de développement de Firefox

Note: Les exemples montrés dans les captures d'écran ci-dessous sont tirés de Futurismo (Jen Simmons), des expériences "Variations on a grid", et de "live named grid area example" (Rachel Andrew).

Découvrir les grilles CSS

Lorsqu'un élément HTML d'une page possède l'attribut display: grid, des fonctionnalités des outils de développement sont activées pour fournir un accès simple aux fonctionnalités des grilles.

Dans le panneau HTML

Le panneau HTML, montrant un marqueur de grille

Dans le panneau CSS

Dans l'onglet règles du panneau CSS, toutes les instances d'une déclaration display: grid possèdent une icône de grille () :

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

Cliquer sur cette icône affiche une grille en superposition sur la page, afin de mettre en évidence la position des lignes et "tracks" de la grille CSS :

Une superposition en couleur de la grille CSS

La superposition reste affichée même lorsque d'autres éléments sont sélectionnés, il est donc possible d'éditer les propriétés CSS appropriées et en voir les effets sur la grille.

La section "grilles" de l'onglet mise en page

Lorsque des grilles sont incluses dans une page, l'onglet "Mise en page" du panneau CSS inclut une section "Grille", qui contient quelques options pour afficher celles-cis.

Note: La vue "Mise en page" se situe dans le panneau de droite de l'Inspecteur. Les captures d'écran au-dessus et en dessous devraient aider à sa localisation.

Options de grilles

La section grille de l'onglet mise en page ressemble à ceci :Les options des grilles CSS

Ces options sont :

  • Superposer une grille : contient une case à cocher pour chaque grille CSS présente sur la page,ainsi que quelques options . Cela permet de superposer une grille d'indication sur les grilles CSS.
  • Paramètres d'affichage des grilles :
    • Afficher le numéro des lignes : affiche le nombre de lignes pour chaque grille d'indication (option activée par défaut).
    • Afficher le nom des zones : active/désactive les noms des zones si la grille possède des noms de zones (activé par défaut quand utile).
    • Prolonger les lignes à l'infini : Par défaut, les lignes/tracks des grilles CSS ne sont affichées que dans l'élément sur lequel display: grid est attaché. Lorsque cette option est activée, les lignes de la grille d'indication se prolongent jusqu'au bord de la fenêtre sur chaque axe.
  • Mini vue de grilles : Une vue réduite des grilles actuellement superposées.

Note: Les préférences de grilles telles que la couleur de superposition et les paramètres d'affichage persistent au rechargement des pages (chacun sur sa page séparée).

Grille de superposition

Chaque grille présente sur la page, possède son entrée dans la section "superposer une grille" :

Une entrée pour une seule grille de superposition affichant son nom, sa couleur, et plus

Chaque entrée est composée de (de gauche à droite) :

  • Une case à cocher permettant d'activer/désactiver la superposition pour cette grille. Il est à noter qu'actuellement, une seule superposition à la fois est possible.
  • Un nom pour identifier la grille, il s'agit du sélecteur identifiant l'élément HTML auquel la grille est appliquée. Cliquer sur le nom active/désactive également la superposition.
  • Une icône de ciblage, qui sélectionne automatiquement dans l'Inspecteur l'élément HTML auquel la grille est rattachée.
  • Un sélecteur de couleur permettant de change la couleur de la superposition. C'est utile pour pouvoir facilement différencier la grille de sa superposition.

Afficher le numéro des lignes

Par défaut le numéro des lignes est affiché dans la superposition :

Une superposition de grille CSS avec les numéros de lignes affichés

Décocher la case "Afficher les numéros des lignes" les désactivent :

A CSS grid overlay with grid line numbers not displayed

Afficher le nom des zones

Si une grille possède des noms de zones, ces noms seront automatiquement affichés par défaut dans la superposition :

A CSS grid overlay with named area names displayed

Décocher la case désactive cet affichage :

A CSS grid overlay with named area names not displayed

Prolonger les lignes à l'infini

Par défaut les lignes/tracks ne sont affichées que dans l'élément sur laquelle la grille est appliquée :

A CSS grid overlay with grid lines not extended infinitely

Lorsque cette option est activée, les lignes se prolongent sur chaque axe jusqu'au bord de la fenêtre :

A CSS grid overlay with grid lines extended infinitely

Mini vue de la grille

Affiche une version miniature de la superposition de la grile, en proportions correctes de la vraie.

A mini CSS grid view from the Firefox DevTools

Survoler les différentes zones de la mini grille, affichera en surbrillance la zone correspondante dans la vraie grille et fournira une infobulle avec des informations telles que la taille de la zone, sa ligne et sa colonne.

A Firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

À voir également