Proprietà CSS @charset

La regola at @charset dichiara la codifica dei caratteri utilizzata in un foglio di stile esterno. La codifica dei caratteri mappa i byte grezzi di un file in caratteri leggibili, quindi il browser deve sapere quale codifica usa un foglio di stile prima di poter interpretare correttamente il testo non ASCII — lettere accentate, simboli valutari, emoji o contenuto all'interno delle dichiarazioni content: "…".

Questa pagina tratta quando @charset è effettivamente applicabile, le rigide regole di sintassi che lo rendono facile sbagliare, come il browser decide quale codifica prevale e le insidie comuni da evitare.

Quando si applica @charset?

@charset è strettamente pensato per i fogli di stile esterni (un file .css separato collegato tramite <link> o importato con @import). Viene ignorato quando:

• Appare all'interno di un blocco HTML <style>.
• Appare all'interno di un attributo style inline.
• Non è la prima cosa nel file.

In un documento HTML, la codifica si imposta con il tag <meta charset>, non con @charset.

In pratica raramente si ha bisogno di @charset: se si salva il foglio di stile in UTF-8 (il formato predefinito per quasi tutti gli editor e la codifica consigliata per il web), il browser la rileverà solitamente in modo corretto. @charset è più utile per i fogli di stile legacy salvati in codifiche non UTF-8, o come salvaguardia esplicita.

Sintassi

@charset "encoding";

La regola accetta un singolo string che indica una codifica del registro IANA, come "UTF-8" o "iso-8859-15".

La sintassi è insolitamente rigida — @charset non è una normale regola at e non rispetta la solita flessibilità del CSS riguardo agli spazi e ai commenti:

• Deve essere il primo byte del foglio di stile. Nessun carattere, commento o spazio può precederlo.
• La codifica deve essere racchiusa tra virgolette doppie.
• Deve esserci esattamente uno spazio tra @charset e la virgoletta di apertura.
• La riga deve terminare con un punto e virgola.

@charset "UTF-8"; /* Set the stylesheet encoding to Unicode UTF-8 */

Utilizzo valido e non valido

A causa delle rigide regole sopra, piccole differenze di formattazione rendono la regola valida o ignorata:

@charset "UTF-8";        /* Valid: standard form */
@charset "ISO-8859-15";  /* Valid: any registered encoding name */
 @charset "UTF-8";       /* Invalid: a space precedes the at-rule */
@charset 'UTF-8';        /* Invalid: single quotes are not allowed */
@charset  "UTF-8";       /* Invalid: more than one space after @charset */
@charset "UTF-8"         /* Invalid: missing the closing semicolon */
@charset UTF-8;          /* Invalid: the value must be quoted */

Quando @charset non è valido o viene ignorato, il browser non genera un errore — ricade semplicemente sulla successiva fonte di codifica che riesce a trovare.

Come il browser sceglie la codifica

@charset è solo uno dei diversi segnali disponibili e ha una priorità fissa. Il browser utilizza la prima fonte che trova, in questo ordine:

1. Un byte order mark (BOM) all'inizio del file.
2. Il parametro charset dell'intestazione di risposta HTTP Content-Type (ad es. text/css; charset=utf-8).
3. La regola at @charset.
4. L'attributo charset sull'elemento <link> che ha caricato il foglio di stile (deprecato).
5. La codifica del documento di riferimento.
6. Un fallback a UTF-8.

Poiché un'intestazione Content-Type inviata dal server ha la precedenza su @charset, un server mal configurato può sovrascrivere la codifica dichiarata. Questo è uno dei motivi per cui impostare la codifica a livello HTTP (o semplicemente usare UTF-8 ovunque) è l'approccio più affidabile.

Valori

@charset accetta un singolo string tra virgolette che indica la codifica dei caratteri, ad esempio "UTF-8" o "iso-8859-1". Non accetta le parole chiave initial o inherit — quelle si applicano alle proprietà CSS, mentre @charset è una regola at, non una proprietà.

Regole at correlate

• @import — importa un foglio di stile in un altro. Se utilizzate, le regole @import devono venire subito dopo qualsiasi @charset.
• @media — applica stili in modo condizionale in base alle caratteristiche del supporto.
• @font-face — carica e assegna un nome ai font web personalizzati.

Esercitazione