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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
---
title: '@supports'
slug: Web/CSS/@supports
translation_of: Web/CSS/@supports
---
<p>{{ CSSRef() }}</p>
<h2 id="Описание" style="">Описание</h2>
<p style="">The <code>@supports</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a <em>supports condition</em>.</p>
<p style=""><code>@supports</code> gives CSS the ability to perform a <em>feature query</em>.</p>
<p>The <code>@supports</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> and can be accessed via the CSS object model interface {{domxref("CSSSupportsRule")}}.</p>
<h2 id="Syntax" name="Syntax" style="">Синтаксис</h2>
<p style="">A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.</p>
<h3 id="Синтаксис_объявления" style=""><span class="short_text" id="result_box" lang="ru"><span class="hps">Синтаксис объявления</span></span></h3>
<p>The simplest expression is a CSS declaration, that is a CSS property name followed by a value, separated by a colon. The following expression</p>
<pre class="brush:css">( transform-origin: 5% 5% )</pre>
<p>returns true if the {{ cssxref("transform-origin") }} implements a syntax considering <code>5% 5%</code> as valid.</p>
<p>A CSS declaration is always surrounded by parentheses.</p>
<h3 id="Оператор_not" style="">Оператор not</h3>
<p>The <code>not</code> operator can precede any expression to create a new expression, resulting in the negation of the original expression. The following expression</p>
<pre class="brush:css">not ( transform-origin: 10em 10em 10em )</pre>
<p>returns true if {{ cssxref("transform-origin") }} doesn't implement a syntax considering <code>10em 10em 10em</code> as valid.</p>
<p>Like any operator, the <code>not</code> operator can be applied to a declaration of any complexity. The following examples are all valid expressions:</p>
<pre class="brush:css">not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )</pre>
<div class="note style-wrap">
<p style=""><strong>Предупреждение:</strong> there is no need to enclose the <code>not</code> operator between two parentheses when at the top level. To combine it with other operators, like <code>and</code> and <code>or</code>, the parentheses are required.</p>
</div>
<h3 id="Оператор_and" style="">Оператор and</h3>
<p style="">From two expressions, the <code>and</code> operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:</p>
<pre class="brush:css">(display: table-cell) and (display: list-item)</pre>
<p>Several conjunctions can be juxtaposed without the need of more parentheses:</p>
<pre class="brush:css">(display: table-cell) and (display: list-item) and (display:run-in)</pre>
<p>is equivalent to:</p>
<pre class="brush:css">(display: table-cell) and ((display: list-item) and (display:run-in))</pre>
<h3 id="Оператор_or" style="">Оператор or</h3>
<p>From two expressions, the <code>or</code> operator creates a new expression consisting in the disjunction of the two original ones; the resulting expression is true if one, or both, of the original expressions also resolves to true. In this example, the complete expression resolves to true if at least one of the two expressions is true:</p>
<pre class="brush:css;">( transform-style: preserve ) or ( -moz-transform-style: preserve )</pre>
<p>Several disjunctions can be juxtaposed without the need of more parentheses:</p>
<pre class="brush:css">( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )</pre>
<p>is equivalent to:</p>
<pre class="brush:css">( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d )))</pre>
<div class="note style-wrap">
<p style=""><strong>Предупреждение</strong>: when using both <code>and</code> and <code>or</code> operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.</p>
</div>
<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Примеры" style="">Примеры</h2>
<h3 id="Тестирование_заданного_свойства" style="">Тестирование заданного свойства</h3>
<pre class="brush:css;">@supports (animation-name: test) {
… /* specific CSS applied when animations are supported unprefixed */
@keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */
…
}
}
</pre>
<h3 id="Тестирование_заданного_свойства_или_его_версии_с_префиксом" style="">Тестирование заданного свойства или его версии с префиксом</h3>
<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
(-ms-perspective: 10px) or (-o-perspective: 10px) ) {
… /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
}
</pre>
<h3 id="Тестирование_неподдерживаемого_или_специфического_свойства" style="">Тестирование неподдерживаемого или специфического свойства</h3>
<pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
… /* specific CSS applied to simulate text-align-last:justify */
}</pre>
<h2 id="Спецификации" style="">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr style="">
<td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td>
<td style="">{{ Spec2('CSS3 Conditional') }}</td>
<td style="">Первоначальное определение.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility" style="">Совместимость с браузерами</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop" style="">
<table class="compat-table">
<tbody>
<tr style="">
<th style="">Особенность</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatChrome(28.0)}}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{ CompatGeckoDesktop("22") }} [1]</td>
<td>{{ CompatNo() }}</td>
<td>12.1</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile" style="">
<table class="compat-table">
<tbody>
<tr style="">
<th style="">Особенность</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{ CompatNo() }}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("22") }} [1]</td>
<td>{{ CompatNo() }}</td>
<td>12.1</td>
<td>9</td>
<td>{{CompatChrome(28.0)}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Gecko 17 to Gecko 21 supported this feature only if the user enables it by setting the config value <code>layout.css.supports-rule.enabled</code> to <code>true</code>.</p>
<h2 id="Смотрите_также" style="">Смотрите также</h2>
<ul>
<li>The CSSOM class {{ domxref("CSSSupportsRule") }}, and the {{ domxref("CSS.supports") }} method that allows to perform the same check via JavaScript.</li>
</ul>
|
