Utilizzo del CSS
Consulta dimensioni e percentuale del CSS usato durante il controllo, per pagina e foglio di stile. Gli stili inutilizzati possono servire dopo un’interazione o in un’altra pagina.
Audit CSS online
Scopri quanto CSS carica la pagina, quali stili sono stati usati durante il controllo e dove si ripetono le regole. Colori, caratteri, livelli ed errori in un rapporto.
Formato del risultato
Il report mostra sorgenti, metriche e segnali CSS
Esamina dimensioni e utilizzo del CSS, poi colori, caratteri, livelli ed errori di validazione.
Dati illustrativi per spiegare il rapporto. I risultati della pagina appaiono dopo la scansione.
Mappa delle sorgenti dei fogli di stile
Confronta i fogli di stile esterni con gli stili incorporati nella pagina. Ogni fonte include dimensioni e quantità di codice usato o inutilizzato durante il controllo.
- Sorgente
- app.css
- Tipo
- esterni
- Utilizzo
- 48 KiB / 72 KiB
- Inutilizzato
- 72 KiB · 60%
- Sorgente
- components.css
- Tipo
- esterni
- Utilizzo
- 32 KiB / 8 KiB
- Inutilizzato
- 8 KiB · 20%
- Sorgente
- stili inline
- Tipo
- inline
- Utilizzo
- 6 KiB / 2 KiB
- Inutilizzato
- 2 KiB · 25%
Parti dalla sorgente del foglio di stile e da una dichiarazione ripetuta. Verifica se le ripetizioni appartengono allo stesso componente e allo stesso stato. Modifica la sorgente, poi confronta un nuovo report.
Cosa controlliamo
Un inventario CSS completo invece di consigli generici
Il rapporto riunisce fonti e dimensioni degli stili, utilizzo del codice, priorità dei selettori, dichiarazioni ripetute, valori di stile ed errori di validazione.
Dimensione e sorgenti
Raccogliamo la dimensione totale del CSS, il numero di sorgenti di fogli di stile e conteggi separati per fogli di stile inline ed esterni.
Specificità dei selettori
Confronta la specificità minima, media e massima dei selettori, che contribuisce alla priorità delle regole. I selettori più complessi sono elencati separatamente.
Dichiarazioni ripetute e !important
Consulta il numero di regole, selettori e dichiarazioni, le coppie proprietà-valore ripetute e gli esempi con !important.
Media query e prefissi
Mostriamo le media query più frequenti e contiamo le proprietà CSS con prefissi dei vendor: -webkit-, -moz-, -ms- e -o-.
Colori, font, z-index ed errori
Il report restituisce valori di colore unici, valori font-family rilevati, valori numerici di z-index ed esempi di errori di validazione CSS.
Come funziona
Dall'URL a un riepilogo CSS completo per la pagina
Inserisci l’URL della pagina. Milten la apre nel browser, raccoglie i fogli di stile e prepara il rapporto. Non richiede integrazione nella compilazione.
Carica la pagina e raccogli il CSS
Il report mostra l’URL controllato, la data e le sorgenti degli stili. Distingue gli stili incorporati nella pagina dai fogli di stile esterni.
Misuriamo l’uso del CSS e la priorità dei selettori
Consulta quanto CSS è stato usato, quante regole e dichiarazioni sono state trovate e quali selettori hanno la specificità più alta.
Costruisci tabelle per la revisione del CSS
Esamina dichiarazioni ripetute, !important, media query, prefissi dei browser, colori, caratteri, livelli ed errori CSS.
FAQ
Domande frequenti sull'audit CSS
Risposte su utilizzo del CSS, priorità dei selettori, !important, contenuti del rapporto e durata del controllo.
In che modo il CSS non utilizzato influisce sulla velocità?
Il browser scarica, elabora e applica il CSS prima di renderizzare la pagina. Più regole inutili ci sono, maggiore è il rischio di ritardi al primo rendering e più difficile è mantenere l'interfaccia.
Perché rivedere la specificità dei selettori?
La specificità aiuta a stabilire la priorità di un selettore quando le regole CSS sono in conflitto. I selettori molto specifici rendono più difficili le modifiche perché richiedono regole più forti per essere sovrascritti.
Bisogna rimuovere ogni dichiarazione !important?
No. !important cambia la priorità di una dichiarazione e può essere intenzionale. Il report indica dove approfondire. Esamina la cascata e gli stati del componente prima di sostituirlo.
Quali dati saranno nel report?
Il rapporto include URL e data, fonti e dimensioni degli stili, utilizzo del codice, selettori e specificità, dichiarazioni ripetute, !important, media query, prefissi dei browser, colori, caratteri, livelli ed errori CSS.
Quanto dura il controllo di una pagina?
Il controllo di una singola pagina richiede di solito meno di un minuto. La durata dipende dal numero di risorse, dalle condizioni di rete e da quanto tempo la pagina impiega a stabilizzarsi dopo il caricamento.
Servizi correlati
Cosa controllare dopo questo servizio
Verifica JavaScript
Verifica file JavaScript, errori di caricamento e codice inutilizzato durante il caricamento. Individua gli script da esaminare più a fondo.
ApriVerifica HTML
Individua errori HTML e strutture di pagina troppo complesse. Il report indica gli elementi interessati.
ApriValori di design
Raccogli colori, font, dimensioni e spaziature della pagina. Ottieni un elenco di valori per lavorare sul design.
ApriAccessibilità
Individua problemi di accessibilità con un controllo automatico. Ottieni consigli; una valutazione completa richiede anche verifiche manuali.
Apri