La codifica UTF-8 trova la sua applicazione nei CSS attraverso la regola @charset. Questa regola funziona esattamente come l'analogo metatag HTML: istruisce il browser ad interpretare una sequenza di caratteri nella codifica specificata. Si tratta di un aspetto fondamentale dell'internazionalizzazione dei CSS, su cui il W3C ha puntato molto. In sintesi, si deve poter dare agli autori che usano un alfabeto diverso da quello occidentale la possibilità di usare nei selettori CSS e nel contenuto generato i caratteri propri del loro alfabeto. Di seguito daremo un esempio in cinese con la parola "test" (tradotta in cinese semplificato usando Google Translate).
È bene ricordare che quando si salvano questi documenti (HTML e CSS) con il proprio editor, la codifica di base deve essere UTF-8. In caso contrario, si potrebbero verificare dei problemi di visualizzazione.
Partiamo dal seguente codice HTML:
<div id="检测">检测</div>
L'ID dell'elemento è 检测, quindi dobbiamo usare tale parola nel nostro foglio di stile CSS, usando al contempo al regola @charset:
@charset 'utf-8';
#检测 {
background: #393;
padding: 1em;
width: 5em;
color: #fff;
font: 3em Arial, sans-serif;
margin: 2em auto;
text-align: center;
}
Il selettore di ID è, come previsto, #检测. Potete visionare l'esempio finale in questa pagina.