Verificatore CSS Inline
Risposta breve
Individua il CSS inline eccessivo che potrebbe influire sulle prestazioni e sulla manutenibilità.
Cosa fa
Trova ogni attributo style="" inline e blocco <style> della tua pagina. Riporta quanti ce ne sono e la loro dimensione totale, mostra fino a 8 elementi di esempio con il loro CSS e suggerisce come spostare gli stili in un foglio di stile.
Perché è importante
Gli attributi style inline non possono essere messi in cache separatamente, sono difficili da mantenere e vengono bloccati da una Content-Security-Policy rigorosa a meno che tu non li consenta esplicitamente. L'eccezione è il CSS critico above-the-fold in un blocco <style>, che può aiutare il primo rendering.
Come funziona
-
Inserisci l'URL di una pagina o incolla il suo HTML
-
Recuperiamo l'HTML della pagina e analizziamo ogni <elemento style="">
-
Contiamo gli attributi style inline separatamente dai blocchi `<style>` inline
-
Restituiamo la dimensione totale del CSS inline, fino a 8 elementi di esempio e consigli di refactoring
Esempio di input e output
url: https://rankproof.eu/tools
attributi style="" inline: 3 OK blocchi <style> inline: 1 OK CSS inline totale: 4.2 KB <div style="margin-top:12px"> <span style="color:#0EA5A4"> <p class="note" style="font-size:14px">
Chi lo usa
-
Sviluppatore frontend
Verifica un sito legacy per pulire gli stili inline: estrai i pattern in classi di utilità per abilitare una cache corretta.
-
Ingegnere della sicurezza
Verifica prima del deployment della CSP: ogni `style=""` inline blocca la policy `style-src 'self'`. Estraili per abilitare una CSP rigorosa.
-
Ingegnere delle performance
Il CSS inline aggiunge byte a ogni risposta HTML. Sposta i pattern ripetuti in un foglio di stile in cache: un vantaggio a ogni caricamento di pagina successivo.
Domande frequenti
Il CSS inline è negativo per la SEO?
Non direttamente. Rende le pagine più pesanti e difficili da mantenere, e ostacola una Content-Security-Policy rigorosa.
Quando il CSS inline è appropriato?
Gli stili critici above-the-fold in tag `<style>` (non attributi `style=""`), e i valori dinamici per componente che variano realmente a runtime.
Come posso rifattorizzare gli stili inline?
Identifica i pattern ripetuti → estraili in classi di utilità → aggiungili al tuo foglio di stile → sostituisci `style=""` inline con `class=""`.
Questo rompe la CSP?
Sì: una CSP rigorosa (`style-src 'self'`) blocca `style=""` inline. Servirebbe `'unsafe-inline'` o `'unsafe-hashes'` per consentirlo.
E i framework CSS-in-JS?
Molti aggiungono tag <style> o attributi style mentre la pagina è in esecuzione, cosa che questo strumento non vede perché legge l'HTML così come viene consegnato. La maggior parte può estrarre il CSS statico in fase di build, che è la scelta migliore per la produzione.