@charset CSS at-rule
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
charsetattribute of theContent-Type:HTTP header or the equivalent in the protocol used to serve the style sheet. - The
@charsetCSS declaration. - Use the character encoding defined by the referring document: the
charsetattribute of the<link>element. This method is obsolete and should not be used. - Assume that the document is UTF-8.
Syntax
@charset "UTF-8";
@charset "iso-8859-15";
Parameters
- charset
-
A
<string>denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the IANA-registry, and must be double-quoted, following exactly one space character (U+0020), and immediately terminated with a semicolon. If several names are associated with an encoding, only the one marked with preferred must be used.
Formal syntax
Note that the @charset rule is not parsed via syntax, but via a specific byte sequence of the following form:
@charset "<charset>";
Examples
Valid and invalid charset declarations
@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
@charset 'iso-8859-15'; /* Invalid, wrong quotes used */
@charset "UTF-8"; /* Invalid, more than one space */
@charset "UTF-8"; /* Invalid, there is a character (a space) before the declarations */
@charset UTF-8; /* Invalid, the charset is a CSS <string> and requires double-quotes */
Specifications
| Specification |
|---|
| CSS Syntax Module Level 3 # at-ruledef-charset |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
@charset
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
See also
- Character set glossary entry
- Unicode glossary entry