Mozilla a annoncé juste il y a un moment qu’il a amélioré la Grille CSS Inspecteur de Firefox intégré d’Outils de développement de manière significative.
La nouvelle fonctionnalité a été ajoutée à Firefox Nightly, la pointe de la version de développement du navigateur web Firefox qui obtient de nouvelles fonctions avant de migrer à la Bêta, puis à la version Stable du navigateur web.
Grille CSS de Mise en page est une méthode de division d’une page web dans les régions, et de définir des relations d’éléments sur la page. Le nom de la grille vient de la mise en page est caractéristique de l’alignement des éléments dans des colonnes et des lignes.
Bien que semblable aux tables, CSS Grid offre des avantages tels que la possibilité de superposer des éléments ou utiliser des calques.
Mozilla améliore la Grille CSS Inspecteur dans Firefox Nightly
Firefox Nightly les utilisateurs peuvent ouvrir les Outils de développement du navigateur en utilisant le raccourci F12. De faire usage de la nouvelle Grille CSS fonctionnalité, ils doivent ouvrir l’Inspecteur de l’Outil sur une page qui utilise la Grille CSS.
Le Panneau de Disposition des listes de tous les Grille CSS conteneurs sur la page active. Il comprend une superposition sur le dessus de ce qui permet de visualiser la mise en page, la position et de la couche de chaque conteneur.
Firefox, les développeurs peuvent personnaliser l’affichage à l’aide de trois paramètres qui sont disponibles dès maintenant:
- Étendre les lignes de la grille à l’infini.
- Afficher les numéros de lignes.
- La grille d’affichage de zones. Cela donne la délimitation des zones et la zone nom de chaque cellule de la grille à droite sur la page.
Un autre élément visuel qui est nouveau dans les Outils de développement est la capacité de placer le pointeur de la souris au dessus d’un récipient pour l’avoir mis en évidence sur la page. Vous devez sélectionner la superposition de la grille de la première pour les options de travail.
Une autre nouvelle fonctionnalité de la Grille Inspecteur permet aux développeurs de voir où les lignes de la grille sont pour les grilles qui sont traduits, incliner, faire pivoter ou mettez à l’échelle.
Mozilla a ajouté une nouvelle Boîte de dialogue Propriétés de Modèle à la Grille de l’Inspecteur. Il répertorie toutes les propriétés qui affectent la position, la taille et la géométrie de l’élément sélectionné.
Les développeurs peuvent modifier certaines propriétés, la position et la hauteur/largeur de propriétés directement là-bas.
Voici une vidéo qui vous guide à travers les nouvelles fonctionnalités.
Maintenant, Vous: si vous êtes un développeur web, quelle est votre opinion sur le CSS Grille et la fonctionnalité de Firefox Outils de développement en ce qui concerne qui?