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

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">

Solution 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 ↗ 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.

Solution 2:

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.

Solution 3:

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.

Solution 4:

If you're putting a <meta> tag in your css files, you're doing something wrong. The <meta> tag belongs in your html files, and tells the browser how the html is encoded, it doesn't say anything about the css, which is a separate file. You could conceivably have completely different encodings for your html and css, although I can't imagine this would be a good idea.