Perché specificare @charset “UTF-8”; nel tuo file CSS?

173

Ho visto queste istruzioni come la prima riga di numerosi file CSS che mi sono stati consegnati:

@charset "UTF-8";

Cosa fa ed è necessaria questa regola?

Inoltre, se includo questo meta tag nel mio elemento "head", ciò eliminerebbe la necessità di averlo presente anche nei miei file CSS?

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

css character-encoding

— rsturim
fonte

123

Indica al browser di leggere il file CSS come UTF-8. Questo è utile se il tuo CSS contiene caratteri unicode e non solo ASCII.

Usarlo nel meta tag va bene, ma solo per le pagine che includono quel meta tag.

Leggi le regole per la risoluzione del set di caratteri dei file CSS nelle specifiche w3c per CSS 2.

— Oded
fonte

7

È anche importante se colleghi quei file da siti non UTF-8, come, diciamo: un sito web giapponese codificato come UTF-16 che prova a caricare CSS da un CDN otterrà contenuto illeggibile se il file CSS non dichiara il suo codificante.

— Paracetamolo,

147

Ciò è utile in contesti in cui la codifica non viene comunicata per intestazione HTTP o altri metadati, ad esempio il file system locale.

Immagina il seguente foglio di stile:

[rel="external"]::after
{
    content: ' ↗';
}

Se un lettore salva il file su un disco rigido e si omette la @charsetregola, la maggior parte dei browser lo leggerà nella codifica delle impostazioni locali del sistema operativo, ad esempio Windows-1252, e inserirà â † - anziché una freccia.

Sfortunatamente, non puoi fare affidamento su questo meccanismo in quanto il supporto è piuttosto ... raro. E ricorda che in rete un'intestazione HTTP avrà sempre la precedenza sulla @charsetregola.

Le regole corrette per determinare il set di caratteri di un foglio di stile sono in ordine di priorità:

Intestazione Charset HTTP.
Marchio ordine byte.
La prima @charsetregola
UTF-8.

L'ultima regola è il più debole, esso sarà fallire in alcuni browser.
L' charsetattributo in <link rel='stylesheet' charset='utf-8'>è obsoleto in HTML 5 .
Fai attenzione ai conflitti tra le diverse dichiarazioni. Non sono facili da eseguire il debug.

Lettura consigliata

Russ Rolfe: Dichiarazione di codifiche di caratteri in CSS
IANA: nomi ufficiali per set di caratteri - altri nomi non sono ammessi; utilizzare il nome preferito per @charsetse è stato registrato più di un nome per la stessa codifica.
MDN: @charset. C'è una tabella di supporto. Non mi fido di questo. :)
Caso di prova dal CSS WG.

— Fuxia
fonte

Vuoi dire che i file CSS devono essere serviti con content-type:text/css;charset=utf-8intestazione?

— Pacerier,

1

@Pacerier Sì, se questa è la codifica del file HTML (dovrebbe essere).

— fuxia,

Voglio dire, non è già implicito che senza un set di caratteri, il set di caratteri del file css debba essere interpretato come lo stesso del file HTML incorporato?

— Pacerier,

1

@Pacerier Ho osservato che non è sempre così.

— MatTheCat

3

Un motivo per includere sempre una specifica del set di caratteri in ogni pagina contenente testo è quello di evitare vulnerabilità di scripting tra siti. Nella maggior parte dei casi, il set di caratteri UTF-8 è la scelta migliore per il testo, comprese le pagine HTML.

— tony
fonte

2

Se stai inserendo un tag <meta> nei tuoi file css, stai facendo qualcosa di sbagliato. Il tag <meta> appartiene ai tuoi file html e dice al browser come è codificato l'html, non dice nulla sul CSS, che è un file separato. Potresti avere codifiche completamente diverse per il tuo html e css, anche se non riesco a immaginare che sarebbe una buona idea.

— WJS
fonte