Revision 1066300 of @charset

<div>{{CSSRef}}</div>

<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a>&nbsp; <strong><code>@charset</code></strong> définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des <a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS">instructions imbriquées</a> et ne peut donc pas être utilisée <a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">à l'intérieur des groupes conditionnels</a>. Si plusieurs règles <code>@charset</code> sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut <code>style</code> d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte.</p>

<p>Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que {{cssxref("content")}}.</p>

<p>Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :</p>

<ol>
 <li>La valeur du caractère indiquant <a href="https://fr.wikipedia.org/wiki/Indicateur_d'ordre_des_octets">l'ordre des octets Unicode</a> qui est placé au début du fichier (le BOM)</li>
 <li>La valeur fournie par l'attribut <code>charset</code> de l'en-tête HTTP <code>Content-Type</code> ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.</li>
 <li>La règle @ CSS <code>@charset</code>.</li>
 <li>L'encodage défini dans le document appelant la ressource (l'attribut <code>charset</code> de l'élément {{HTMLElement("link")}}). Cette méthode est désormais obsolète et ne doit plus être utilisée.</li>
 <li>Dans tous les autres cas, on considère que le document est encodé en UTF-8</li>
</ol>

<h2 id="Syntax">Syntaxe</h2>

<pre class="brush: css">
@charset &lt;<em>charset</em>&gt;;
</pre>

<p>où</p>

<dl>
 <dt><code><em>charset</em></code></dt>
 <dd>Est une chaîne de caractères (une valeur CSS de type&nbsp; {{cssxref("&lt;string&gt;")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans <a href="https://www.iana.org/assignments/character-sets/character-sets.xhtml">le registre IANA</a>. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec <em>préféré</em>&nbsp; (<em>preferred</em>) doit être utilisé.</dd>
</dl>

<h3 id="Formal_syntax">Syntaxe formelle</h3>

<pre class="syntaxbox">
{{csssyntax}}
</pre>

<h2 id="Examples">Exemples</h2>

<h3>Exemples valides</h3>

<pre class="brush: css">
@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
@charset 'iso-8859-15'; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */
</pre>

<h3>Exemples invalides</h3>

<pre class="brush: css example-bad">
 @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
@charset UTF-8;         /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("&lt;string&gt;")}}) */
</pre>

<h2 id="Specifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>2.0</td>
   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup></td>
   <td>5.5<sup>[2]</sup></td>
   <td>9</td>
   <td>4</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>2.1</td>
   <td>{{CompatGeckoMobile("1.8")}}</td>
   <td>5.5<sup>[2]</sup></td>
   <td>10.0</td>
   <td>4</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Firefox 1.0 prenait en charge une syntaxe invalide où l'encodage n'était pas défini entre quotes (simples ou doubles).</p>

<p>[2] Entre IE 5.5 et IE 7 (inclus), Internet Explorer prenait également en charge une syntaxe invalide où l'encodage n'était pas défini entre quotes (simples ou doubles).</p>