CSS
Styles von Seiten erfassen
Geben Sie eine URL ein. Milten liest verfügbare Stylesheets und gruppiert wiederkehrende Farben, Schriften, Größen, Abstände, Eckenradien, Schatten und benutzerdefinierte Eigenschaften.
Farben, Schriften und Abstände Ihrer Website
Erfassen Sie Farben, Schriften und Abstände einer Seite in einem Bericht. Finden Sie wiederholte Werte und Unterschiede für ein einheitliches Design.
So funktioniert der Scanner
Von CSS-Quellen zur Häufigkeitszusammenfassung der Werte
Häufigkeit
Wiederkehrende Werte gruppieren
Der Bericht zählt, wie oft identische Farben, Schriften, Größen, Abstände, border-radius, box-shadow und CSS-Variablen vorkommen. Je häufiger ein Wert wiederholt wird, desto eher wirkt er wie ein System-Token.
Zusammenfassung
Konzentration und Streuung anzeigen
Die Zusammenfassung hilft Ihnen schnell zu erkennen, wo Werte konsistent wiederkehren und wo sich in der Oberfläche eine große Streuung von Farben, Größen, Schriften oder Schatten angesammelt hat.
Lesen
Hilft bei der Auswahl, was zuerst geprüft werden sollte
Vergleichen Sie wiederkehrende Farben, Schriftgrößen und Abstände mit ihren Rollen in Komponenten. Ähnliche Werte können beabsichtigt sein. Die CSS-Zusammenfassung hilft bei der Planung von Tokens, erstellt aber weder ein fertiges Designsystem noch semantische Namen.
Was im Bericht enthalten ist
Sieben Gruppen von Gestaltungswerten
Farben
Wiederkehrende Farben
Der Scanner zeigt Farbwerte und ihre Nutzungsanzahl, damit Sie Systemfarben von versehentlichen lokalen Schattierungen unterscheiden können.
WertNutzungen
Schriftarten
Schriftarten und Textgrößen
Der Bericht enthält erkannte font-family-Werte, deren Häufigkeit und wiederkehrende font-size-Werte.
font-familyfont-size
Abstand / Größe
Größen, margin, padding, width und height
Die Zusammenfassung hebt häufig verwendete Größen- und Abstandswerte hervor. Eine große Streuung hier deutet meist auf eine schwache Grid-Konsistenz hin.
pxrem
Radius / Schatten
Radien und Schatten
Getrennte Gruppen zeigen wiederkehrende border-radius- und box-shadow-Werte, einschließlich Fällen, in denen ein Wert häufiger vorkommt als die anderen.
Radiusshadow
CSS-Variablen
Erkannte Custom Properties
Der Scanner zeigt CSS-Custom-Properties und ihre Nutzungshäufigkeit, damit du siehst, welche Variablen bereits wie Tokens funktionieren.
--varNutzungen
FAQ
Häufig gestellte Fragen zum CSS-Tokens-Scanner
Kurze Antworten darauf, welche Werte in den Bericht einfließen und wie die Häufigkeitszusammenfassung zu lesen ist.
Wie unterscheidet sich der CSS-Tokens-Scanner vom Exportieren von CSS-Variablen?
Er betrachtet mehr: Über Custom Properties hinaus zeigt der Bericht wiederkehrende Farben, Schriftarten, font-size-Werte, Größen, Abstände, border-radius und box-shadow. Die Nutzungshäufigkeit zählt bei jedem Wert.
Kann ich eine Website ohne Repository-Zugriff analysieren?
Ja. Der erste Durchlauf kann gegen öffentliche Seiten und verlinkte Stylesheets laufen. Wenn ein Teil des CSS hinter einer Authentifizierung liegt oder auf der Seite nicht geladen wird, fließt er nicht in die Zusammenfassung ein.
Zeigt der Bericht Token-Konflikte?
Der Bericht zeigt wiederkehrende Werte und ihre Verteilung. Er erkennt keine semantischen Konflikte und schlägt keine Token-Namen vor. Ihr Team entscheidet über die Organisation der Tokens.
Ist der Scanner nützlich, wenn bereits Tokens existieren?
Ja. Der Bericht zeigt, welche CSS-Variablen gefunden wurden und wie oft sie verwendet werden, sowie wo daneben noch wiederkehrende Rohwerte existieren: Farben, Größen, Abstände oder Schatten.
Wie sollte ich leere oder seltene Werte lesen?
Ein seltener Wert kann zu einem wichtigen Zustand oder einer wichtigen Komponente gehören. Prüfen Sie seine Verwendung, bevor Sie ihn zusammenführen oder löschen. Die Häufigkeit hilft bei der Priorisierung der Untersuchung, entscheidet aber nicht, welche Werte zu einem Token werden sollen.
Verwandte Dienste
Was als Nächstes bei diesem Dienst geprüft werden sollte
CSS-Audit
Finden Sie große Stylesheets, Duplikate und beim Laden ungenutzte Stile. Diese Stile können auf anderen Seiten oder nach Benutzeraktionen erforderlich sein.
ÖffnenHTML-Prüfung
Finden Sie HTML-Fehler und eine zu komplexe Seitenstruktur. Der Bericht nennt die betroffenen Elemente.
ÖffnenBarrierefreiheit
Finden Sie Barrierefreiheitsprobleme mit einer automatisierten Prüfung. Erhalten Sie Empfehlungen; eine vollständige Bewertung erfordert auch manuelle Prüfungen.
ÖffnenJavaScript-Prüfung
Prüfen Sie JavaScript-Dateien, Ladefehler und beim Laden ungenutzten Code. Finden Sie Skripte, die genauer untersucht werden sollten.
Öffnen