CSS-Übersicht: Potenzielle CSS-Verbesserungen erkennen

Jecelyn Yeen

Im Bereich CSS-Übersicht können Sie sich ein besseres Bild vom CSS-Code Ihrer Seite machen und potenzielle Verbesserungen erkennen.

Bereich „CSS-Übersicht“ öffnen

1. Öffnen Sie eine beliebige Webseite, z. B. diese Seite.
2. Öffnen Sie die Entwicklertools.

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

   

   Alternativ können Sie das Befehlsmenü verwenden, um den Bereich CSS-Übersicht zu öffnen.

   

Bericht „CSS-Übersicht“ erstellen und noch einmal ausführen

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

   

2. Wenn Sie eine 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“

Der Bericht besteht aus fünf Abschnitten:

1. Übersicht: Eine allgemeine Zusammenfassung des CSS-Codes Ihrer Seite.

2. Farben: Alle Farben auf Ihrer Seite. Die Farben sind nach Typen gruppiert, z. B. Hintergrundfarben, Textfarben usw. In diesem Abschnitt werden auch Texte mit niedrigem 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.

   

   Um das Element im Steuerfeld Elemente zu öffnen, klicken Sie in der Liste auf das Element.

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

   

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

   

   Die beiden obigen 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, sortiert nach Anzahl der Vorkommnisse in absteigender Reihenfolge. Klicken Sie auf das Vorkommen, um die Liste der betroffenen Elemente aufzurufen.