Revision 1071144 of @document

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

<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@document</code></strong> permet d'appliquer des règles à un document en fonction de son URL. Elle est principalement conçue pour être utilisée dans les feuilles de style utilisateur. Une règle <code>@document</code> peut définir une ou plusieurs fonctions de correspondance ; si une de ces fonctions s'applique à l'URL du document, les règles correspondantes s'appliqueront.</p>

<p>Les fonctions disponibles pour cette règles sont :</p>

<ul>
 <li><code>url()</code> qui permettra d'obtenir une correspondance avec une URL exacte</li>
 <li><code>url-prefix()</code> qui permettra d'obtenir une correspondance si l'URL du document commence avec la valeur fournie</li>
 <li><code>domain()</code> qui permettra d'obtenir une correspondance si l'URL du document appartient au domaine indiqué ou à un de ses sous-domaines</li>
 <li><code>regexp()</code> qui permettra d'obtenir une correspondance si l'URL&nbsp; du document correspond à une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a>. L'expression doit correspondre à l'URL entière.</li>
</ul>

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

<p>Les valeurs fournies aux fonctions <code>url()</code>, <code>url-prefix()</code> et <code>domain()</code> peuvent éventuellement être délimitées par des quotes (simples ou doubles). Les valeurs fournies à la fonction <code>regexp()</code> <strong>doivent</strong> être délimitées par des quotes.</p>

<p>Pour l'échappement des valeurs dans la fonction <code>regexp()</code>, il faut également rajouter un niveau d'échappement pour le CSS. Ainsi, dans les expressions rationnelles, un point « . » correspond à n'importe quel caractère. Pour utiliser une correspondance avec un point dans une URL, il faudra d'abord l'échapper au sens de l'expression rationnelle avec une barre oblique inversée « \. » puis l'échapper pour CSS avec une deuxième barre oblique inversée « <code>\\.</code> ».</p>

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

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

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

<pre class="brush: css">
@document url(https://www.w3.org/),
               url-prefix(https://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* Les règles CSS qui suivent s'appliquent à :
     - La page "https://www.w3.org/".
     - Toute page dont l'URL commence par "https://www.w3.org/Style/"
     - Toute page dont l'hôte de l'URL est "mozilla.org" 
       ou finit par ".mozilla.org"
     - Toute page dont l'URL commence par "https:" */

  /* Et là, on rend ces pages vraiment moches :) */
  body {
    color: purple;
    background: yellow;
  }
}
</pre>

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

<p>{{WhyNoSpecStart}}Cette règle @ <a href="https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">fut initialement proposée</a> pour la spécification {{SpecName('CSS3 Conditional')}} et fut <a href="https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">repoussée</a> afin d'être traitée par la spécification de niveau 4.{{WhyNoSpecEnd}}</p>

<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>{{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>Fonctionnalité</th>
   <th>Android</th>
   <th>Chrome pour 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>{{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 id="See_also">Voir aussi</h2>

<ul>
 <li><a href="https://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Gérer des feuilles de style utilisateur par site</a>, une discussion sur la liste de diffusion www-style.</li>
 <li>Le fichier <code><a href="https://forums.mozfr.org/viewtopic.php?t=29039">userContent.css</a></code> qui est la feuille de style destinée aux utilisateurs des navigateurs basés sur Gecko</li>
</ul>