Keine Werbung mögen? Gehen Werbefrei Heute 

CSS-Standard-Eigenschaft-Extractor

EntwicklerText

ANZEIGE Entfernen?

EINGANG

Automatischer Prozess

AUSGABE

Client-Seite

ANZEIGE Entfernen?

Führung

CSS-Standard-Eigenschaft-Extractor

Fügen Sie eine CSS- oder SCSS-Datei ein und erhalten sofort eine saubere, sortierte, deduplizierte Liste aller --custom-property in ihr deklarierten – zusammen mit dem Selektor, in dem sie deklariert wurde. Der Extraktor zeigt auch Variablen an, die über var(--name) verwendet werden, aber nirgends deklariert sind, was eine häufige Ursache für fehlerhafte Styles in großen Design-Systemen ist.

Nutzung

Fügen Sie Ihre Stylesheet in das CSS / SCSS-Eingabe Feld ein (oder klicken Sie Probieren Sie ein Beispiel aus um ein Beispiel zu laden).
Wählen Sie ein AusgabeformatFeld, um eine Tabelle, ein JSON-Objekt oder einen fertigen :root { } Block einzugeben.
Verwenden Sie die Filter Feld, um das Ergebnis nach Variablennamen, Wert oder Selektorschicht zu verfeinern.
Umschalten Selektorschicht einbeziehen um zu bestimmen, ob die Tabelle zeigt, wo jede Variable deklariert wurde.
Prüfen Sie das Nicht definierte Variablen Panel auf alle var(--name) Referenzen, die keine entsprechende Deklaration haben.
Kopieren oder herunterladen Sie die extrahierte Liste mit den Buttons im Ausgabepanel.

Funktionen

Klammern-bewusstes Parser – durchläuft die Stylesheet Zeichen für Zeichen, um die korrekte Behandlung von verschachtelten Selektoren, Media-Abfragen und gekennzeichneten Werten zu gewährleisten.
Selektorschichtverfolgung – Jede Variable wird mit dem Selektor oder At-Regel verbunden, in der sie deklariert wurde, sodass Sie einen :root Token von einem komponentenbezogenen Überschreibungsfall unterscheiden können.
Drei Ausgabeformate – einfache Texttabelle zum Überblick, JSON für programmierte Nutzung und ein sauberer :root { } Block, den Sie zurück in eine Stylesheet einfügen können.
Erkennung nicht definierte Variablen – markiert alle var(--name) die nirgends eine entsprechende Deklaration haben.
Live-Filter – tippen Sie ein, um das Ergebnis nach Variablennamen, Wert oder Selektorschicht in Echtzeit zu verfeinern.
Dedupe und Sortierung – doppelte Deklarationen innerhalb derselben Selektorschicht werden zusammengefasst und die Liste wird alphabetisch sortiert, um schnelle Durchsuchung zu ermöglichen.
Laufend im Browser – nichts wird hochgeladen; funktioniert auch bei privaten und unvollständigen Stylesheets.

Wann Sie dieses Tool verwenden sollten

Auditing eines Design-System-Stylesheets, um eine Masterliste von Tokens zu erstellen.
SCSS-Variablen in native CSS-Custom-Properties migrieren.
Die Ursache eines fehlerhaften Stils aufgrund eines falsch geschriebenen var() Referenzes finden.
Ein Starter :root { } Block aus einem Drittanbieter-Thema generieren.
Tokens als JSON exportieren, um sie in einer Dokumentationsseite oder Storybook-Einträge zu verwenden.

 Häufig gestellte Fragen

Was ist eine CSS-Custom-Property?

Eine CSS-Custom-Property (auch CSS-Variable genannt) ist eine von einem Autor definierte Identifikation, die mit zwei Bindestrichen (z. B. --color-primary) vorangestellt wird, deren Wert überall im Stylesheet mittels der var()-Funktion wiederverwendet werden kann. Im Gegensatz zu Variablen in Preprocessor-Systemen werden Custom-Properties im Browser bei Laufzeit berechnet, wodurch sie wie jedes andere CSS-Eigenschaft kascaden und vererbt werden und dynamisch über JavaScript aktualisiert werden können.
Wie wirkt sich die Selektorschicht auf eine Custom-Property aus?

Eine Custom-Property existiert nur innerhalb des Unterbaums des Elements, in dem sie deklariert wird. Die Deklaration auf :root macht sie effektiv global, da :root das html-Element abdeckt, während die Deklaration innerhalb eines Komponentenselektors wie .card ihren Wert auf diese Komponente und ihre Nachfolger beschränkt. Der gleiche Name kann in verschiedenen Schichten unterschiedliche Werte haben, was die Mechanik hinter Themen, Dunkelmodus-Toggle und komponentenbezogenen Überschreibungen ermöglicht.
Warum führt CSS keine Fehlermeldung aus, wenn var() auf eine nicht definierte Custom-Property zeigt?

Die Spezifikation für CSS-Custom-Properties verlangt vom Browser, dass er schweigend zurückfällt, wenn eine verwendete Variable nicht deklariert wurde. Wenn var() kein Fallback-Argument hat, wird die gesamte Eigenschaft behandelt, als hätte sie den Wert unset, was oft dazu führt, dass das Element seine ursprüngliche oder vererbte Eigenschaft behält. Da kein Fehler in der Konsole angezeigt wird, sind ungedeclarierte Referenzen leicht zu verpassen, und ihre Aufdeckung bereits im Voraus verhindert feine visuelle Rückgänge.
Sind SCSS-Variablen und CSS-Custom-Properties dasselbe?

Sie haben eine ähnliche Rolle, leben jedoch in verschiedenen Phasen des Pipelines. SCSS-Variablen, geschrieben mit einem Dollarzeichen wie $color-primary, werden beim Kompilieren von SCSS zu CSS aufgelöst und verschwinden aus dem Endprodukt. CSS-Custom-Properties, die mit zwei Bindestrichen vorangestellt sind, überleben die Kompilierung und werden vom Browser bei der Rendervorstellung ausgewertet, was die Möglichkeit von Runtime-Themen und JavaScript-getriebenen Aktualisierungen ermöglicht.
Kann eine Custom-Property erneut deklariert werden und was passiert dann?

Ja. Wenn die gleiche Custom-Property mehrfach für das gleiche Element deklariert wird, entscheidet das normale CSS-Cascade, welche Deklaration gewinnt, wobei Spezifität, Quellreihenfolge und Wichtigkeit berücksichtigt werden. Innerhalb eines einzelnen Regels überwiegt die letzte Deklaration die früheren, was das gleiche Konfliktverhalten wie bei jeder anderen CSS-Eigenschaft darstellt.

Möchten Sie werbefrei genießen? Werde noch heute werbefrei



 Erweiterungen installieren

IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche

恵 Die Anzeigetafel ist eingetroffen!

Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!

ANZEIGE Entfernen?