@charset

The @charset CSS rule specifies the character encoding used in the style sheet. Although the first character in @charset is the @ symbol, it is not an at-rule. The CSS syntax module deprecates this rule, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked, but it is fully supported in all browsers.

The following assertions apply to valid @charset usage:

  • The @charset rule must be the first element in the style sheet and not be preceded by any character.
  • @charset is not a nested statement and therefore cannot be used inside conditional group at-rules.
  • If several @charset at-rules are defined, only the first one is used.
  • @charset 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.
css
@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):

  1. The value of the Unicode byte-order character placed at the beginning of the file.
  2. 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.
  3. The @charset CSS at-rule.
  4. 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.
  5. Assume that the document is UTF-8.

Syntax

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

Formal syntax

@charset "<charset>";
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.

Examples

Valid and invalid charset declarations

css
@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
css
@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 at-rule */
@charset UTF-8; /* Invalid, the charset is a CSS <string> and requires double-quotes */

Specifications

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# charset①

Browser compatibility

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
@charset

See also