Revision 624273 of @document

Raccourci de la révision : Web/CSS/@document
Titre de la révision : @document
ID de la révision : 624273
Créé : 23 juin 2014 à 06:16:15
Créateur : teoli
Version actuelle ? Non
Commentaire

Étiquettes :

Contenu de la révision

Résumé

La règle @-moz-document est une règle @ spécifique à Gecko 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 @-moz-document 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.

Les fonctions possibles sont :

url(), qui fait correspondre une URL exacte
url-prefix(), qui fait correspondre le début de l'URL du document
domain(), qui fait correspondre le domaine (ou sous-domaine)
regexp(), qui fait correspondre grâce à l'expression régulière exprimée.

Le support de la fonction regexp()a été ajouté dans Gecko 6.0 {{ geckoRelease("6.0") }}.

Syntaxe

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

Les valeurs échappées envoyées à la fonction regexp() 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 \.), puis échapper cette chaîne en utilisant les règles CSS (faire \\.).

Exemples

@-moz-document url(https://www.w3.org/),
               url-prefix(https://www.w3.org/Style/),
               domain(mozilla.org)
{
  /* Ces règles CSS s'appliquent à :
     + 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 « mozilla.org » ou finit par
       « .mozilla.org »
   */

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

Spécifications

Compatibilité des navigateurs

Disponible depuis Mozilla 1.8 / Firefox 1.5.

{{ languages( { "en": "en/CSS/@-moz-document", "ja": "ja/CSS/@-moz-document", "pl": "pl/CSS/@-moz-document" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>La règle <code>@-moz-document</code> est une règle <code>@</code> spécifique à Gecko 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>@-moz-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>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>
<div class="geckoVersionNote">
 <p>{{ gecko_callout_heading("6.0") }}</p>
 <p>Le support de la fonction <code>regexp()</code>a été ajouté dans Gecko 6.0 {{ geckoRelease("6.0") }}.</p>
</div>
<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
<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>
<h3 id="Exemples" name="Exemples">Exemples</h3>
<pre class="eval">
@-moz-document url(<a class="external" href="https://www.w3.org/" rel="freelink">https://www.w3.org/</a>),
               url-prefix(<a class="external" href="https://www.w3.org/Style/" rel="freelink">https://www.w3.org/Style/</a>),
               domain(mozilla.org)
{
  /* Ces règles CSS s'appliquent à&nbsp;:
     + la page "<a class="external" href="https://www.w3.org/" rel="freelink">https://www.w3.org/</a>".
     + les pages dont l'URL commence par "<a class="external" href="https://www.w3.org/Style/" rel="freelink">https://www.w3.org/Style/</a>"
     + 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>
<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h3>
<ul>
 <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2004Aug/0135">per-site user style sheet rules (en)</a></li>
 <li><a class="external" href="https://www.w3.org/TR/css3-conditional/#at-document" title="https://www.w3.org/TR/css3-conditional/#at-document">CSS Conditional Rules Module Level 3</a></li>
</ul>
<h3 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h3>
<p>Disponible depuis Mozilla 1.8 / <a href="/fr/Firefox_1.5_pour_les_développeurs" title="fr/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>.</p>
<p>{{ languages( { "en": "en/CSS/@-moz-document", "ja": "ja/CSS/@-moz-document", "pl": "pl/CSS/@-moz-document" } ) }}</p>

Revenir à cette révision