Warum haben wir CSS-Grid-Tools entwickelt?
CSS Grid ist ein sehr leistungsstarkes CSS-Layoutsystem, mit dem Webentwickler ein komplexes zweidimensionales Layout erstellen und Regeln für die Größe, Ausrichtung und Reihenfolge der einzelnen untergeordneten Elemente in einem Raster festlegen können. Das CSS-Grid wurde eingeführt, nachdem Flexbox so beliebt wurde. Gemeinsam können sie Entwicklern dabei helfen, ein besseres responsives Design ohne komplizierte Ausrichtungs-Hacks oder ein JavaScript-gestütztes Layout zu erzielen.
Als relativ neues Layoutsystem ist CSS Grid auch schwer zu verstehen. Die Syntax ist sehr vielseitig (suchen Sie einfach auf Raster-Cheatsheet). Es gibt viele Möglichkeiten, dasselbe Layout zu erreichen, und flexible Größen und implizite Tracks erschweren es, nachzuvollziehen, warum sich das Layout ist oder nicht verhält. Aus diesem Grund haben wir uns in den Entwicklertools spezielle CSS Grid-Tools zur Verfügung gestellt, damit Entwickler besser verstehen können, wie ihr CSS-Code funktioniert und wie sie das richtige Layout finden.
Tooldesign
Eine gemeinsame Initiative von Chrome und Edge
Die CSS Grid-Tools erregten die Aufmerksamkeit der Chrome-Entwicklertools und der Edge-Entwicklertools. Wir haben uns von Anfang an für eine Zusammenarbeit entschieden. Wir haben unsere Produkt-, Engineering- und Designressourcen von beiden Teams geteilt und wöchentlich koordiniert, um dies zu erreichen.
Zusammenfassung der Funktionen
Es gibt drei Hauptfunktionen für CSS-Grid-Tools:
- Rasterspezifisches, dauerhaftes Overlay, das bei der Bereitstellung von Dimensions- und Bestellinformationen hilft
- Badges in der DOM-Baumstruktur, die CSS-Grid-Container hervorheben und Raster-Overlays aktivieren/deaktivieren
- Seitenleistenbereich, mit dem Entwickler die Anzeige von DOM-Overlays personalisieren können (z.B. Ändern der Farbe und Breite von Regeln)
- CSS-Rastereditor im Bereich Styles
Als Nächstes sehen wir uns diese genauer an.
Persistente 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 gewünschte Element gelegt. Bisher wurden beim Bewegen des Mauszeigers über ein Raster mit geöffneten Entwicklertools die Modellinformationen des Felds im Overlay angezeigt. Die Inhaltshervorhebung wurde jedoch auf Rasterelemente beschränkt, ohne zu erklären, warum das der Fall ist. Es gibt zwei Hauptteile, die wir für CSS-Raster-Overlays hinzufügen möchten:
- möchten wir nützlichere Informationen zu „Raster“ anzeigen, z. B. die erstellten Dimensionen und Lücken.
- Wir möchten die Overlays fixieren, damit wir mehrere Raster gleichzeitig betrachten können. Außerdem sehen wir, wie die Overlays die Rasterinformationen aktualisieren, während wir die Stile der Elemente ändern.
Sehen wir uns einmal an, wie wir beides erreicht haben.
Erstellte und berechnete Größen im Vergleich
Einer der schwierigen Aufgaben beim Debuggen im CSS-Raster sind die vielen Möglichkeiten, die Größen von Raster-Tracks zu definieren. Sie können beispielsweise eine Kombination aus Pixelwerten, Prozentwerten, Brüchen, Wiederholungsfunktion und minmax-Funktion verwenden, um vielseitige Trackgröß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, die erstellten Trackgrößen den berechneten Trackgröß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:
Die Zeichenfolge vor dem Punkt ist der erstellte Wert und der String nach dem Punkt stellt den tatsächlich berechneten Wert dar.
Bisher hatten die Entwicklertools keine Möglichkeit, selbst erstellte Werte abzurufen. Theoretisch konnten wir die erstellten Werte in den Entwicklertools irgendwie selbst parsen und sie gemäß der CSS Grid-Spezifikation berechnen. Das hätte viele komplizierte Szenarien beinhalten und im Wesentlichen Blinks Arbeit doppelt gewesen. Daher haben wir mit Unterstützung des Style-Teams von Blink eine neue API von der Stil-Engine erhalten, die „kaskadierte Werte“ offenlegt. Ein kaskadierter Wert ist der endgültige effektive Wert nach der CSS-Kaskadierung für eine CSS-Property. Dies ist der Wert, der gewinnt, nachdem die Stil-Engine alle Stylesheets kompiliert hat, aber bevor Werte berechnet werden, z.B. Prozentsatz, Brüche usw.
Wir verwenden diese API jetzt, um die erstellten Werte in Raster-Overlays anzuzeigen.
Persistente Overlays
Vor den CSS Grid-Tools war das Overlay in den Entwicklertools unkompliziert: Sie bewegen den Mauszeiger entweder im DOM-Baumfenster der Entwicklertools oder direkt auf der geprüften Seite auf ein Element und sehen ein Overlay, das dieses Element beschreibt. Wenn Sie den Mauszeiger wegbewegen, wird das Overlay ausgeblendet. Bei Raster-Overlays wollten wir etwas anderes: Es können mehrere Raster gleichzeitig hervorgehoben werden und Raster-Overlays können aktiviert bleiben, während reguläre Overlays, die mit der Maus bewegt werden, weiterhin funktionieren.
Beispiel:
Das Overlay in den Entwicklertools wurde jedoch vor vielen Jahren erstellt und war nicht für diesen dauerhaften Mechanismus mit mehreren Elementen konzipiert. Daher mussten wir das Overlay-Design refaktorieren, damit dies funktioniert. Wir haben eine neue GridHighlightTool zu einer bestehenden Reihe von Markierungstools hinzugefügt, die sich später zu einem globalen PersistentTool für die gleichzeitige Hervorhebung aller persistenten Overlays entwickelt haben. Für jede Art von persistenten Overlays (Raster, Flex usw.) gibt es ein entsprechendes Konfigurationsfeld im persistenten Tool. Jedes Mal, wenn der Overlay-Textmarker prüft, was gezeichnet werden soll, werden auch diese Konfigurationen angezeigt.
Damit die Entwicklertools steuern können, was hervorgehoben werden muss, 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. Auf diese Weise können wir einen persistenten Mechanismus für mehrere Elemente hinzufügen, ohne das aktuelle Verhalten beim Bewegen der Maus über die Anzeige zu beeinträchtigen.
Rastersymbole in Echtzeit
Damit Entwickler die Raster-Overlays einfacher aktivieren und deaktivieren können, haben wir beschlossen, neben den Rastercontainern in der DOM-Baumstruktur kleine Badges hinzuzufügen. Anhand dieser Kennzeichen können Entwickler auch Grid-Container in ihren DOM-Strukturen erkennen.
Änderungen am DOM-Baum
Da Grid-Abzeichen nicht die einzigen sind, die wir im DOM-Baum anzeigen möchten, möchten wir das Hinzufügen von Abzeichen 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 für ein Element mehrere Badges gibt, werden sie nach den Kategorien der Badges sortiert. Wenn sie sich in derselben Kategorie befinden, werden sie alphabetisch sortiert. Verfügbare Kategorien sind Security, Layout usw. und Grid gehört zur Kategorie Layout.
Außerdem haben wir von Anfang an eine integrierte Unterstützung für Bedienungshilfen. Für jedes interaktive Badge muss ein standardmäßiges und ein aktives aria-label angegeben werden. Bei schreibgeschützten Badges wird der Badge als aria-label verwendet.
Wie haben wir Stilaktualisierungen in Echtzeit erhalten?
Viele DOM-Änderungen werden in Echtzeit im DOM-Baum der Entwicklertools angezeigt. Zum Beispiel erscheinen neu hinzugefügte Knoten sofort in der DOM-Baumstruktur und entfernte Klassennamen verschwinden sofort. 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 in der DOM-Struktur angezeigt wurden, berechnete Stilaktualisierungen erhalten. Die einzige Möglichkeit, festzustellen, wann ein Element zu einem Grid-Container wird oder nicht mehr ist, besteht darin, den Browser ständig nach den aktuellen Stilinformationen jedes einzelnen Elements abzufragen. Das wäre unbedingt teuer.
Damit das Front-End leichter erkennen kann, wann der Stil eines Elements aktualisiert wurde, haben wir eine neue CDP-Methode für das Abfragen von Stilaktualisierungen hinzugefügt. Um Stilaktualisierungen von DOM-Knoten zu erhalten, beginnen wir damit, dem Browser mitzuteilen, welche CSS-Deklarationen erfasst werden sollen. Im Fall von Raster-Badges würden wir den Browser bitten, sich Folgendes zu merken:
{
"display": "grid",
"display": "inline-grid",
}
Wir senden dann eine Abfrageanforderung. Wenn im Steuerfeld „Elemente“ verfolgende Stilaktualisierungen für DOM-Knoten vorliegen, sendet der Browser den Entwicklertools eine Liste aktualisierter Knoten und löst die vorhandene Abfrageanfrage auf. Wenn DevTools wieder über Stilaktualisierungen benachrichtigt werden möchte, kann es diese Abfrageanfrage senden, anstatt ständig das Back-End von jedem einzelnen Knoten abfragen zu müssen. Die Entwicklertools können auch die erfassten CSS-Deklarationen ändern, indem sie eine neue Liste an den Browser senden.
Layoutbereich
Obwohl DOM-Baum-Kennzeichen die Auffindbarkeit von CSS-Rastern verbessern, möchten wir manchmal eine Liste aller CSS-Raster auf einer bestimmten Seite anzeigen und ihre persistenten Overlays einfach ein- und ausschalten, um Fehler im Layout zu beheben. Aus diesem Grund haben wir uns entschieden, einen eigenen Seitenleistenbereich nur für Layout-Tools zu erstellen. Dadurch erhalten wir einen speziellen Bereich, in dem alle Grid-Container gesammelt und alle Optionen für Grid-Overlays konfiguriert werden können. In diesem Layout-Bereich können wir auch zukünftige Layouts-lastige Tools wie Flexbox und Containerabfragen einfügen.
Elemente anhand von berechneten Stilen suchen
Damit die Liste der CSS-Grid-Container im Bereich Layout angezeigt werden kann, müssen die DOM-Knoten nach berechneten Stilen ermittelt werden. Auch das erwies sich als nicht einfach, da den Entwicklertools nicht alle DOM-Knoten bekannt sind, wenn die Entwicklertools geöffnet sind. Stattdessen kennt die Entwicklertools nur eine kleine Teilmenge von Knoten, die sich normalerweise auf der obersten Ebene der DOM-Hierarchie befindet, nur um die DOM-Struktur der Entwicklertools zu starten. 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 DevTools-Front-End eine Liste von CSS-Grid-Containern auf einer Seite abrufen, die möglicherweise iFrames und Schattenwurzeln durchdringen und sie im Layoutbereich rendern.
Fazit
„CSS Grid“ war eines der ersten Designtool-Projekte der Entwicklertools zur Unterstützung einer Funktion der Webplattform. Dabei wurden viele grundlegende Tools in den Entwicklertools vorgestellt, z.B. persistente Overlays, DOM-Baum-Badges und der Bereich Layout, und ebnete den Weg für zukünftige Layout-Tools in den Chrome-Entwicklertools wie Flexbox und Containerabfragen. Sie legt auch den Grundstein für die Raster- und Flexbox-Editoren, mit denen Entwickler die Raster- und Flexbox-Ausrichtung auf interaktive Weise ändern können. Wir werden sie in Zukunft besprechen.
Vorschaukanäle herunterladen
Du kannst Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Mit diesen Vorschaukanälen erhalten Sie Zugriff auf die neuesten Funktionen der Entwicklertools, können bahnbrechende Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, noch bevor Ihre Nutzer dies tun.
Chrome-Entwicklertools-Team kontaktieren
Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.
- Sende uns über crbug.com einen Vorschlag oder Feedback.
- Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen
> Hilfe > Probleme mit Entwicklertools melden. - Senden Sie einen Tweet an @ChromeDevTools.
- Hinterlasse Kommentare unter YouTube-Videos oder YouTube-Videos mit Tipps zu DevTools.