Freigeben über

Optimieren von CSS-Formatvorlagen mit dem CSS-Übersichtstool

  • Artikel

Das CSS-Übersichtstool erfasst eine Übersicht über den CSS-Code, der auf einer Webseite verwendet wird, und zeigt einen Bericht über die verwendeten Farben, Schriftarten und Medienabfragen an. Das Tool identifiziert auch potenzielle Farbkontrastprobleme und probleme mit nicht verwendeten CSS-Deklarationen.

Öffnen des CSS-Übersichtstools

So öffnen Sie das CSS-Übersichtstool :

  1. Navigieren Sie in Microsoft Edge zur Demo-App für die TODO-Liste oder zu Ihrer eigenen Webseite.

  2. Öffnen Sie DevTools, indem Sie F12 oder STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS) drücken.

  3. Klicken Sie auf der symbolleiste Standard auf Weitere Tools, und wählen Sie css Overview (CSS-Übersicht) aus der Liste aus.

    Microsoft Edge mit der Demo-App für die TODO-Liste und DevTools daneben mit der Liste der Tools über die Schaltfläche Weitere Tools

  4. Das CSS-Übersichtstool wird geöffnet und zeigt einen Willkommensbildschirm an.

    Microsoft Edge mit der Demo-App für die TODO-Liste und DevTools daneben, die den Begrüßungsbildschirm

Erfassen eines CSS-Übersichtsberichts

Beginnen Sie mit der Verwendung des Tools, indem Sie einen neuen Bericht erfassen. Klicken Sie auf Übersicht erfassen. Der Übersichtsbericht wird angezeigt.

Microsoft Edge mit der Demo-App für die TODO-Liste und DevTools daneben, die den CSS-Übersichtsbericht für diese Website anzeigen

Wenn Sie Änderungen an Ihrer Webseite vornehmen und einen neuen Bericht anzeigen möchten, klicken Sie auf Übersicht löschen , und erfassen Sie dann eine neue Übersicht.

Microsoft Edge mit der Demo-App für die TODO-Liste und DevTools daneben mit einem CSS-Übersichtsbericht mit der Schaltfläche Übersicht löschen oben

Grundlegendes zum Bericht

Der CSS-Übersichtsbericht enthält Informationen, die in mehrere Abschnitte unterteilt sind:

  • Übersichtszusammenfassung: Statistiken zu wichtigen CSS-Regeln, Selektoren und Medienabfragen auf der Seite.
  • Farben: Farben, die auf der Seite verwendet werden.
  • Schriftartinformationen: Liste der Schriftarten auf der Seite.
  • Nicht verwendete Deklarationen: Liste nicht verwendeter CSS-Deklarationen.
  • Medienabfragen: Liste der Medienabfragen.

Um die Abschnitte des Berichts anzuzeigen, verwenden Sie die Bildlaufleiste, oder klicken Sie auf die Abschnitte in der Seitenleiste:

TODO-Demo-App auf der linken Seite, DevTools CSS Overview report on the right with a clickable list of sections and scrollbar

Übersichtszusammenfassung

Der Übersichtszusammenfassungsabschnitt des CSS-Übersichtsberichts ist nützlich, um einen schnellen Überblick über Ihren CSS-Code zu erhalten. Sie enthält die Anzahl externer und Inline-Stylesheets, die Anzahl der CSS-Regeln, die Anzahl der Selektoren und ihre verschiedenen Typen sowie die Anzahl der Medienabfragen.

Dies kann verwendet werden, um das Volumen und die Konsistenz Ihrer CSS-Codebasis auf einer bestimmten Webseite zu bewerten. Wenn Sie sich z. B. entschieden haben, nur Klassenselektoren zu verwenden, können Sie im Abschnitt Zusammenfassung schnell andere Arten von Selektoren wie ID oder Attribut erkennen.

Abschnitt "Farben"

Im Abschnitt Farben des CSS-Übersichtsberichts werden alle auf der Webseite verwendeten Farben aufgelistet und nach Hintergrund-, Text-, Füll- und Rahmenkategorien gruppiert.

Dies kann hilfreich sein, um Fälle zu ermitteln, in denen anstelle einer gemeinsamen Farbe mehrere ähnliche Farben verwendet werden. Benutzerdefinierte CSS-Eigenschaften (auch als CSS-Variablen bezeichnet) können verwendet werden, um wiederholte Farben in einer CSS-Datei zu vermeiden und daher dieses Problem zu vermeiden. Erfahren Sie mehr über CSS-Variablen in MDN.

