character encoding - Why specify @charset "UTF-8"; in your CSS file?

Question

I've been seeing this instruction as the very first line of numerous CSS files that have been turned over to me:

@charset "UTF-8";

What does it do, and is this at-rule necessary?

Also, if I include this meta tag in my "head" element, would that eliminate the need to have it also present within my CSS files?

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

Answer 1

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 a?— 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:

1. HTTP Charset header.
2. Byte Order Mark.
3. The first @charset rule.
4. 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 @charset if 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.