1

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.

zneak
  • 134,922
  • 42
  • 253
  • 328
  • Related: [Why specify @charset “UTF-8” in your css file](http://stackoverflow.com/questions/2526033/why-specify-charset-utf-8-in-your-css-file) – Wesley Murch Mar 12 '12 at 03:28
  • @Madmartigan, I didn't know about `@charset`. It's pretty much what I was looking for. – zneak Mar 12 '12 at 03:31
  • 1
    I'm pretty sure that it's useless unless you want something other than whatever the default/current charset is, or are just paranoid [citation needed]. – Wesley Murch Mar 12 '12 at 03:32

1 Answers1

3

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.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228