Der Abschnitt Farben enthält auch eine Liste der Farbkontrastprobleme auf der Seite. Weitere Informationen finden Sie weiter unten unter Anzeigen von Elementen mit Farbkontrastproblemen.

Abschnitt "Schriftartinformationen"

Im Abschnitt Schriftinformationen des CSS-Übersichtsberichts werden alle auf der Webseite verwendeten Schriftfamilien aufgelistet. Außerdem finden Sie Details dazu, welche Größen, Gewichte und Zeilenhöhen jeweils verwendet werden.

Beim Entwerfen einer Webseite kann die Verwendung konsistenter Typografieeinstellungen dazu beitragen, ein ästhetisches Ergebnis zu erzielen. Der Abschnitt Schriftartinformationen kann hilfreich sein, um zu erkennen, wenn zu viele verschiedene Schriftarten oder Schriftartenarten verwendet werden.

Jede Schriftart im Abschnitt Schriftartinformationen enthält Links zu den DOM-Elementen, auf die sie angewendet werden. So zeigen Sie die Elemente an, für die eine bestimmte Schriftart gilt:

  1. Klicken Sie im Übersichtsbericht auf der Randleiste auf Schriftartinformationen , um zum entsprechenden Abschnitt des Berichts zu scrollen.

  2. Ermitteln Sie die Schriftfamilie und die größe, die Gewichtung oder die Zeilenhöhe, die Sie interessieren.

  3. Klicken Sie daneben auf den Link X-Vorkommen , um die Liste der Elemente anzuzeigen.

  4. Bewegen Sie die Maus über die Elemente in der Liste, um sie auf der gerenderten Seite hervorzuheben.

    Microsoft Edge mit der ToDO-Listen-Demo-App und DevTools, die die Liste der Elemente für einen bestimmten Schriftgrad und ein hervorgehobenes Element beim Zeigen anzeigt

  5. Klicken Sie auf ein Element, um das Tool Elemente mit ausgewähltem Element automatisch zu öffnen.

    Microsoft Edge mit der Demo-App für die TODO-Liste und DevTools mit dem Tool

Nicht verwendete Deklarationen

Im Abschnitt Nicht verwendete Deklarationen des CSS-Übersichtsberichts werden einige css-Deklarationen aufgelistet, die sich nicht auf ihre Zielelemente auswirken.

CSS-Deklarationen sind Schlüssel-Wert-Paare wie top: 42px. CSS-Deklarationen sind in CSS-Regeln enthalten, und Regeln zielen auf bestimmte Elemente auf der Webseite ab. Abhängig von anderen Formatvorlagen, die auf ein Element angewendet werden, hat eine CSS-Deklaration möglicherweise keine Auswirkung.

Beispielsweise hat die top: 42px Deklaration keine Auswirkung, wenn das Element, auf das sie abzielt, nicht mit position: absolute oder position: relative positioniert ist.

Diese Fälle sind möglicherweise schwer zu finden, und der Abschnitt Nicht verwendete Deklarationen hilft, indem einige von ihnen aufgelistet werden. Beachten Sie, dass nicht alle möglichen Fälle aufgeführt sind. Derzeit werden die folgenden Fälle gemeldet:

  • Wenn die topEigenschaften , right, bottomoder left für statisch positionierte Elemente verwendet werden.
  • Wenn die width Eigenschaften oder height für Inlineelemente verwendet werden.
  • Wenn die vertical-align -Eigenschaft für Elemente verwendet wird, die keine Inline- oder Tabellenzellen sind.

Medienabfragen

Im Abschnitt Medienabfragen des CSS-Übersichtsberichts werden die CSS-Medienabfragen auf der Webseite aufgelistet.

CSS-Medienabfragen können verwendet werden, um bestimmte Stile abhängig vom Medientyp (z. B print . oder screen) oder je nach Viewportgröße anzuwenden. Dies wird häufig verwendet, damit Webseiten auf den verfügbaren Speicherplatz reagieren.

Wenn eine CSS-Codebasis komplex wird, kann es schwierig sein, alle CSS-Medienabfragen nachzuverfolgen. Der Abschnitt Medienabfragen vereinfacht dies. Jede Medienabfrage im Abschnitt enthält auch einen Link zu der CSS-Datei, in der sie definiert ist. So zeigen Sie diese Datei an:

  1. Klicken Sie im Übersichtsbericht auf der Randleiste auf Medienabfragen , um zum relevanten Abschnitt des Berichts zu scrollen.

  2. Suchen Sie im Bericht nach der Medienabfrage, an der Sie interessiert sind.

  3. Klicken Sie daneben auf den Link X-Vorkommen , um die entsprechenden Dateien anzuzeigen.

    Microsoft Edge mit der Demo-App für die TODO-Liste und DevTools, die den Abschnitt

  4. Klicken Sie auf eine der Dateien, um automatisch das Tool Quellen mit dieser Datei zu öffnen.

    Microsoft Edge mit der ToDO-Listen-Demo-App und DevTools, die das Tool Quellen mit der Datei, die eine Medienabfrage enthält, in der rechten Zeile angezeigt wird

