CSS-Nutzung
Sehen Sie Umfang und Anteil des bei der Prüfung verwendeten CSS pro Seite und Stylesheet. Ungenutzte Stile können nach einer Interaktion oder auf einer anderen Seite benötigt werden.
Online-CSS-Audit
Erfahren Sie, wie viel CSS eine Seite lädt, welche Stile bei der Prüfung verwendet wurden und wo sich Regeln wiederholen. Farben, Schriften, Ebenen und Fehler stehen in einem Bericht.
Ergebnisformat
Der Bericht zeigt CSS-Quellen, Metriken und Signale
Untersuchen Sie Größe und Nutzung des CSS und prüfen Sie anschließend Farben, Schriften, Ebenen und Validierungsfehler.
Beispieldaten zur Erklärung des Berichts. Ergebnisse Ihrer Seite erscheinen nach der Prüfung.
Stylesheet-Quellübersicht
Vergleichen Sie externe Stylesheets mit eingebetteten Stilen. Für jede Quelle sehen Sie Größe und Umfang des bei der Prüfung verwendeten oder ungenutzten Codes.
- Quelle
- app.css
- Typ
- extern
- Nutzung
- 48 KiB / 72 KiB
- Ungenutzt
- 72 KiB · 60%
- Quelle
- components.css
- Typ
- extern
- Nutzung
- 32 KiB / 8 KiB
- Ungenutzt
- 8 KiB · 20%
- Quelle
- Inline-Styles
- Typ
- Inline
- Nutzung
- 6 KiB / 2 KiB
- Ungenutzt
- 2 KiB · 25%
Beginne mit der Stylesheet-Quelle und einer wiederholten Deklaration. Prüfe, ob die Wiederholungen zur selben Komponente und zum selben Zustand gehören. Ändere die Quelle und vergleiche anschließend einen neuen Bericht.
Was wir prüfen
Ein vollständiges CSS-Inventar statt allgemeiner Ratschläge
Der Bericht vereint Quellen und Größen der Stylesheets, Codenutzung, Selektorpriorität, wiederholte Deklarationen, Gestaltungswerte und Validierungsfehler.
Größe und Quellen
Wir erfassen die gesamte CSS-Größe, die Anzahl der Stylesheet-Quellen und getrennte Zählungen für Inline- und externe Stylesheets.
Selektor-Spezifität
Vergleichen Sie minimale, mittlere und maximale Selektorspezifität, die zur Regelpriorität beiträgt. Besonders komplexe Selektoren werden separat aufgeführt.
Wiederholte Deklarationen und !important
Prüfen Sie die Anzahl von Regeln, Selektoren und Deklarationen, wiederholte Eigenschaft-Wert-Paare und Beispiele mit !important.
Media Queries und Präfixe
Wir zeigen die häufigsten Media Queries und zählen CSS-Eigenschaften mit Vendor-Präfixen: -webkit-, -moz-, -ms- und -o-.
Farben, Schriftarten, z-index und Fehler
Der Bericht gibt eindeutige Farbwerte, erkannte font-family-Werte, numerische z-index-Werte und Beispiele für CSS-Validierungsfehler aus.
So funktioniert's
Von der URL zur vollständigen CSS-Zusammenfassung der Seite
Geben Sie eine Seiten-URL ein. Milten öffnet sie im Browser, sammelt die Stylesheets und erstellt den Bericht. Eine Integration in den Build ist nicht nötig.
Seite laden und CSS sammeln
Der Bericht zeigt die geprüfte URL, das Datum und die Stilquellen. In die Seite eingebettete Stile werden getrennt von externen Stylesheets aufgeführt.
CSS-Nutzung und Selektorpriorität messen
Sehen Sie, wie viel CSS verwendet wurde, wie viele Regeln und Deklarationen vorliegen und welche Selektoren die höchste Spezifität haben.
Tabellen für die CSS-Prüfung erstellen
Prüfen Sie wiederholte Deklarationen, !important, Media Queries, Browserpräfixe, Farben, Schriften, Ebenen und CSS-Fehler.
FAQ
Häufig gestellte Fragen zum CSS-Audit
Antworten zu CSS-Nutzung, Selektorpriorität, !important, Berichtsinhalten und Prüfdauer.
Wie wirkt sich ungenutztes CSS auf die Geschwindigkeit aus?
Der Browser lädt, parst und wendet CSS an, bevor er die Seite rendert. Je mehr unnötige Regeln es gibt, desto höher ist das Risiko von Verzögerungen beim ersten Rendern, und desto schwieriger ist die Oberfläche zu pflegen.
Warum die Spezifität von Selektoren prüfen?
Spezifität hilft, bei widersprüchlichen CSS-Regeln die Selektorpriorität zu bestimmen. Sehr spezifische Selektoren erschweren spätere Änderungen, weil sie stärkere Regeln zum Überschreiben benötigen.
Sollte jede !important-Deklaration entfernt werden?
Nein. !important ändert die Priorität einer Deklaration und kann beabsichtigt sein. Der Bericht zeigt, wo sich eine Untersuchung lohnt. Prüfe die Kaskade und die Zustände der Komponente, bevor du es ersetzt.
Welche Daten enthält der Bericht?
Der Bericht enthält URL und Datum, Stylesheet-Quellen und Größen, Codenutzung, Selektoren und Spezifität, wiederholte Deklarationen, !important, Media Queries, Browserpräfixe, Farben, Schriften, Ebenen und CSS-Fehler.
Wie lange dauert eine Seitenprüfung?
Eine Prüfung einer einzelnen Seite dauert normalerweise weniger als eine Minute. Die Dauer hängt von der Anzahl der Ressourcen, den Netzwerkbedingungen und davon ab, wie lange die Seite nach dem Laden braucht, um sich zu stabilisieren.
Verwandte Dienste
Was als Nächstes bei diesem Dienst geprüft werden sollte
JavaScript-Prüfung
Prüfen Sie JavaScript-Dateien, Ladefehler und beim Laden ungenutzten Code. Finden Sie Skripte, die genauer untersucht werden sollten.
ÖffnenHTML-Prüfung
Finden Sie HTML-Fehler und eine zu komplexe Seitenstruktur. Der Bericht nennt die betroffenen Elemente.
ÖffnenGestaltungswerte
Erfassen Sie Farben, Schriften, Größen und Abstände der Seite. Erhalten Sie eine Werteliste für die Arbeit an der Gestaltung.
ÖffnenBarrierefreiheit
Finden Sie Barrierefreiheitsprobleme mit einer automatisierten Prüfung. Erhalten Sie Empfehlungen; eine vollständige Bewertung erfordert auch manuelle Prüfungen.
Öffnen