1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: '@namespace'
slug: Web/CSS/@namespace
tags:
- CSS
- Reference
- Règle @
translation_of: Web/CSS/@namespace
---
<div>{{CSSRef}}</div>
<p><strong><code>@namespace</code></strong> est <a href="/fr/docs/Web/CSS/Règles_@">une règle @</a> qui définit <a href="/fr/docs/Glossaire/Namespace">les espaces de noms XML</a> utilisés dans une feuille de style CSS. Les espaces de noms définis sont alors utilisés pour restreindre les sélecteurs <a href="/fr/docs/Web/CSS/Sélecteurs_universels">universels</a>, <a href="/fr/docs/Web/CSS/Sélecteurs_de_type">de type</a>, et <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">d'attribut</a> afin que ceux-ci ne sélectionnent que les éléments contenus dans cet espace de nom. La règle <code>@namespace</code> est généralement utilisée lorsqu'on manipule des documents entremêlant différents espaces de noms (par exemple, un document HTML5 qui contient du SVG en ligne ou du MathML ou alors un fichier XML qui est composé de plusieurs vocabulaires).</p>
<pre class="brush: css no-line-numbers">@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* Cela correspond à tous les éléments XHTML <a>
car XHTML est l'espace de nom par défaut, sans
préfixe. */
a {}
/* Cela correspond à tous les éléments SVG <a> */
svg|a {}
/* Cela correspond aux éléments <a> XHTML et SVG */
*|a {}
</pre>
<p>Les règles <code>@namespace</code> doivent suivre les règles @ {{cssxref("@charset")}} et {{cssxref("@import")}} et précéder les autres règles @ ainsi que les déclarations de style contenus dans la feuille de style.</p>
<p><code>@namespace</code> peut être utilisée afin de définir <strong>l'espace de noms par défaut</strong> de la feuille de style. Lorsqu'un espace de noms par défaut est définit, les sélecteurs universels et les sélecteurs de types (pas les sélecteurs d'attribut, cf. note ci-après) ne s'appliqueront qu'aux éléments de cet espace de noms.</p>
<p>La règle <code>@namespace</code> peut également être utilisée afin de définir <strong>un préfixe d'espace de noms</strong>. Lorsqu'un sélecteur universel, de type ou d'attribut est préfixé avec le préfixe de l'espace de noms, ce sélecteur ne ciblera les éléments que si l'espace de nom <strong>et</strong> le nom ou l'attribut de l'élément correspond.</p>
<p>En <a href="/fr/docs/Glossaire/HTML5">HTML5</a>, les <a href="https://html.spec.whatwg.org/#foreign-elements">éléments étrangers</a> connus seront automatiquement affectés à des espaces de noms. Cela signifie que les éléments HTML se comporteront comme s'ils appartenaient à l'espace de noms XHTML (<code>http://www.w3.org/1999/xhtml</code>) même s'il n'y a aucun attribut <code>xmlns</code> dans le document. Les éléments <code><a href="/fr/docs/Web/SVG/Element/svg"><svg></a></code> et <code><a href="/fr/docs/Web/MathML/Element/math"><math></a></code> seront affectés à leurs espaces de noms respectifs (<code>http://www.w3.org/2000/svg</code> et <code>http://www.w3.org/1998/Math/MathML</code>).</p>
<div class="note">
<p><strong>Note :</strong> En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. <code>xlink:href</code>), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css">/* Espace de noms par défaut */
@namespace url(<em>XML-namespace-URL</em>);
@namespace "<em>XML-namespace-URL</em>";
/* Espace de noms préfixé */
@namespace <em>préfixe</em> url(<em>XML-namespace-URL</em>);
@namespace <em>préfixe</em> "<em>XML-namespace-URL</em>";</pre>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Spécifications">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('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
<td>{{Spec2('CSS3 Namespaces')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.at-rules.namespace")}}</p>
|
