@charset

  • Revision slug: CSS/@charset
  • Revision title: @charset
  • Revision id: 41619
  • Created:
  • Creator: McGurk
  • Is current revision? No
  • Comment Added page; page created, 154 words added

Revision Content

{{ CSSRef() }}

Summary

@charset allows the user to specify the character encoding used in the style sheet.

Syntax

@charset "charset"

Examples

Set the encoding of the stylesheet to UTF-8

@charset "UTF-8"

Notes

  • The @charset rule is used when characters in font names or values in the content property isn't recognized.
  • You may not use this rule in inline style sheets using <style>, it may only be used in external style sheets.
  • The character encoding must be present in the IANA-registry. If several names are given for a character encoding the one marked with "preferred" should be used.
  • The rule must be placed at the top of the style sheet to have any effect.

Browser compatibility

{{ CompatibilityTable() }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>@charset allows the user to specify the character encoding used in the style sheet.</p>
<h2>Syntax</h2>
<pre>@charset "charset"
</pre>
<h2>Examples</h2>
<p>Set the encoding of the stylesheet to UTF-8</p>
<pre>@charset "UTF-8"
</pre>
<h2>Notes</h2>
<ul> <li>The <code>@charset</code> rule is used when characters in font names or values in the <code>content</code> property isn't recognized.</li> <li>You may not use this rule in inline style sheets using <code>&lt;style&gt;</code>, it may only be used in external style sheets.</li> <li>The character encoding must be present in the <a class="external" href="http://www.iana.org/assignments/character-sets">IANA-registry</a>. If several names are given for a character encoding the one marked with "preferred" should be used.</li> <li>The rule must be placed at the top of the style sheet to have any effect.</li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<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>8</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>8</td> <td>10.0</td> <td>4</td> </tr> </tbody>
</table>
</div>
Revert to this revision