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
|
---
title: '@namespace'
slug: Web/CSS/@namespace
tags:
- Неймспейсы
- Пространства имён
translation_of: Web/CSS/@namespace
---
<p>{{ CSSRef() }}</p>
<h2 id="Описание">Описание</h2>
<p><code>@namespace</code> - это правила (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a>) определяющие <a href="https://developer.mozilla.org/en-US/docs/Namespaces">пространства имён XML</a>, которые будут использованы в <a href="https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet">таблице стилей</a>. Они применяются чтобы ограничить CSS селекторы только элементами принадлежащими конкретному пространству имён. Namespace'ы полезны, в основном, когда идёт взаимодействие с документами содержащими множество неймспейсов, такими как HTML5 со встроенным SVG, MathML или XML.</p>
<pre class="brush: css"><code>@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
a {}
/* This matches all SVG <a> elements */
svg|a {}
/* This matches both XHTML and SVG <a> elements */
*|a {}</code></pre>
<p>Любое <code>@namespace</code> правило обязано следовать всем <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%40charset">@charset</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%40import">@import</a> правилам, а так же всем <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration">описаниям стилей</a> в таблице стилей.</p>
<p><code>@namespace</code> может быть использован для определения стандартного пространства имён для конкретной таблице стилей. Когда стандартное пространство имён определено, все селекторы (но не атрибуты селекторов, смотрите заметку ниже) применяются только к элементам в этом неймспейсе.</p>
<p><code>@namespace</code> правила можно использовать для определения префиксов имён. Когда селектор имеет префикс, он будет выбирать элементы совпадающие по неймспейсу и именам или атрибутам.</p>
<p>В <a href="/ru/docs/HTML/HTML5">HTML5</a> существуют <a href="https://html.spec.whatwg.org/#foreign-elements">сторонние элементы</a> которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML элементы будут действовать так, как если бы они находились в пространстве имён (<code>http://www.w3.org/1999/xhtml</code>), также если они не имеют <code>xmlns</code> аттрибута где-либо в документе, то такие элементы как <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/SVG"><svg></a> и <a href="/ru/docs/Web/MathML/Element/math"><math></a> будут ассоциироваться с их стандартными пространствами имён (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p>
<div class="blockIndicator note">
<p>Заметка: В XML, если префикс отличается от атрибута (Например, <code>xlink:href</code>), то аттрибут не будет иметь неймспейса. Другими словами, аттрибуты не могут наследовать пространство имён элемента в котором они находятся.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css"><code>/* Default namespace */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";
/* Prefixed namespace */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";</code></pre>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
<pre class="brush: css">{{csssyntax}}
</pre>
<h2 id="Specifications" name="Specifications">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
<td>{{Spec2('CSS3 Namespaces')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>
|
