CSS
Raccogli gli stili dalle pagine
Inserisci un URL. Milten legge i fogli di stile disponibili e raggruppa colori, caratteri, dimensioni, spaziature, raggi degli angoli, ombre e proprietà personalizzate ricorrenti.
Colori, caratteri e spaziature del sito
Raccogli colori, caratteri e spaziature della pagina in un rapporto. Trova valori ripetuti e differenze per uniformare il design.
Come funziona lo scanner
Dalle sorgenti CSS a un riepilogo di frequenza dei valori
Frequenza
Raggruppa i valori ripetuti
Il report conta quante volte compaiono colori, font, dimensioni, spaziature, border-radius, box-shadow e variabili CSS identici. Più un valore si ripete, più sembra un token di sistema.
Riepilogo
Mostra concentrazione e diffusione
Il riepilogo ti aiuta a vedere rapidamente dove i valori si ripetono in modo coerente e dove l'interfaccia ha accumulato un'ampia varietà di colori, dimensioni, font o ombre.
Lettura
Aiuta a scegliere cosa rivedere prima
Confronta colori, dimensioni dei caratteri e spaziature ripetute con il loro ruolo nei componenti. Valori simili possono essere intenzionali. Il riepilogo CSS aiuta a pianificare i token, ma non genera un design system completo né assegna nomi semantici.
Cosa contiene il report
Sette gruppi di valori di stile
Colori
Colori ripetuti
Lo scanner mostra i valori di colore e i relativi conteggi di utilizzo, così puoi distinguere i colori di sistema dalle sfumature locali accidentali.
valoreutilizzi
Font
Font e dimensioni del testo
Il report include i valori font-family rilevati, la loro frequenza di comparsa e i valori font-size ripetuti.
font-familyfont-size
Spaziatura / dimensione
Dimensioni, margin, padding, width e height
Il riepilogo evidenzia i valori di dimensione e spaziatura usati più spesso. Un'ampia varietà in questo ambito di solito indica una scarsa coerenza della griglia.
pxrem
Raggio / ombre
Raggi e ombre
Gruppi separati mostrano valori ripetuti di border-radius e box-shadow, inclusi i casi in cui un valore compare più spesso degli altri.
raggioombra
Variabili CSS
Proprietà personalizzate rilevate
Lo scanner mostra le proprietà personalizzate CSS e i relativi conteggi di utilizzo, così puoi vedere quali variabili funzionano già come token.
--varutilizzi
FAQ
Domande frequenti sullo scanner dei token CSS
Risposte brevi su quali valori entrano nel report e su come leggere il riepilogo delle frequenze.
In cosa lo scanner dei token CSS è diverso dall'esportazione delle variabili CSS?
Sembra più ampio: oltre alle proprietà personalizzate, il report mostra colori, font, valori di font-size, dimensioni, spaziature, border-radius e box-shadow ripetuti. La frequenza d'uso conta per ogni valore.
Posso analizzare un sito senza accesso al repository?
Sì. La prima analisi può essere eseguita sulle pagine pubbliche e sugli stili collegati. Se parte del CSS è dietro autenticazione o non viene caricato nella pagina, non entrerà nel riepilogo.
Il report mostra conflitti tra token?
Il rapporto mostra i valori ripetuti e la loro distribuzione. Non determina conflitti semantici né propone nomi per i token. Il tuo team decide come organizzarli.
Lo scanner è utile se i token esistono già?
Sì. Il report mostra quali variabili CSS sono state trovate e con quale frequenza vengono usate, oltre a dove esistono ancora valori grezzi ripetuti nelle vicinanze: colori, dimensioni, spaziature o ombre.
Come devo interpretare i valori vuoti o rari?
Un valore raro può appartenere a uno stato o a un componente importante. Verifica dove viene usato prima di unirlo ad altri o eliminarlo. La frequenza aiuta a stabilire le priorità di analisi, ma non decide quali valori debbano diventare un unico token.
Servizi correlati
Cosa controllare dopo questo servizio
Audit CSS
Individua fogli di stile pesanti, duplicati e stili inutilizzati durante il caricamento. Questi stili possono servire su altre pagine o dopo azioni dell’utente.
ApriVerifica HTML
Individua errori HTML e strutture di pagina troppo complesse. Il report indica gli elementi interessati.
ApriAccessibilità
Individua problemi di accessibilità con un controllo automatico. Ottieni consigli; una valutazione completa richiede anche verifiche manuali.
ApriVerifica JavaScript
Verifica file JavaScript, errori di caricamento e codice inutilizzato durante il caricamento. Individua gli script da esaminare più a fondo.
Apri