Test results: CSS encoding detection

Summary & conclusions

See the results below for user agents tested. This section summarizes the results of those tests.

Of the user agents tested, only Firefox and IE8beta pass all tests.

IE7 doesn't recognise character encodings declared in either the HTTP header or the charset attribute of the link element.

Opera does not apply the encoding of the HTML file to the CSS in the absence of other cues to encoding, treating the CSS file as UTF-8. However, it doesn't default to UTF-8 or ISO Latin 1 if the encoding of the HTML is unknown. This means that you need to explicitly declare the encoding for CSS files if they contain characters beyond the Latin 1 range.

Safari appears, unusually, doesn't match any class in the HTML if @charset appears on the second line. It's not clear why.

The indications from the results are that if you have characters above the ASCII range in your CSS style sheet, you should either use the @charset rule, or use a byte-order mark at the beginning of a UTF-8 encoded file. Otherwise your style declarations may fail in one user agent or another.

Latest results

These are results for the latest versions of each browser tested. Green (yes) means the user agent passed the test; Red (no) means it did not.

UA	IE	Firefox	Opera	Safari	IE
version	7	3.0.1	9.51	3.1.2	8 Beta
OS	XP	XP	XP	XP	XP
date	20080808	20080808	20080808	20080808	20080808
1 HTTP	no 1	yes	yes	yes	yes
2 @charset	yes	yes	yes	yes	yes
3 link charset	no	yes	yes	yes	yes
4 inherited	yes	yes	no	yes	yes
5 default to UTF8	yes	yes	no	yes	yes
6 BOM	yes	yes	yes	yes	yes
7 BOM with @charset	yes	yes	yes	yes	yes
8 Non-initial @charset	yes	yes	yes	no	yes
9 HTTP vs @charset	no	yes	yes	yes	yes
10 @charset vs. link charset	yes	yes	yes	yes	yes