CSS Grid-Tools in den Entwicklertools

Changhao Han
Changhao Han
X GitHub

Warum haben wir CSS-Grid-Tools entwickelt?

CSS-Raster ist ein sehr leistungsstarkes CSS-Layoutsystem, mit dem Webentwickler ein komplexes zweidimensionales Layout erstellen und Regeln festlegen können, wie jedes untergeordnete Element in einem Raster dimensioniert, ausgerichtet und angeordnet wird. CSS Grid wurde eingeführt, nachdem Flexbox populär geworden war. Zusammen können sie Entwicklern helfen, ein besseres responsives Design ohne komplizierte Ausrichtungs-Hacks oder JavaScript-gestütztes Layout zu erzielen.

Da es sich um ein relativ neues Layoutsystem handelt, ist es auch schwierig, CSS-Grid richtig zu verwenden. Die Syntax ist recht vielseitig (suchen Sie einfach nach Grid-Cheatsheet). Es gibt viele Möglichkeiten, dasselbe Layout zu erreichen. Durch die flexible Größe und die impliziten Tracks ist es schwieriger zu verstehen, warum sich das Layout wie gewünscht oder nicht wie gewünscht verhält. Deshalb haben wir uns entschlossen, spezielle CSS-Grid-Tools in DevTools bereitzustellen, damit Entwickler besser nachvollziehen können, was ihr CSS-Code bewirkt und wie sie das richtige Layout erhalten.

Tool-Design

Ein gemeinsames Projekt von Chrome und Edge

Die CSS-Grid-Tools haben sowohl in den Chrome-Entwicklertools als auch in den Edge-Entwicklertools für Aufsehen gesorgt. Wir beschlossen, von Anfang an zusammenzuarbeiten. Um dies zu erreichen, haben wir unsere Produkt-, Engineering- und Designressourcen von beiden Teams geteilt und wöchentlich abgestimmt.

Funktionen im Überblick

Es gibt drei Hauptfunktionen für CSS-Grid-Tools:

  1. Rasterspezifisches, persistentes Overlay, das bei Dimensions- und Bestellinformationen hilft
  2. Logos im DOM-Baum, die CSS-Grid-Container hervorheben und Raster-Overlays ein- und ausschalten
  3. Eine Seitenleiste, mit der Entwickler die Darstellung von DOM-Overlays anpassen können (z.B. Farbe und Breite von Regeln ändern)
  4. Ein CSS-Grid-Editor im Bereich Stile

Sehen wir uns das genauer an.

Dauerhafte Raster-Overlays

In den DevTools ist ein Overlay ein leistungsstarkes Tool, das Layout- und Stilinformationen zu einem einzelnen Element liefert:

ALT_TEXT_HERE

Diese zusätzlichen Informationen werden über das betreffende Element gelegt. Bisher wurden beim Bewegen des Mauszeigers auf ein Raster mit geöffneten DevTools die Informationen zum Box-Modell im Overlay angezeigt, aber die Hervorhebung von Inhalten auf Rasterelemente beschränkt, ohne zu erklären, warum das so ist. Für CSS-Grid-Overlays möchten wir zwei wichtige Elemente hinzufügen:

  • Wir möchten mehr nützliche Informationen zu Rastern anzeigen, z. B. von Nutzern erstellte Dimensionen und Lücken.
  • Wir möchten die Overlays anpinnen, damit wir mehrere Raster gleichzeitig sehen können und die Overlays die Rasterinformationen aktualisieren, wenn wir die Elementstilen ändern.

Sehen wir uns an, wie wir beides erreicht haben.

Erstellte und berechnete Größen im Vergleich

Eine der Herausforderungen beim Debuggen von CSS-Rastern sind die vielen Möglichkeiten, Raster-Track-Größen zu definieren. So kannst du beispielsweise eine Kombination aus Pixelwerten, Prozentwerten, Brüchen, der Wiederholungsfunktion und der MinMax-Funktion 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 erstellten Titelgrößen den berechneten Titelgrößen zuzuordnen, die der Browser für uns berechnet hat. Um diese Lücke zu schließen, haben wir diese beiden Informationen im Overlay nebeneinander platziert:

ALT_TEXT_HERE

Der String vor dem Punkt ist der eingegebene Wert und der String nach dem Punkt steht für den tatsächlich berechneten Wert.

Bisher war es in den DevTools nicht möglich, von Nutzern erstellte Werte abzurufen. Theoretisch könnten wir die von Nutzern erstellten Werte in DevTools selbst parsen und gemäß der CSS-Grid-Spezifikation berechnen. Das hätte viele komplizierte Szenarien erfordert und wäre im Grunde nur eine Duplizierung der Arbeit von Blink 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 für eine CSS-Eigenschaft nach der CSS-Kaskadierung. Dies ist der Wert, der gewonnen wird, nachdem die Style Engine alle Stylesheets kompiliert hat, aber bevor Werte wie Prozentsätze oder Brüche berechnet werden.

Wir verwenden diese API jetzt, um die von Nutzern erstellten Werte in Raster-Overlays anzuzeigen.

Persistente Overlays

Vor der Einführung von CSS-Grid-Tools war das Overlay in den Entwicklertools recht einfach: Sie bewegten den Mauszeiger auf ein Element, entweder im DOM-Baumbereich der Entwicklertools oder direkt auf der untersuchten Seite, und es wurde ein Overlay mit einer Beschreibung dieses Elements angezeigt. Wenn Sie den Mauszeiger weg bewegen, verschwindet das Overlay. Bei Raster-Overlays wollten wir etwas anderes: Mehrere Raster können gleichzeitig hervorgehoben werden und Raster-Overlays können aktiviert bleiben, während normale Overlays beim Hovern weiterhin funktionieren.

