Che cos'è il formato di file CSS?
I file .css sono utilizzati per formattare i contenuti e descrivere la presentazione di un sito web.
I file con l'estensione .css contengono regole che definiscono come gli elementi .html debbano essere visualizzati su una determinata pagina. Queste regole coprono aree quali:
- impostazioni dei caratteri (tipo di carattere, dimensione, colore e stile),
- interlinea e rientro,
- regole di layout per elementi incorporati e posizionati,
- riferimenti a risorse, animazioni e breakpoint responsivi tramite query
@media.
Il CSS - Cascading Style Sheets - è il linguaggio di stile utilizzato per creare i file .css. È stato progettato per consentire la separazione del contenuto del sito web dalla sua presentazione, rendendo molto più semplice modificare l'aspetto di un sito senza influenzarne il contenuto. I file .css consentono inoltre alle pagine di essere renderizzate in modo diverso a seconda del dispositivo utilizzato per accedervi - che si tratti di un dispositivo mobile, un PC desktop o un tablet - per una migliore esperienza utente. La parte «a cascata» significa che più regole possono colpire lo stesso elemento simultaneamente, con la specificità e l'ordine di origine che risolvono quale regola prevalga.
Il CSS non è un formato a versione singola: a partire dal CSS3 si è sviluppato come moduli indipendenti (Selectors, Flexbox, Grid, Color, Animations e altri), ognuno dei quali avanza al proprio ritmo. I preprocessori come .scss e .less estendono la sintassi di scrittura del CSS, ma vengono sempre compilati in semplice .css che i browser consumano direttamente.
I file .css memorizzano i dati in formato testo semplice e possono quindi essere modificati utilizzando qualsiasi editor di testo. Si raccomanda, tuttavia, che i file .css vengano modificati utilizzando strumenti dedicati per evitare potenziali errori - tali strumenti evidenziano automaticamente le parole chiave, correggono gli errori di sintassi e offrono funzioni di completamento automatico. Un file .css non trasporta alcuna firma binaria; può opzionalmente iniziare con una dichiarazione @charset, una regola @import o un /* commento */.
Sicurezza e incolumità
RISCHIO: LOWIl CSS è testo semplice e non esegue codice, quindi un file .css è a basso rischio da aprire. Casi limite: storicamente il CSS poteva caricare risorse remote (caratteri/immagini) e i browser più vecchi avevano peculiarità di CSS expression()/behavior (da tempo deprecate); il CSS moderno non può eseguire script. La vera cautela è scaricare software «editor/visualizzatore CSS gratuito» da portali pieni di pubblicità che raggruppano PUP - usa gli editor affidabili elencati sopra.
Dettagli del formato
in sintesiProgrammi che aprono file CSS
Windows4 apps
Sublime Text
A pagamento Apri per modificare; gratuito per la valutazione, licenza per l'uso continuato. 
Visual Studio Code
Gratuito Apri il .css per modificarlo con evidenziazione della sintassi, IntelliSense ed estensioni di anteprima dal vivo. 
Web browser (Chrome/Firefox/Edge)
Gratuito I browser applicano il CSS automaticamente al caricamento di una pagina; usa i DevTools (F12) per ispezionare/modificare gli stili dal vivo. 
macOS2 apps
TextEdit
Integrato Apri in modalità testo semplice per leggere/modificare; disattiva prima il rich text.
Visual Studio Code
Gratuito Apri il .css per modificarlo con evidenziazione della sintassi, IntelliSense ed estensioni di anteprima dal vivo. 
Linux1 app
VS Code / gedit / GNU Emacs
Gratuito Apri il .css in qualsiasi editor di testo/codice per visualizzarlo o modificarlo.
CodePen / JSFiddle
Gratuito Incolla il CSS in un playground online per modificarlo e visualizzarne l'anteprima rispetto all'HTML in tempo reale. Dettagli tecnici
specifiche approfondite| Tipo MIME | text/css |
| Codifica del file | Testo semplice, UTF-8 per impostazione predefinita; il set di caratteri può essere dichiarato esplicitamente con una regola `@charset` all'inizio del file |
| Firma binaria | Nessuna - i file `.css` non hanno magic bytes; l'identificazione si basa sull'estensione del file o sul tipo MIME |
| Dimensione tipica del file | Da 1 KB a 500 KB; i pacchetti di framework di terze parti minificati (Bootstrap, Tailwind) possono raggiungere il limite superiore |
| Struttura principale | Set di regole: un selettore o un elenco di selettori seguito da un blocco di dichiarazione di coppie `proprietà: valore` racchiuse tra parentesi graffe |
| At-rules | `@media` (breakpoint responsivi), `@import`, `@font-face`, `@keyframes`, `@supports` e `@layer` controllano il caricamento condizionale, i caratteri personalizzati, le animazioni e il rilevamento delle funzionalità |
| Algoritmo a cascata | Le regole in conflitto vengono risolte in base alla specificità, all'origine della cascata (autore / utente / browser) e all'ordine di origine; i valori si propagano agli elementi figli tramite l'ereditarietà |
| Modello di versionamento | Modulare a partire da CSS3; i singoli moduli come Selectors, Flexbox, Grid e Color avanzano indipendentemente attraverso le fasi di Candidate Recommendation del W3C |
| Proprietà personalizzate | Variabili CSS native dichiarate come `--nome: valore` e consumate tramite `var(--nome)`, consentendo token di design riutilizzabili senza un preprocessore |
| Interoperabilità preprocessori | I file `.scss`, `.sass` e `.less` vengono compilati in semplice `.css`; PostCSS trasforma il sorgente `.css` al momento della build; i browser consumano solo il `.css` finale |
| Compressione del trasferimento | Comunemente servito compresso con gzip o Brotli su HTTP per il risparmio di banda; il file è testo semplice non compresso su disco |
| Integrità delle sottorisorse | Un hash SHA-256/384/512 può essere inserito nell'attributo HTML `<link integrity="…">` per verificare il file recuperato; nessun hash è memorizzato all'interno del file `.css` stesso |
| Prefissi dei fornitori | I prefissi `-webkit-`, `-moz-` e `-ms-` proteggevano storicamente le proprietà sperimentali; la maggior parte è ora obsoleta poiché le proprietà sottostanti sono state standardizzate |
| Modello a oggetti del browser | Analizzato dal motore del browser nel CSSOM (CSS Object Model), che viene combinato con l'albero DOM per calcolare gli stili finali e visualizzare la pagina |
| Manutentore dello standard | W3C CSS Working Group; le specifiche sono pubblicate come documenti di moduli indipendenti, ciascuno con le proprie bozze dell'editor e Candidate Recommendations |
| Rilasciato | CSS Level 1, December 1996 (W3C Recommendation) |
| Ultima versione | CSS is now modular (CSS3+); modules like Selectors, Flexbox, Grid, Color advance independently |
| Standard aperto | Sì · royalty-free |
| Specifica | www.w3.org |
Conversioni CSS
Domande e risposte della community
chiesto dagli utentiAncora nessuna domanda - sii il primo a chiedere informazioni sui file CSS.
