183

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

4 Answers 4

152

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

4
  • Do you mean css files need to be served with content-type:text/css;charset=utf-8 header?
    – Pacerier
    Jul 13, 2012 at 3:35
  • 1
    @Pacerier Yes, if that is the encoding of the HTML file (it should be).
    – fuxia
    Jul 13, 2012 at 3:37
  • I mean isn't it already implied that without a charset, the charset of the css file should be interpreted as the same as that of the embedding HTML file?
    – Pacerier
    Jul 13, 2012 at 4:01
  • 1
    @Pacerier I observed this isn't always the case.
    – MatTheCat
    Dec 8, 2017 at 9:28
130

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.

1
  • 8
    It is also important if you link those files from non-UTF-8-sites, like, say: a japanese website encoded as UTF-16 trying to load CSS from a CDN will get unreadable content if the CSS file doesn't declare its encoding. May 24, 2016 at 11:05
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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.