Question

My stylesheets contain CSS code similar to the following:

#nav > li::after {
    content: " ➻";
}

You may notice that ➻ is not an ASCII character, and therefore it’s “dangerous” to include it in a file without specifying a charset.

For now things have been smooth and I’ve never run into encoding issues with CSS stylesheets (mostly because user agents are getting better at guessing “UTF-8”), but I was wondering if there was a right way to explicitly specify it.

I’ve tried this:

<link rel="stylesheet" type="text/css; charset=UTF-8" href="foo.css"/>

But it doesn’t seem to do anything, as I tried to specify a bogus encoding and it still displayed correctly.

Answer 1

Found that citation that I needed:

http://www.w3.org/TR/CSS2/syndata.html#charset

When a style sheet resides in a separate file, user agents must
observe the following priorities when determining a style sheet’s
character encoding (from highest priority to lowest):

1. An HTTP “charset” parameter in a “Content-Type” field (or similar parameters in other protocols)
2. BOM and/or @charset (see below)
3. or other metadata from the linking mechanism (if any)
4. charset of referring style sheet or document (if any)
5. Assume UTF-8

So, although @charset "UTF-8"; is relevant, HTTP headers override it. You can specify the charset in a meta tag of your HTML document with <meta charset="utf-8">, which will satisfy #4, and user agents are supposed to fall back to UTF-8 anyways.

With some of these “glyphs”, it’s important that the end user has at least one font installed that supports it, so keep that in mind while writing your CSS. Not all fonts support all unicode characters.