Revision 792769 of @document

<p>{{ CSSRef() }}</p>

<p>{{SeeCompatTable()}}</p>

<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>

<p>La règle <code>@document</code> est une règle <code>@</code>&nbsp;qui restreint la portée des règles de styles qu'elle contient, selon l'URL du document. Elle est avant tout destinée aux feuilles de styles utilisateur. Une règle <code>@document</code> peut spécifier une ou plusieurs fonctions d'appariement. Si au moins une des fonctions s'applique à l'URL, la règle prendra effet à cette URL.</p>

<p>Le cas d'utilisation principal concerne les feuilles de styles utilisateurs, toutefois cette règle @ peut être utilisée dans des feuilles auteur.</p>

<p>Les fonctions possibles sont :</p>

<ul>
 <li><code>url()</code>, qui fait correspondre une URL exacte</li>
 <li><code>url-prefix()</code>, qui fait correspondre le début de l'URL du document</li>
 <li><code>domain()</code>, qui fait correspondre le domaine (ou sous-domaine)</li>
 <li><code>regexp()</code>, qui fait correspondre grâce à l'<a href="/fr/Guide_JavaScript_1.5/Expressions_rationnelles" title="fr/Guide_JavaScript_1.5/Expressions_rationnelles">expression régulière</a> exprimée.</li>
</ul>

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

<p>Les valeurs envoyées aux fonctions <code>url()</code>, <code>url-prefix()</code>, et <code>domain()</code> peuvent être comprises entre des guillemets simples ou doubles, et ce de manière optionnelle. Les valeurs envoyées à la fonction <code>regexp()</code> <strong>doivent</strong> être incluses entre des guillemets.</p>

<p>Les valeurs échappées envoyées à la fonction <code>regexp()</code> doivent être à nouveau échappées dans le CSS. Par exemple, un . (point) sélectionne n'importe quel caractère dans les expressions régulières. Pour sélectionner un point, il faut d'abord l'échapper en utilisant les règles des expressions régulières (faire <code>\.</code>), puis échapper cette chaîne en utilisant les règles CSS (faire <code>\\.</code>).</p>

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

<pre class="eval">
@document url(https://www.w3.org/),
               url-prefix(https://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* Ces règles CSS s'appliquent à&nbsp;:
     + la page "https://www.w3.org/".
     + les pages dont l'URL commence par "https://www.w3.org/Style/"
     + les pages dont l'URL de l'hôte est «&nbsp;mozilla.org&nbsp;» ou finit par
       «&nbsp;.mozilla.org&nbsp;»
   */

  /* Rendre les pages mentionnées ci-dessus vraiment immondes */
  body { color: purple; background: yellow; }
}
</pre>

<h2 id="Sp.C3.A9cifications">Spécifications</h2>

<p><a href="https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document" title="https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initialement</a>&nbsp;dans&nbsp;{{ SpecName('CSS3 Conditional', '', '') }},&nbsp;<code style="font-style: normal;">@document</code>&nbsp;a été&nbsp;<a href="https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes" title="https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">retardé</a>&nbsp;au level 4.</p>

<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>

<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>Support de base</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatGeckoDesktop("1.8") }} {{ property_prefix("-moz") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td><code>regexp()</code></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("-moz") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonction</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support de base</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>regexp()</code></td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2>Voir également</h2>

<ul>
 <li>{{Css_at_rules()}}</li>
 <li><a href="https://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Feuilles de style utilisateur spécifiques à un sit (en)</a>&nbsp;sur la liste de diffusion www-style.</li>
 <li>Le fichier <a href="https://www.mozilla.org/support/firefox/edit#content">userContent.css</a> est une feuille de style utilisateur pour les navigateurs utilisant Gecko</li>
</ul>