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.
Example
@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */ @charset 'iso-8859-15'; /* Set the encoding of the style sheet to Latin-9 (Western European languages, with euro sign) */ @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 <a href="css/string" title="The <string> CSS data type represents a string. It is formed by a Unicode characters delimited by either double (") or single (') quotes. A double quoted string cannot contain double quotes unless escaped using a backslash (\). The same practice applies for single quoted strings, they cannot contain single quotes unless escaped using a backslash (\). The backslash character must be escaped to be part of the string."><code><string></code></a> */
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. If several names are associated with an encoding, only the one marked with preferred must be used.
Formal syntax
@charset "<charset>";
Description
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.
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 theContent-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
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 2.0 | 1.5 (1.8)[1] | 5.5[2] | 9 | 4 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 1.0 (1.8) | 5.5[2] | 10.0 | 4 |
[1] Firefox 1.0 supported only an invalid syntax where the character encoding is not set between single or double quotes.
[2] From IE 5.5 to IE 7 included, IE also supported the invalid syntax where the character encoding is not set between single or double quotes.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1) The definition of '@charset' in that specification. |
Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@charset