Mozilla kündigte nur einen Augenblick vor, dass es hat sich verbessert, die CSS-Grid-Inspector von Firefox integrierten Entwickler-Werkzeuge erheblich.
Die neue Funktionalität wurde Hinzugefügt, um Firefox Nightly, die Schneide Entwickler-version des Firefox web-browser, der bekommt die neuen features zuerst, bevor Sie die Migration zu Beta und dann zu Stabilen Versionen der web-browser.
CSS Grid Layout ist eine Methode der Aufteilung einer web-Seite in Regionen und die Beziehungen der Elemente auf der Seite. Der name grid kommt aus dem layout ist charakteristisch für das ausrichten von Elementen, die in Spalten und Zeilen.
Während ähnlich wie Tabellen, CSS-Grid bietet Vorteile wie die Fähigkeit, overlay-Elemente oder Ebenen verwenden.
Mozilla verbessert CSS-Grid-Inspector in Firefox Nightly
Firefox Nightly Benutzer kann öffnen Sie die Entwickler-Tools der browser mit der F12-shortcut. So nutzen Sie die neuen CSS-Grid-Funktionalität, die Sie benötigen, um öffnen Sie den Inspektor-Tool auf einer Seite, die mit CSS-Grid.
Das Layout-Fenster listet alle CSS-Grid-Container auf der aktiven Seite. Sie umfasst ein overlay auf top von, dass, visualisiert das layout, die position und die Ebene der einzelnen container.
Firefox-Entwickler können anpassen, die Anzeige über die folgenden drei Einstellungen, die verfügbar sind jetzt:
- Erweitern der grid-Linien unendlich.
- Anzeigen von zahlen auf die Linien.
- Anzeige-grid-Bereichen. Dies sind die umgebenden Bereiche und die dazugehörigen Gebiet Namen der einzelnen grid-Zelle direkt auf der Seite.
Ein weiteres visuelles element, das neu in der Entwickler-Tools ist die Fähigkeit, bewegen Sie die Maus über alle container haben es hervorgehoben, um Sie auf die Seite. Sie müssen wählen Sie die overlay-Netzes zunächst für die Optionen zu arbeiten.
Ein weiteres neues feature der Grid-Inspector können Entwickler sehen, wo die Gitterlinien sind für grids, das sind übersetzt, verzerrt, gedreht oder skaliert werden.
Mozilla hat ein neues Box-Modell-Eigenschaften des Raster-Inspektor als gut. Es listet alle Eigenschaften, die Einfluss auf die position, die Größe und geometrie des ausgewählten Elements.
Entwickler Bearbeiten einige Eigenschaften, die position und Höhe/Breite Eigenschaften direkt dorthin.
Hier ist ein video, das führt Sie durch die neue Funktionalität.
Jetzt Sie: wenn Sie ein web-Entwickler, was ist Ihr nehmen auf CSS Gürten und die Funktionalität des Firefox-Entwickler-Tools in dieser Hinsicht?