@charset

  • Revision slug: CSS/@charset
  • Revision title: @charset
  • Revision id: 338679
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment bring back the extra space before @charset for the example, changed to real css comments and activate syntax highlighting

Revision Content

{{ CSSRef() }}

Summary

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 {{ HTMLElement("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 {{ cssxref("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 given by the charset attribute of the Content-Type: HTTP header or the equivalent in the protocol used to serve the style sheet.
  2. The value of the Unicode byte-order character placed at the beginning of the file.
  3. The @charset CSS at-rule.
  4. Use the character encoding defined by the referring document: the charset attribute of the {{ HTMLElement("link") }} element. This method is obsoleted in HTML5 and must not be used.
  5. Assume that the document is UTF-8

Syntax

@charset charset;

where :

charset
Is a {{ xref_cssstring() }} 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.

Examples

@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 {{xref_cssstring()}} */

Specifications

Specification Status Comment
{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }} {{ Spec2('CSS2.1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 2.0 {{ CompatGeckoDesktop("1.8") }}[*] 5.5 [**] 9 4
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatGeckoMobile("1.8") }} 5.5 [**] 10.0 4

[*] Firefox 1.0 supported only an invalid syntax where the character encoding is not set between single or double quotes.
[**] 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.

See also

{{ CSS_at_rules() }}

Revision Source

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>@charset</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="At-rule">at-rule</a> 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 <a href="/en/CSS/Syntax#nested_statements" title="en/CSS/Syntax#nested_statements">nested statement</a>, it cannot be used inside <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">conditional group at-rules</a>. If several <code>@charset</code> at-rules are defined, only the first one is used, and it cannot be used inside a <code>style</code> attribute on an HTML element or inside the {{ HTMLElement("style") }} element where the character set of the HTML page is relevant.</p>
<p>This at-rule is useful when using non-ASCII characters in some CSS properties, like {{ cssxref("content") }}.</p>
<p>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) :</p>
<ol>
  <li>The value given by the <code>charset</code> attribute of the <code>Content-Type:</code> HTTP header or the equivalent in the protocol used to serve the style sheet.</li>
  <li>The value of the <a href="http://en.wikipedia.org/wiki/Byte_order_mark" title="http://en.wikipedia.org/wiki/Byte_order_mark">Unicode byte-order</a> character placed at the beginning of the file.</li>
  <li>The <code>@charset</code> CSS at-rule.</li>
  <li>Use the character encoding defined by the referring document: the <code>charset</code> attribute of the {{ HTMLElement("link") }} element. This method is obsoleted in HTML5 and must not be used.</li>
  <li>Assume that the document is UTF-8</li>
</ol>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
@charset <em>charset</em>;
</pre>
<p>where :</p>
<dl>
  <dt style="margin:0 40px">
    <em>charset</em></dt>
  <dd style="margin:0 40px">
    Is a {{ xref_cssstring() }} denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the <a href="http://www.iana.org/assignments/character-sets">IANA-registry</a>. If several names are associated with an encoding, only the one marked with&nbsp;<em>preferred</em> must be used.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
@charset "UTF-8";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  /* 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 {{xref_cssstring()}} */
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.0</td>
        <td>{{ CompatGeckoDesktop("1.8") }}[*]</td>
        <td>5.5 [**]</td>
        <td>9</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.1</td>
        <td>{{ CompatGeckoMobile("1.8") }}</td>
        <td>5.5 [**]</td>
        <td>10.0</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] Firefox 1.0 supported only an invalid syntax where the character encoding is not set between single or double quotes.<br />
  [**] 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.</p>
<h2 id="See_also">See also</h2>
<p>{{ CSS_at_rules() }}</p>
Revert to this revision