Summarized test results:
CSS3 Syntax, The input byte stream

Intended audience: users, XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who wants to know how character encoding detection works in current browsers for CSS style sheets.

Updated

These tests check whether user agents recognise character encoding declarations as described by the CSS Syntax Module Level 3. The test pages have HTML5 syntax and are served as text/html.

Note that these test results are for released versions of the browsers tested. Versions that are still in development may provide better support for these features. The tests do not use any vendor prefixes.

Results

The tables show results for tests run on the date shown. Above the tables are summaries of the results at that date. The table data may be more up-to-date than the summary. If the tables contain some incorrectly scored tests, or tests that relate to non-released versions of browsers, these are not included in the summary.

To see the test, click on the link in the left-most column. To see detailed results for a single test, click on the link in the right-most column.

Basic character encoding

Snapshot summary, 2014-02-15
Firefox 27.0, Opera 19.0.1326.56, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0,

All user agents supported encoding declarations using the UTF-8 BOM, HTTP, @charset, and a charset attribute on a link.

All browsers respect the rule that a CSS file with no encoding declaration assumes the encoding of the HTML file that called it. (This was not the case in earlier versions of Opera, Safari and Chrome.)

Assertion Firefox Chrome Safari Opera IE Detailed results
CSS with UTF-signature A UTF-8 signature at the beginning of a css style sheet sets the encoding for the style sheet to UTF-8.
HTTP declaration The HTTP header can set the character encoding of a style sheet.
@charset declaration (uppercase value) An @charset rule with an uppercase value sets the encoding of a css stylesheet.
@charset declaration (lowercase value) An @charset rule with a lowercase value sets the encoding of a css stylesheet.
link charset A charset attribute on the HTML link element sets the encoding of a css stylesheet.
inheritance from HTML encoding The user agent applies the encoding of the HTML file to a css stylesheet whose encoding is not otherwise declared.

CSS unknown encoding

Snapshot summary, 2014-02-15
Firefox 27.0, Opera 19.0.1326.56, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0,

IE9 ignored the stylesheet (per CSS 2.1). The other browsers tested and IE11 defaulted to the encoding of the HTML file, as expected for CSS Level 3.

Assertion Firefox Chrome Safari Opera IE Detailed results
unknown @charset value When a stylesheet has a @charset declaration with an unknown value, the stylesheet will be interpreted using the encoding of the calling document.

@charset typos

Snapshot summary, 2014-02-15
Firefox 27.0, Opera 19.0.1326.56, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0,

These tests are only valid if the @charset rule is recognized by the user agent. The result of that test (css-encoding-003) is shown in the 'Basic tests' table above. All browsers tested do support it.

Firefox, Chrome, Safari, IE and the new Opera ignored the @charset statement if it deviated in any way from @charset "<encoding_name>";, or didn't appear at the very start of the style sheet.

(The pre-blink version of Opera, ignored several typos, accepting the encoding information when it shouldn't. That version of Opera ignored the @charset information, however, if there was any whitespace before it (as did Firefox, Chrome and Safari).)

Assertion Firefox Chrome Safari Opera IE Detailed results
no semicolon at end of charset rule If a @charset declaration is missing a final semicolon, the encoding declaration will not be recognised.
extra spaces after @charset If a @charset declaration has more than one space after 'charset', the encoding declaration will not be recognised.
extra spaces before semicolon in charset rule If a @charset declaration has a space just before the semicolon, the encoding declaration will not be recognised.
linebreak in middle of charset rule If a @charset declaration has a line break in the middle, the encoding declaration will not be recognised.
single quotes around charset name If a @charset declaration value has single, rather than double, quotes around it, the encoding declaration will not be recognised.
blank line before @charset If a @charset declaration is not on the first line of the file, the encoding declaration will not be recognised.
blank spaces before @charset If a @charset declaration does not start at the beginning of the first line of the file (when there is no BOM), the encoding declaration will not be recognised.
@charset declaration (uppercase) If a @charset declaration is written in uppercase (@CHARSET), the encoding declaration will not be recognised.

Character encoding precedence

Snapshot summary, 2014-02-15
Firefox 27.0, Opera 19.0.1326.56, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0,

These tests are only valid if the relevant HTTP declarations, BOM, @charset rules and charset links have been shown to have an effect. The results for those tests are shown in the 'Basic tests' table, above. All of the ways of expressing the character encoding are recognised by all of the browsers tested.

All browsers except IE treated the style sheet as UTF-8 if a BOM was present, regardless of any other character encoding information.

IE gives the HTTP header higher precedence than the BOM, and if there is a BOM and a conflicting @charset then the @charset wins (per CSS 2.1).

All browsers used the HTTP header information when it conflicted with an @charset declaration or a charset attribute value in the link element that calls the stylesheet.

All browsers gave higher precedence to an @charset declaration than to a charset attribute value on the link element in HTML that called the stylesheet.

Assertion Firefox Chrome Safari Opera IE Detailed results
http vs. bom A UTF-8 signature overrides an HTTP encoding declaration for a stylesheet .
css bom and @charset iso15 When a stylesheet has a BOM and a @charset declaration that is not for a Unicode encoding, the BOM takes precedence.
http vs. @charset An HTTP encoding declaration for a stylesheet takes precedence over an @charset declaration.
http vs. charset link An HTTP encoding declaration for a stylesheet takes precedence over a charset attribute in the link element.
@charset vs. link charset An @charset encoding declaration for a stylesheet takes precedence over a charset attribute in a link element.