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">
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:
@charset
rule.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.
@charset
if more than one name is registered for the same encoding.@charset
. There is a support table. I do not trust this. :)