Why specify @charset "UTF-8"; in your CSS file?
One reason to always include a character set specification on every page containing text is to avoid cross site scripting vulnerabilities. In most cases the UTF-8 character set is the best choice for text, including HTML pages.
This is useful in contexts where the encoding is not told per HTTP header or other meta data, e.g. the local file system.
Imagine the following stylesheet:
[rel="external"]::after
{
content: ' ↗';
}
If a reader saves the file to a hard drive and you omit the @charset rule, most browsers will read it in the OS’ locale encoding, e.g. Windows-1252, and insert ↗ instead of an arrow.
Unfortunately, you cannot rely on this mechanism as the support is rather … rare.
And remember that on the net an HTTP header will always override the @charset rule.
The correct rules to determine the character set of a stylesheet are in order of priority:
- HTTP Charset header.
- Byte Order Mark.
- The first
@charsetrule. - UTF-8.
The last rule is the weakest, it will fail in some browsers.
The charset attribute in <link rel='stylesheet' charset='utf-8'> is obsolete in HTML 5.
Watch out for conflict between the different declarations. They are not easy to debug.
Recommended reading
- Russ Rolfe: Declaring character encodings in CSS
- IANA: Official names for character sets – other names are not allowed; use the preferred name for
@charsetif more than one name is registered for the same encoding. - MDN:
@charset. There is a support table. I do not trust this. :) - Test case from the CSS WG.
It tells the browser to read the css file as UTF-8. This is handy if your CSS contains unicode characters and not only ASCII.
Using it in the meta tag is fine, but only for pages that include that meta tag.
Read about the rules for character set resolution of CSS files at the w3c spec for CSS 2.