Web/CSS/@charset

The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the <style> element where the character set of the HTML page is relevant.

@charset "utf-8";

This at-rule is useful when using non-ASCII characters in some CSS properties, like content.

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 at-rule.
Use the character encoding defined by the referring document: the charset attribute of the <link> element. This method is obsoleted in HTML5 and must not be used.
Assume that the document is UTF-8

Syntax

@charset "UTF-8";
@charset "iso-8859-15";

where:

charset: Is 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

@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 quoting style used */
@charset  "UTF-8";      /* Invalid, more than one space */
 @charset "UTF-8";      /* Invalid, there is a character (a space) before the at-rule */
@charset UTF-8;         /* Invalid, without ' or ", the charset is not a CSS <string> */

Specifications

Specification	Status	Comment
CSS Level 2 (Revision 1)The definition of '@charset' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`@charset`	Chrome Full support 2	Edge Full support 12	Firefox Full support 1.5 Notes' Full support 1.5 Notes' Notes' Firefox 1 supported an invalid syntax where the character encoding is not between single or double quotes.	IE Full support 5.5 Notes' Full support 5.5 Notes' Notes' From Internet Explorer 5.5 to IE 7 (inclusive), Internet Explorer supported an invalid syntax where the character encoding is not between single or double quotes.	Opera Full support 9	Safari Full support 4	WebView Android Full support 2	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 4	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
See implementation notes.': See implementation notes.