Input
Utilità per sviluppatori
Formattatore CSS
Abbellisci o minimizza CSS senza caricare il codice. Ispeziona regole, selettori e dichiarazioni, controlla avvisi sintattici di base e prova il risultato in un’anteprima isolata.
Dimensione
Regole
Selettori
Dichiarazioni
Output
CSS formattato o minimizzato
Avvisi di convalida
Problemi e avvisi CSS
Struttura
Riepilogo di selettori e dichiarazioni
| # | Selettore / regola @ | Dichiarazioni | Proprietà |
|---|
Anteprima isolata
Esempio renderizzato con il tuo CSS
L’anteprima viene eseguita in un frame isolato con una politica di sicurezza restrittiva: gli stili non influenzano la pagina e le risorse remote sono bloccate.
Esempi
Esempi CSS comuni
Riferimento rapido CSS
| Concetto | Esempio | Note |
|---|---|---|
| Regola | .card { padding: 16px; } | Un selettore seguito da un blocco di dichiarazioni. |
| Dichiarazione | color: #333; | Una proprietà e un valore separati dai due punti. |
| Proprietà personalizzata | --accent: #16735f; | Variabile CSS riutilizzabile il cui nome inizia con due trattini. |
| Media query | @media (max-width: 640px) | Applica regole annidate quando una condizione è soddisfatta. |
| Fotogrammi chiave | @keyframes fade | Definisce le fasi di un’animazione CSS. |
Note su formattazione e convalida
Formattazione consapevole delle stringheStringhe tra virgolette, commenti e parentesi vengono riconosciuti prima di modificare gli spazi strutturali.
Minimizzazione conservativaRimuove gli spazi non necessari e conserva la spaziatura nelle funzioni come calc().
Convalida leggeraGli avvisi coprono delimitatori bilanciati, stringhe o commenti non chiusi e dichiarazioni senza due punti. Usa un parser o linter per la conformità completa.
Elaborazione localeIl CSS resta nel browser. Formattazione, statistiche, convalida e anteprima non caricano l’input.
Domande frequenti sul formattatore CSS
Questo formattatore CSS carica il mio codice?
No. Formattazione, minimizzazione, statistiche, avvisi e anteprima vengono eseguiti localmente nel browser.
Può sostituire un linter CSS completo?
No. Rileva problemi strutturali comuni, ma conformità, compatibilità e regole del progetto richiedono un parser o linter dedicato.
Minimizzare CSS può cambiarne il comportamento?
Il minimizzatore conserva stringhe, commenti richiesti e spazi nelle funzioni. Prova hack obsoleti o direttive di build prima della pubblicazione.
L’anteprima CSS è isolata dalla pagina?
Sì. Usa un iframe in sandbox e una politica di sicurezza restrittiva che blocca le risorse remote.