Mozilla verbessert den CSS Grid Inspector in Firefox Nightly
Mozilla angekündigt Erst vor einem Moment wurde der CSS Grid Inspector der integrierten Entwicklertools von Firefox erheblich verbessert.
Die neue Funktionalität wurde zu Firefox Nightly hinzugefügt, der neuesten Entwicklungsversion des Firefox-Webbrowsers, die zuerst neue Funktionen erhält, bevor sie auf Beta und dann auf stabile Versionen des Webbrowsers migriert werden.
Das CSS-Rasterlayout ist eine Methode zum Unterteilen einer Webseite in Bereiche und zum Definieren von Beziehungen von Elementen auf der Seite. Das Namensraster ergibt sich aus der Eigenschaft des Layouts, Elemente in Spalten und Zeilen auszurichten.
CSS Grid ähnelt Tabellen, bietet jedoch Vorteile wie die Möglichkeit, Elemente zu überlagern oder Ebenen zu verwenden.
Mozilla verbessert den CSS Grid Inspector in Firefox Nightly
Benutzer von Firefox Nightly können die Entwicklertools des Browsers über die Verknüpfung F12 öffnen. Um die neue CSS Grid-Funktionalität nutzen zu können, müssen sie das Inspector Tool auf einer Seite öffnen, die CSS Grid verwendet.
Das Layoutfenster listet alle CSS-Grid-Container auf der aktiven Seite auf. Darüber hinaus enthält es eine Überlagerung, die das Layout, die Position und die Ebene jedes Containers visualisiert.
Firefox-Entwickler können die Anzeige mithilfe der folgenden drei Einstellungen anpassen, die derzeit verfügbar sind:
- Gitterlinien unendlich verlängern.
- Zahlen in Zeilen anzeigen.
- Rasterbereiche anzeigen. Hier werden die Begrenzungsbereiche und der zugehörige Bereichsname jeder Rasterzelle direkt auf der Seite aufgelistet.
Ein weiteres visuelles Element, das in den Entwicklertools neu ist, ist die Möglichkeit, die Maus über einen beliebigen Container zu bewegen, um ihn auf der Seite für Sie hervorzuheben. Sie müssen zuerst das Überlagerungsraster auswählen, damit die Optionen funktionieren.
Mit einer weiteren neuen Funktion des Rasterinspektors können Entwickler sehen, wo sich Rasterlinien für Raster befinden, die übersetzt, verzerrt, gedreht oder skaliert werden.
Mozilla hat dem Grid Inspector auch eine neue Box Model Properties hinzugefügt. Es werden alle Eigenschaften aufgelistet, die sich auf Position, Größe und Geometrie des ausgewählten Elements auswirken.
Entwickler können einige Eigenschaften, die Position und die Eigenschaften Höhe / Breite direkt dort bearbeiten.
Hier ist ein Video, das Sie durch die neuen Funktionen führt.
Jetzt du: Wie sehen Sie als Webentwickler CSS Gird und die diesbezüglichen Funktionen der Firefox Developer Tools?