Nicht einfache Selektoren

Im Abschnitt Nicht einfache Selektoren des CSS-Übersichtsberichts sind die nicht einfachen CSS-Selektoren auf der Webseite aufgeführt.

In CSS sind einfache Selektoren Selektoren mit nur einer einzelnen Komponente (z. B. einer einzelnen id Selektor- oder Typauswahl). Diese Selektoren werden nicht mit anderen Selektorkomponenten oder Kombinatoren kombiniert. Alle grundlegenden Selektoren, Attribute und einzelnen Pseudoklassen und Pseudoelemente sind einfache Selektoren.

Nicht einfache Selektoren sind komplizierter und neigen dazu, mehr Elemente abzugleichen, was möglicherweise zu zeitintensiven Recalculate Styles-Ereignissen im Leistungstool führt. Sie können versuchen, diese Selektoren so zu ändern, dass sie spezifischer sind und weniger Elementen entsprechen, sodass der Browser in den folgenden Fällen weniger Zeit für die Berechnung von Stilen benötigt:

  • Wenn Elemente dem DOM hinzugefügt oder daraus entfernt werden.
  • Wenn die Attribute eines Elements geändert werden, z class . B. oder id.
  • Wenn Benutzereingaben auftreten, z. B. eine Mausbewegung oder eine Änderung des Fokus, kann sich dies auf Regeln auswirken :hover .

Um die Liste der nicht einfachen Selektoren anzuzeigen, klicken Sie im Übersichtsbericht auf der Randleiste auf Nicht einfache Selektoren , um zum relevanten Abschnitt des Berichts zu scrollen:

Die Liste der nicht einfachen Selektoren im CSS-Übersichtstool

Von hier aus können Sie die Auswirkungen Ihrer Änderungen und die Leistung einzelner Selektoren weiter analysieren, indem Sie das Feature Selector Stats im Leistungstool verwenden.

Siehe auch

Anzeigen von Elementen mit Farbkontrastproblemen

Der Abschnitt Farben des Übersichtsberichts kann auch verwendet werden, um Farbkontrastprobleme auf einer Webseite zu ermitteln. Wenn die aktuelle Webseite Elemente enthält, bei denen der Kontrast zwischen der Schriftfarbe und der Hintergrundfarbe nicht ausreicht, wird der Unterabschnitt Kontrastprobleme angezeigt.

So finden Sie Farbkontrastprobleme:

  1. Navigieren Sie in Microsoft Edge zur Demowebsite für Tierheime mit Farbkontrastproblemen. Oder navigieren Sie zu Ihrer eigenen Website.

  2. Öffnen Sie DevTools, indem Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS) drücken.

  3. Klicken Sie auf der symbolleiste Standard auf Weitere Tools, und wählen Sie css Overview (CSS-Übersicht) aus der Liste aus.

  4. Klicken Sie im CSS-Übersichtstool auf Übersicht erfassen , und klicken Sie dann auf der Randleiste des Übersichtsberichts auf Farben .

  5. Scrollen Sie nach unten zum Unterabschnitt Kontrastprobleme , um alle Probleme anzuzeigen.

    Microsoft Edge mit der ToDO-Listen-Demo-App und DevTools, die eine Liste der Kontrastprobleme im CSS-Übersichtsbericht anzeigen

  6. Um die Elemente anzuzeigen, die ein bestimmtes Farbkontrastproblem aufweisen, wählen Sie das Problem aus, das Sie beheben möchten, und klicken Sie auf Text. Die entsprechenden Elemente werden aufgelistet.

    Microsoft Edge mit der ToDO-Listen-Demo-App und DevTools, die eine Liste von Elementen mit einem Farbkontrastproblem anzeigen

  7. Klicken Sie auf ein Element in der Liste, um das entsprechende Element im Tool Elemente zu öffnen.

    Microsoft Edge mit der Demo-App für die TODO-Liste und DevTools mit dem Tool

Informationen zum Beheben von Kontrastproblemen finden Sie im Abschnitt Textkontrast der DevTools-Features für Barrierefreiheitstests.

Siehe auch