Beispiel:

ALT_TEXT_HERE

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 einer bestehenden Suite von Markierungstools eine neue GridHighlightTool hinzugefügt, die später zu einer globalen PersistentTool für die gleichzeitige Markierung aller dauerhaften Overlays weiterentwickelt wurde. Für jede Art von dauerhaften Overlays (Raster, Flex usw.) wird im entsprechenden Tool ein entsprechendes Konfigurationsfeld verwendet. Jedes Mal, wenn der Overlay-Highlighter prüft, was gezeichnet werden soll, werden auch diese Konfigurationen berücksichtigt.

Damit in DevTools festgelegt werden kann, 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

wobei jedes GridNodeHighlightConfig Informationen dazu enthält, welcher Knoten gezeichnet werden soll und wie. So können wir einen persistenten Mechanismus für mehrere Elemente hinzufügen, ohne das aktuelle Verhalten beim Hovern zu beeinträchtigen.

Logos für Echtzeit-Raster

Damit Entwickler die Raster-Overlays ganz einfach ein- und ausschalten können, haben wir im DOM-Baum kleine Logos neben den Rastercontainern hinzugefügt. Diese Logos können Entwicklern auch dabei helfen, Grid-Container in ihren DOM-Strukturen zu erkennen.

ALT_TEXT_HERE

Änderungen am DOM-Baum

Da Grid-Kennzeichen nicht die einzigen Kennzeichen sind, die wir im DOM-Baum anzeigen möchten, möchten wir das Hinzufügen von Kennzeichen so einfach wie möglich gestalten. ElementsTreeElement, die Klasse, die für das Erstellen und Verwalten einzelner DOM-Baumelemente in DevTools verantwortlich ist, wurde um mehrere neue öffentliche 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 gehören Security, Layout usw. und 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 im DOM-Baum der DevTools in Echtzeit angezeigt. 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 Grid-Container wird oder aufhört, einer zu sein, besteht darin, den Browser ständig nach den aktuellen Stilinformationen jedes Elements abzufragen. Das wäre unerschwinglich teuer.

Damit das Frontend 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, müssen wir dem Browser zuerst mitteilen, welche CSS-Deklarationen wir erfassen möchten. Bei Raster-Badges fordern wir den Browser auf, Folgendes zu erfassen:

{
  "display": "grid",
  "display": "inline-grid",
}

Wir senden dann eine Abfrageanfrage. Wenn es verfolgte Stilaktualisierungen für DOM-Knoten im Bereich „Elemente“ gibt, sendet der Browser eine Liste der aktualisierten Knoten an DevTools und löst die vorhandene Abfrageanfrage. Wenn DevTools wieder über Stilaktualisierungen benachrichtigt werden soll, kann es diese Abfrage senden, anstatt das Backend ständig von jedem Knoten aus abzufragen. In den DevTools können Sie auch die erfassten CSS-Deklarationen ändern, indem Sie eine neue Liste an den Browser senden.

Bereich „Layout“

DOM-Tree-Kennzeichen tragen zwar zur Auffindbarkeit von CSS-Grids bei, manchmal möchten wir aber eine Liste aller CSS-Grids auf einer bestimmten Seite sehen und die dauerhaften Overlays einfach ein- und ausschalten, um die Layouts zu debuggen. Deshalb haben wir uns entschieden, eine eigene Seitenleiste nur für Layout-Tools zu erstellen. So haben wir einen speziellen Bereich, in dem wir alle Grid-Container zusammenfassen und alle Optionen für Grid-Overlays konfigurieren können. In diesem Bereich Layout können wir auch zukünftige Tools mit vielen Layoutoptionen (z.B. Flexbox, Containerabfragen) einfügen.

Elemente nach berechneten Stilen suchen

Damit die Liste der CSS-Rastercontainer im Bereich Layout angezeigt wird, müssen wir DOM-Knoten nach berechneten Stilen suchen. Das stellte sich jedoch als nicht ganz einfach heraus, da nicht alle DOM-Knoten den Entwicklertools bekannt sind, wenn diese geöffnet sind. Stattdessen kennt DevTools nur eine kleine Teilmenge von Knoten, in der Regel auf der obersten Ebene der DOM-Hierarchie, um den DOM-Baum von DevTools 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

So kann die DevTools-Frontend-Ansicht eine Liste der CSS-Grid-Container auf einer Seite abrufen, möglicherweise durch iFrames und Schattenwurzeln hindurch, und sie im Layoutbereich rendern.

Fazit

Die CSS-Grid-Tools waren eines der ersten Design-Tools in DevTools, das eine Webplattformfunktion unterstützte. Es wurden viele grundlegende Tools in den DevTools eingeführt, z. B. persistente Overlays, DOM-Baum-Kennzeichen und der Bereich Layout. Außerdem wurde der Grundstein für zukünftige Layout-Tools in den Chrome DevTools wie Flexbox- und Containerabfragen gelegt. Außerdem legte es den Grundstein für Grid- und Flexbox-Editoren, mit denen Entwickler die Grid- und Flexbox-Ausrichtung interaktiv ändern können. Wir werden sie später durchgehen.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Ü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 dies tun.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.