@charset
The @charset CSS rule specifies the character encoding used in the style sheet. This syntax is useful when using non-ASCII characters in some CSS properties, like content. Although the first character in @charset is the @ symbol, it is not an at-rule. It is a specific byte sequence that can only be placed at the very beginning of a stylesheet. No other characters, except the Unicode byte-order mark, are allowed before it. It also does not follow normal CSS syntax rules such as use of quotes or whitespace.
If a @charset is not recognized as the charset declaration, it is parsed as a normal at-rule. The CSS syntax module deprecates this fallback behavior, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked.
As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result):
The value of the Unicode byte-order character placed at the beginning of the file.
The value given by the charset attribute of the Content-Type: HTTP header or the equivalent in the protocol used to serve the style sheet.
The @charset CSS declaration.
Use the character encoding defined by the referring document: the charset attribute of the <link> element. This method is obsolete and should not be used.
Assume that the document is UTF-8.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 1.5 | 4 | 18 | 4 | |
- Firefox 1 supported an invalid syntax where the character encoding is not between single or double quotes.
Syntax
@charset "UTF-8";
body {
font-family: sans-serif;
}Live demo
Use cases
-
Using @charset
The @charset CSS rule specifies the character encoding used in the style sheet.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.