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 specification necessary?

Also, if I include this meta tag in my "head" tag 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

It tells the browser to read the css file as UTF-8. This is handy if you 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.

Answer 2

This is useful in contexts where the encoding is not told per 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 his 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 can’t 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.