Warum haben wir CSS Grid Tooling entwickelt?
CSS Grid ist ein sehr leistungsstarkes CSS-Layoutsystem, mit dem Webentwickler ein komplexes zweidimensionales Layout erstellen und Regeln dafür festlegen können, wie jedes einzelne untergeordnete Element in einem Raster dimensioniert, ausgerichtet und angeordnet wird. CSS Grid wurden eingeführt, nachdem Flexbox beliebt wurde. Zusammen können sie Entwicklern helfen, ein besseres responsives Design zu erzielen, ohne komplizierte Ausrichtungs-Hacks oder ein JavaScript-gestütztes Layout.
Als relativ neues Layoutsystem ist auch das CSS-Raster schwer zu finden. Die Syntax ist sehr vielseitig (suchen Sie einfach nach Grid Spickzettel). Es gibt viele Möglichkeiten, das gleiche Layout zu erreichen, und flexible Größenangaben und implizite Tracks erschweren die Überlegung, warum das Layout ist oder nicht wie es sollte. Aus diesem Grund haben wir uns entschlossen, spezielle CSS Grid-Tools in den Entwicklertools zur Verfügung zu stellen, damit Entwickler besser verstehen können, was ihr CSS-Code tut und wie sie das richtige Layout finden.
Tool-Design
Eine Partnerschaft von Chrome und Edge
Die CSS-Grid-Tools haben sowohl die Chrome-Entwicklertools als auch die Edge DevTools-Tools Aufmerksamkeit erregen. Wir beschlossen, von Anfang an zusammenzuarbeiten. Um dies zu erreichen, haben wir unsere Produkt-, Technik- und Designressourcen von beiden Teams geteilt und wöchentlich abgestimmt.
Zusammenfassung der Funktionen
Es gibt drei Hauptfunktionen der CSS-Grid-Tools:
- Rasterspezifisches, persistentes Overlay, das bei der Erfassung von Dimensions- und Anordnungsinformationen hilft
- Logos in der DOM-Struktur, die CSS-Raster-Container hervorheben und Raster-Overlays ein-/ausschalten
- Ein Seitenleistenbereich, mit dem Entwickler die Anzeige von DOM-Overlays personalisieren können, z.B. durch Ändern der Farbe und Breite von Regeln
- CSS-Rastereditor im Bereich Styles
Sehen wir uns diese genauer an.
Dauerhafte Raster-Overlays
In den Entwicklertools ist ein Overlay ein leistungsstarkes Instrument, das Layout- und Stilinformationen eines einzelnen Elements liefert:
Diese zusätzlichen Informationen werden über das relevante Element überlagert. Wenn Sie den Mauszeiger bisher auf ein Raster bewegen und die Entwicklertools geöffnet waren, wurden die entsprechenden Feldmodellinformationen im Overlay angezeigt. Die Inhaltshervorhebung wurde jedoch auf Rasterelemente beschränkt, ohne dass die Gründe dafür erklärt wurden. Es gibt zwei Hauptelemente, die wir für CSS-Raster-Overlays hinzufügen möchten:
- möchten wir nützlichere Informationen zu Rastern anzeigen, z.B. autorisierte Dimensionen und Lücken
- möchten wir die Overlays fixieren, damit wir mehrere Raster gleichzeitig ansehen können, und wir sehen, wie Overlays die Rasterinformationen aktualisieren, wenn wir Elementstile ändern
Sehen wir uns an, wie wir beides erreicht haben.
Erstellte und berechnete Größen im Vergleich
Einer der schwierigen Bereiche beim Debuggen von CSS-Grid sind die vielen Möglichkeiten zum Definieren von Raster-Track-Größen. Sie können beispielsweise eine Kombination aus Pixelwerten, Prozentwerten, Brüchen, Wiederholungsfunktion und Minimal-Maximalfunktion verwenden, um vielseitige Titelgrößen zu erstellen:
.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));
}
Es wäre jedoch schwierig, diese autorisierten Track-Größen den berechneten Track-Größen zuzuordnen, die der Browser für uns berechnet hat. Um diese Lücke zu schließen, platzieren wir diese beiden Informationen nebeneinander auf dem Overlay:
Der String vor dem Punkt ist der erstellte Wert und der String nach dem Punkt den tatsächlich berechneten Wert.
Bisher konnten in den Entwicklertools keine erstellten Werte abgerufen werden. Theoretisch könnten wir die erstellten Werte in den Entwicklertools selbst parsen und gemäß der CSS-Grid-Spezifikation berechnen. Dies wäre mit vielen komplizierten Szenarien verbunden gewesen und im Wesentlichen nur eine Verdoppelung der Blink-Anstrengungen gewesen. Deshalb haben wir mithilfe des Style-Teams von Blink eine neue API aus der Stil-Engine erhalten, die „kaskadierte Werte“ offenlegt. Ein kaskadierter Wert ist der endgültige effektive Wert einer CSS-Eigenschaft nach der CSS-Kaskadierung. Dies ist der Wert, der gewinnt, nachdem die Style-Engine alle Stylesheets kompiliert hat, aber bevor Werte tatsächlich berechnet werden. Prozent, Brüche usw.
Wir verwenden jetzt diese API, um die erstellten Werte in Raster-Overlays anzuzeigen.
Dauerhafte Overlays
Vor der Verwendung der CSS-Grid-Tools war das Overlay in den Entwicklertools einfach: Man bewegte den Mauszeiger auf ein Element, entweder im DOM-Baum-Bereich der Entwicklertools oder direkt auf der untersuchten Seite, und es wird ein Overlay angezeigt, das dieses Element beschreibt. Wenn Sie den Mauszeiger wegbewegen, wird das Overlay ausgeblendet. Für Raster-Overlays wollten wir etwas anderes: Mehrere Raster können gleichzeitig hervorgehoben werden. Raster-Overlays können aktiviert bleiben, während die regulären Overlays mit dem Mauszeiger weiterhin funktionieren.
Beispiel:
Das Overlay in den Entwicklertools wurde jedoch nicht im Hinblick auf diesen dauerhaften Mechanismus mit mehreren Elementen entwickelt (es wurde vor vielen Jahren erstellt). Aus diesem Grund mussten wir das Overlay-Design refaktorieren, damit das funktioniert. Wir haben ein neues GridHighlightTool zu einer vorhandenen Suite von Hervorhebungstools hinzugefügt, die sich später in ein globales PersistentTool zum gleichzeitigen Hervorheben aller persistenten Overlays entwickelt haben. Für jede Art von persistenten Overlays (Grid, Flex usw.) wird im persistenten Tool ein entsprechendes Konfigurationsfeld beibehalten. Jedes Mal, wenn der Overlay-Highlighter prüft, was gezeichnet werden soll, werden diese Konfigurationen ebenfalls berücksichtigt.
Damit die Entwicklertools steuern können, was hervorgehoben werden soll, haben wir einen neuen CDP-Befehl für das persistente Raster-Overlay erstellt:
# 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
Dabei enthält jeder GridNodeHighlightConfig Informationen darüber, welcher Knoten gezeichnet werden soll und wie er gezeichnet werden soll. So können wir einen dauerhaften Mechanismus mit mehreren Elementen hinzufügen, ohne das aktuelle Verhalten beim Bewegen des Mauszeigers zu beeinträchtigen.
Echtzeitraster-Badges
Damit Entwickler die Raster-Overlays einfach aktivieren und deaktivieren können, haben wir beschlossen, kleine Logos neben den Rastercontainern in der DOM-Struktur hinzuzufügen. Mit diesen Logos können Entwickler auch Rastercontainer in ihren DOM-Strukturen identifizieren.
Änderungen an der DOM-Struktur
Da Grid-Badges nicht die einzigen Badges sind, die im DOM-Baum angezeigt werden sollen, möchten wir das Hinzufügen von Badges so einfach wie möglich machen. ElementsTreeElement, die Klasse, die für das Erstellen und Verwalten einzelner DOM-Baumelemente in den Entwicklertools verantwortlich ist, wurde mit mehreren neuen öffentlichen Methoden zum Konfigurieren von Badges aktualisiert. Wenn es mehrere Badges für ein Element gibt, werden diese nach Badge-Kategorien und dann alphabetisch sortiert, wenn sie sich in derselben Kategorie befinden. Zu den verfügbaren Kategorien zählen Security, Layout usw. Grid gehört zur Kategorie Layout.
Außerdem unterstützen wir Bedienungshilfen von Anfang an. Für jedes interaktive Logo muss ein standardmäßiges und ein aktives aria-label angegeben werden. Bei schreibgeschützten Logos wird hingegen der Name des Logos als aria-label verwendet.
Wie sind wir Stilupdates in Echtzeit erhalten?
Viele DOM-Änderungen werden in der DOM-Struktur der Entwicklertools in Echtzeit wiedergegeben. Zum Beispiel erscheinen neu hinzugefügte Knoten sofort im DOM-Baum und entfernte Klassennamen verschwinden ebenfalls. Der Status des Logos „Raster“ soll dieselben aktuellen Informationen widerspiegeln. Dies erwies sich jedoch als schwierig zu implementieren, da es für die Entwicklertools keine Möglichkeit gab, Benachrichtigungen zu erhalten, wenn Elemente, die im DOM-Baum angezeigt werden, berechnete Stilaktualisierungen erhalten. Die einzige Möglichkeit herauszufinden, wann ein Element zu einem Rastercontainer wird oder aufhört, besteht darin, den Browser ständig nach den aktuellen Stilinformationen jedes einzelnen Elements abzufragen. Dies wäre unerwünscht teuer.
Damit das Frontend leichter erkennen kann, wann der Stil eines Elements aktualisiert wurde, haben wir eine neue CDP-Methode für die Abfrage von Stilaktualisierungen hinzugefügt. Um Stilaktualisierungen von DOM-Knoten zu erhalten, teilen wir dem Browser zunächst mit, welche CSS-Deklarationen verfolgt werden sollen. Bei Raster-Badges fordern wir den Browser auf, Folgendes zu erfassen:
{
"display": "grid",
"display": "inline-grid",
}
Wir senden dann eine Abfrageanfrage. Wenn im Steuerfeld „Elemente“ nachverfolgte Stilaktualisierungen für DOM-Knoten vorhanden sind, sendet der Browser den Entwicklertools eine Liste aktualisierter Knoten und löst die vorhandene Abfrageanfrage auf. Wenn DevTools erneut über Stilaktualisierungen benachrichtigt werden möchte, kann es diese Abfrageanfrage senden, anstatt ständig das Backend von jedem einzelnen Knoten aus abzufragen. Mit den Entwicklertools kann auch eine neue Liste an den Browser gesendet werden, um die erfassten CSS-Deklarationen zu ändern.
Layoutbereich
Obwohl DOM-Baum-Badges die Auffindbarkeit von CSS-Grids verbessern, möchten wir manchmal eine Liste aller CSS-Grids auf einer bestimmten Seite anzeigen und ihre persistenten Overlays einfach aktivieren und deaktivieren, um ihre Layouts zu debuggen. Daher haben wir beschlossen, ein spezielles Seitenleistenfenster nur für Layout-Tools zu erstellen. Dadurch erhalten wir einen speziellen Bereich, in dem wir alle Rastercontainer zusammenfassen und alle Optionen für Raster-Overlays konfigurieren können. Über den Bereich Layout können Sie hier auch zukünftige Tools mit vielen Layouts wie Flexbox und Containerabfragen platzieren.
Elemente anhand von berechneten Stilen suchen
Damit die Liste der CSS-Raster-Container im Bereich Layout angezeigt wird, müssen wir DOM-Knoten nach berechneten Stilen suchen. Dies stellte sich auch als nicht einfach heraus, da DevTools nicht alle DOM-Knoten bekannt sind, wenn die Entwicklertools geöffnet sind. Stattdessen kennt die Entwicklertools nur eine kleine Teilmenge von Knoten, normalerweise auf der obersten Ebene der DOM-Hierarchie, nur um die DOM-Struktur der Entwicklertools starten zu können. Aus Leistungsgründen werden andere Knoten nur auf weitere Anfrage abgerufen. Das bedeutet, dass wir einen neuen CDP-Befehl benötigen, um alle Knoten auf der Seite zu erfassen und nach ihren berechneten Stilen zu filtern:
# 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
Dadurch kann das Entwicklertools-Front-End eine Liste von CSS-Grid-Containern auf einer Seite abrufen, möglicherweise auch iFrames und Schattenstammelemente durchdringen und im Layoutbereich rendern.
Fazit
„CSS Grid“ gehörte zu den ersten Designtool-Projekten in den Entwicklertools, die eine Webplattform-Funktion unterstützten. Es wurden viele grundlegende Tools in den Entwicklertools eingeführt, z.B. persistente Overlays, DOM-Baum-Badges und den Bereich Layout ebnete den Weg für zukünftige Layout-Tools in den Chrome-Entwicklertools wie Flexbox- und Container-Abfragen. Darüber hinaus wurde der Grundstein für Grid- und Flexbox-Editoren gelegt, mit denen Entwickelnde die Raster- und Flexbox-Ausrichtungen interaktiv ändern können. Wir werden sie in Zukunft besprechen.
Vorschaukanäle herunterladen
Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.
Kontaktaufnahme mit dem Team für Chrome-Entwicklertools
Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.
- Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
- Problem mit den Entwicklertools über Weitere Optionen melden
> Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden. - Twittern Sie unter @ChromeDevTools.
- Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.