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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: '@namespace'
slug: Web/CSS/@namespace
tags:
- At-rule
- CSS
- Layout
- Reference
- Web
translation_of: Web/CSS/@namespace
---
<p>{{CSSRef}}</p>
<h2 id="Samenvatting">Samenvatting</h2>
<p><span class="seoSummary"><strong><code>@namespace</code></strong> is een <a href="/en-US/docs/Web/CSS/At-rule" title="CSS at-rules">at-rule</a> welke <a href="/en-US/docs/Namespaces">XML namespaces</a> definieert zodat deze gebruikt kunnen worden in een <a href="/en-US/docs/Glossary/CSS">CSS</a> <a href="/en-US/docs/Web/API/StyleSheet">style sheet</a>. De gedefinieerde namespaces kunnen gebruikt worden om de <a href="/en-US/docs/Web/CSS/Universal_selectors">universal</a>, <a href="/en-US/docs/Web/CSS/Type_selectors">type</a>, en <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute</a> <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">selectors</a> alleen elementen binnen de namespace te laten selecteren. De <code>@namespace</code> regel heeft in het algemeen alleen toegevoegde waarde wanneer deze toegepast wordt in documenten welke meerdere namespaces hebben—zoals HTML5 met inline SVG of MathML, of XML met meerdere gebruikte woordenlijsten. </span></p>
<p>Elke <code>@namespace</code> regel moet alle <a href="/en-US/docs/Web/CSS/%40charset">@charset</a> en <a href="/en-US/docs/Web/CSS/%40import">@import</a> regels volgen, en moet vóór alle andere at-rules en <a href="/en-US/docs/Web/API/CSSStyleDeclaration">style declarations</a> staan in een style sheet.</p>
<p><code>@namespace</code> kan gebruikt worden om de <strong>standaard namespace</strong> vast te leggen voor een style sheet. Wanneer een standaard namespace is vastgelegd, gelden alle universele en type selectors (maar <strong>geen </strong>attribute selectors, zie de opmerking onderaan) alleen voor de elementen binnen de standaard namespace.</p>
<p>De <code>@namespace</code> regel kan ook gebruikt worden om een <strong>namespace prefix</strong> vast te leggen. Wanneer een universele, type of attribute selector wordt voorafgegaan met een namespace, dan geldt deze selector alleen wanneer de namespace<em>en</em> de naam van het element of attribute matchen.</p>
<p>In <a href="/en-US/docs/Glossary/HTML5">HTML5</a> worden namespaces automatisch toegepast op bekende <a href="https://html.spec.whatwg.org/#foreign-elements">foreign elements</a>. Dit zorgt ervoor dat HTML elementen zich gedragen alsof ze in de XHTML namespace zijn (<code>http://www.w3.org/1999/xhtml</code>), zelfs als er geen <code>xmlns</code> attribuut in het document staat, en de<a href="/en-US/docs/Web/SVG/Element/svg"><svg></a> en <a href="/en-US/docs/Web/MathML/Element/math"><math></a> elementen worden toegewezen aan hun bijbehorende namespaces (<code>http://www.w3.org/2000/svg</code> en <code>http://www.w3.org/1998/Math/MathML</code>).</p>
<div class="note">
<p><strong>Note:</strong> In XML heeft een attribuut <strong>geen </strong>namespace, behalve als er een prefix op een attribuut is vastgelegd (<em>bijv.</em>, <code>xlink:href</code>). In andere woorden, attributen nemen de namespace van het element waarop ze staan niet over. Om dit gedrag na te bootsen geldt de standaard namespace in CSS <strong>niet </strong>voor attribuut selectors.</p>
</div>
<h2 id="Syntaxis">Syntaxis</h2>
<pre class="brush: css">/* Standaard namespace */
@namespace url(<em>XML-namespace-URL</em>);
@namespace "<em>XML-namespace-URL</em>";
/* Prefixed namespace */
@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>);
@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre>
<h3 id="Formele_syntaxis">Formele syntaxis</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Voorbeelden">Voorbeelden</h2>
<pre class="brush: css">@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* Dit selecteert alle XHTML <a> elementen, omdat XHTML de standaard non-prefixed namespace is */
a {}
/* Dit selecteert alle SVG <a> elementen */
svg|a {}
/* Dit selecteert zowel XHTML als SVG <a> elementen */
*|a {}
</pre>
<h2 id="Specificaties">Specificaties</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specificatie</th>
<th scope="col">Status</th>
<th scope="col">Opmerking</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
<td>{{Spec2('CSS3 Namespaces')}}</td>
<td>Eerste definitie</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
<p>{{ CompatibilityTable() }}</p>
<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>Basic support</td>
<td>{{CompatChrome(1.0)}}</td>
<td>{{ CompatGeckoDesktop(1.0) }}</td>
<td>9.0</td>
<td>8.0</td>
<td>1.0</td>
</tr>
<tr>
<td>Namespace selector (|)</td>
<td>{{CompatChrome(1.0)}}</td>
<td>{{ CompatGeckoDesktop(1.0) }}</td>
<td>9.0</td>
<td>8.0</td>
<td>3.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</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>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
|
