diff options
Diffstat (limited to 'files/nl/web/css/@namespace/index.html')
| -rw-r--r-- | files/nl/web/css/@namespace/index.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/nl/web/css/@namespace/index.html b/files/nl/web/css/@namespace/index.html new file mode 100644 index 0000000000..469bdd810f --- /dev/null +++ b/files/nl/web/css/@namespace/index.html @@ -0,0 +1,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> |