CSS-Übersicht: Potenzielle CSS-Verbesserungen erkennen

Jecelyn Yeen

Twitter GitHub Startseite

Im Bereich CSS-Übersicht können Sie den CSS-Code Ihrer Seite besser nachvollziehen und potenzielle Verbesserungen erkennen.

Steuerfeld „CSS-Übersicht“ öffnen

1. Öffnen Sie eine beliebige Webseite, zum Beispiel diese Seite.
2. Öffnen Sie die Entwicklertools.

3. Wählen Sie Entwicklertools > Weitere Tools > CSS-Übersicht anpassen und steuern aus.

   

   Alternativ können Sie das Steuerfeld CSS-Übersicht über das Befehlsmenü öffnen.

   

Bericht „CSS-Übersicht“ erstellen und noch einmal generieren

1. Klicken Sie auf die Schaltfläche Übersicht erfassen, um einen Bericht zur Preisvergleichsportal-Übersicht für Ihre Seite zu erstellen.

   

2. Wenn Sie die CSS-Übersicht noch einmal ausführen möchten, klicken Sie auf das Symbol Übersicht löschen und wiederholen Sie den ersten Schritt.

   

Bericht „Preisvergleichsportal-Übersicht“ auswerten

Der Bericht besteht aus fünf Abschnitten:

1. Übersicht – Zusammenfassung Eine allgemeine Zusammenfassung der CSS Ihrer Seite.

2. Farben: Alle Farben auf Ihrer Seite. Die Farben werden nach Typ gruppiert, z. B. Hintergrundfarben, Textfarben usw. In diesem Abschnitt werden auch Texte mit geringem Kontrast angezeigt.

   

   Jede Farbe ist anklickbar. Angenommen, die Rahmenfarbe #DADCE0 stimmt nicht mit dem Farbschema Ihrer Website überein. Klicken Sie auf die Farbe, um eine Liste der Elemente aufzurufen, die diese Farbe verwenden.

   

   Um das Element auf der Seite hervorzuheben, bewegen Sie den Mauszeiger auf das Element in der Liste.

   

   Wenn Sie das Element im Steuerfeld Elemente öffnen möchten, klicken Sie es in der Liste an.

3. Informationen zur Schriftart: Alle Schriftarten auf Ihrer Seite und ihre Vorkommen, gruppiert nach Schriftgröße, Schriftstärke und Zeilenhöhe. Ähnlich wie im Abschnitt Farben können Sie die Liste der betroffenen Elemente aufrufen, indem Sie auf deren Vorkommen klicken.

   

4. Nicht verwendete Deklarationen Alle Stile, die keine Auswirkungen haben, nach Grund gruppiert.

   

   Die beiden oben genannten Deklarationen werden beispielsweise nicht verwendet, weil der Inhalt die Höhe und Breite eines Inline-Elements bestimmt. Klicken Sie auf die Vorkommen, um die entsprechenden Elemente aufzurufen.

5. Medienabfragen: Alle auf Ihrer Seite definierten Medienabfragen, in absteigender Reihenfolge nach der Häufigkeit ihres Vorkommens sortiert Klicken Sie auf die Vorkommen, um die Liste der betroffenen Elemente aufzurufen.