Online Tool Store
Estrattore di Variabili CSS
Incolla il CSS ed estrai ogni variabile: ridefinizioni in conflitto, variabili inutilizzate o indefinite rilevate. Esporta come :root, JSON o lista var().
🔒 Questo strumento funziona interamente nel tuo browser. I tuoi file non vengono mai caricati su un server.
Strumento browser
Estrattore di Variabili CSS
Come funziona
- Parti dall'esempio già caricato oppure incolla il tuo CSS.
- Controlla il riepilogo — ogni variabile trovata, le ridefinizioni con valori in conflitto e le variabili inutilizzate o indefinite.
- Consulta la tabella completa con selettore, valore e tipo dedotto (colore, lunghezza, font, ecc.) di ogni variabile.
- Scegli un formato di esportazione — un blocco :root pulito, JSON o una lista var() — poi copia o scarica.
FAQ
Funziona nel mio browser?
Sì. Il tuo CSS viene elaborato localmente nella pagina — non viene caricato nulla e non serve un account.
Cosa conta come variabile ridefinita?
Una proprietà personalizzata dichiarata più di una volta con valori diversi — solitamente un valore predefinito in :root più un override sotto una media query in modalità scura o una classe tema. Ogni occorrenza viene mostrata con selettore e numero di riga, così vedi esattamente dove i valori divergono, invece di tenere silenziosamente solo il primo.
Cosa significano "inutilizzata" o "indefinita" qui?
Inutilizzata significa che una variabile è dichiarata con -- ma non viene mai richiamata tramite var(). Indefinita è il contrario — qualcosa chiama var(--nome) ma --nome non è mai dichiarata nel CSS incollato. Entrambi sono residui comuni dopo un refactoring, e i riferimenti indefiniti sono quelli che vale davvero la pena correggere, perché il browser torna silenziosamente al valore iniziale della proprietà.
Gestisce il CSS dentro @media o altri blocchi annidati?
Sì. Un blocco :root annidato dentro @media (prefers-color-scheme: dark) o una regola simile viene attribuito correttamente a :root, non al wrapper @media.
Posso usare i dati di esempio?
Sì. Il widget si carica con un esempio che include intenzionalmente una ridefinizione in dark mode, una variabile inutilizzata e un riferimento indefinito, così vedi tutti e tre i controlli in azione prima di incollare il tuo CSS.
Quali formati di esportazione sono disponibili?
Un blocco :root {} pulito, una mappa di token JSON piatta o un semplice elenco di riferimenti var(--nome) — copia o scarica quello adatto alla tua destinazione.
In che formato devo incollare il mio CSS?
Incolla le tue proprietà personalizzate CSS una dichiarazione per riga, come apparirebbero in un blocco :root, ad esempio `--brand: #0f766e;`. Ogni riga diventa una riga nell'elenco estratto.
C'è un limite alla quantità di CSS che posso incollare?
Nessun limite fisso — tutto viene eseguito localmente nel tuo browser, quindi la velocità di estrazione dipende solo dal tuo dispositivo, non da un server.
Come ci confrontiamo
| Funzione | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Trova variabili sotto qualsiasi selettore, non solo :root | ✓ | ✓ | Viene controllato solo :root |
| Segnala ridefinizioni in conflitto mostrando ogni occorrenza | ✓ | Non mostrato | Mantiene silenziosamente solo la prima — override mancante non rilevato |
| Segnala variabili inutilizzate e riferimenti var() indefiniti | ✓ | Non mostrato | Non mostrato, nonostante dichiari di controllare l'utilizzo |
| :root dentro @media risolto al vero selettore | ✓ | Non applicabile — output solo :root | Non mostrato |
| Esporta come blocco :root, JSON o lista var() | ✓ | ✓ | Solo elenco semplice |
Ogni file CSS reale che merita un controllo ha un override in dark mode o un token inutilizzato dimenticato — esattamente il caso che un estrattore basato solo sul nome non coglie, e dove questo è stato verificato direttamente contro di loro.