# Verificatore CSS Inline

https://rankproof.eu/it/tools/seo-inline-css

## 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.

## Come funziona

1. Inserisci l'URL di una pagina o incolla il suo HTML
2. Recuperiamo l'HTML della pagina e analizziamo ogni <elemento style="">
3. Contiamo gli attributi style inline separatamente dai blocchi `<style>` inline
4. Restituiamo la dimensione totale del CSS inline, fino a 8 elementi di esempio e consigli di refactoring

## Esempio di input e output

INPUT

```text
url: https://rankproof.eu/tools
```

OUTPUT

```text
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">
```

## 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.

## 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.

## Strumenti correlati in Analisi SEO

- [Verificatore di title e meta description](https://rankproof.eu/it/tools/seo-meta-title)
- [Controllo tag di intestazione](https://rankproof.eu/it/tools/seo-heading-tags)
- [Verificatore Alt Text Immagini](https://rankproof.eu/it/tools/seo-image-alt)
- [Verificatore URL Canonical](https://rankproof.eu/it/tools/seo-canonical-url)
- [Analizzatore Robots.txt](https://rankproof.eu/it/tools/seo-robots-txt)
- [Generatore di Robots.txt](https://rankproof.eu/it/tools/seo-robots-txt-generator)