Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 41630 of @charset

  • Revision slug: CSS/@charset
  • Revision title: @charset
  • Revision id: 41630
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 104 words added

Revision Content

Summary

The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element of the style sheet and not be preceded by any character. If several @charset at-rules are defined, only the first one, 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 is several ways to defined the character encoding of a style sheet, browser will try the following methods in that order (and stop as soon as one yields a result) :

  1. Use the value given by the charset attribute on the Content-Type: HTTP header.
  2. The value of the Unicode byte-order character placed at the beginning of the file.
  3. The @charset CSS at-rule.
  4. Using the character encoding defined by the referring document:
    1. If referred by a {{ HTMLElement("link") }} element, the charset attribute.

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 Europe with euro sign)

Specifications

Browser compatibility

{{ CompatibilityTable() }}

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

See also

Revision Source

<h2>Summary</h2>
<p>The <code>@charset</code> CSS at-rule specifies the character encoding used in the style sheet. It must be the first element of the style sheet and not be preceded by any character. If several <code>@charset</code> at-rules are defined, only the first one, 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 is several ways to defined the character encoding of a style sheet, browser will try the following methods in that order (and stop as soon as one yields a result) :</p>
<ol> <li>Use the value given by the <code>charset</code> attribute on the <code>Content-Type:</code> HTTP header.</li> <li>The value of the Unicode byte-order character placed at the beginning of the file.</li> <li>The <code>@charset</code> CSS at-rule.</li> <li>Using the character encoding defined by the referring document: <ol> <li>If referred by a {{ HTMLElement("link") }} element, the <code>charset</code> attribute.</li> </ol> </li>
</ol><h2>Syntax</h2>
<pre>@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 class="external" href="http://www.iana.org/assignments/character-sets" rel="external" target="_blank" title="http://www.iana.org/assignments/character-sets">IANA-registry</a>. If several names are associated with an encoding, only the one marked with <em>preferred</em> must be used.</dd>
</dl><h2>Examples</h2>
<pre>@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 Europe with euro sign)
</pre>
<h2>Specifications</h2>
<h2 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") }}</td> <td>5.5 <a class="external" href="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx"></a></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") }}</td> <td>5.5 <a class="external" href="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx"></a></td> <td>10.0</td> <td>4</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li><a href="/en/CSS_Reference" title="CSS Reference">CSS Reference</a></li> <li>{{ CSS_at_rules() }}</li>
</ul>
Revert to this revision