forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathOverview.bs
More file actions
309 lines (267 loc) · 8.78 KB
/
Copy pathOverview.bs
File metadata and controls
309 lines (267 loc) · 8.78 KB
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<pre class="metadata">
Title: CSS Conditional Rules Module Level 4
Group: csswg
Shortname: css-conditional
Level: 4
Status: ED
Prepare for TR: no
!Delta Spec: yes
Work Status: Exploring
ED: https://drafts.csswg.org/css-conditional-4/
TR: https://www.w3.org/TR/css-conditional-4/
Previous Version: https://www.w3.org/TR/2022/CR-css-conditional-4-20220217/
Test Suite: https://wpt.fyi/results/css/css-conditional
Implementation Report: https://wpt.fyi/results/css/css-conditional
Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
Abstract: This module contains the features of CSS
for conditional processing of parts of style sheets,
based on capabilities of the processor or the environment
the style sheet is being applied in.
It includes and extends the functionality of CSS Conditional 3 [[!css-conditional-3]],
adding the ability to query support for particular selectors [[SELECTORS-4]]
through the new ''selector()'' notation for [=supports queries=].
Default Highlight: css
WPT Path Prefix: css/css-conditional/
WPT Display: open
</pre>
<pre class="link-defaults">
spec: css-conditional-3
type: dfn; text: conditional group rule
spec:css-namespaces-3;
type:dfn; text:namespace prefix
spec:css-namespaces-3;
type:dfn; text:CSS qualified name
</pre>
<h2 id="introduction">Introduction</h2>
ISSUE: The features in level 3 are still defined in [[css-conditional-3]]
and have not yet been copied here.
This level adds extensions to the ''@supports'' rule
to allow testing for supported selectors.
<h2 id="at-supports-ext">
Extensions to the ''@supports'' rule</h2>
This level of the specification extends the <<supports-feature>> syntax as follows:
<pre class="prod def" nohighlight>
<dfn><supports-feature></dfn> = <<supports-selector-fn>> | <<supports-decl>>
<dfn><supports-selector-fn></dfn> = selector( <<complex-selector>> )
</pre>
: <<supports-selector-fn>>
::
The result is true if the UA
<a href="#dfn-support-selector">supports the selector</a>
provided as an argument to the function.
<wpt>
at-supports-selector-001.html
at-supports-selector-002.html
at-supports-selector-003.html
at-supports-selector-004.html
js/CSS-supports-L4.html
</wpt>
<div class="example" id="ex-selector">
This example tests whether the
<a>column combinator</a> (||)
is supported in selectors,
and if so uses it to style particular cells in a table.
<pre class="lang-css">
@supports selector(col || td) {
col.selected || td {
background: tan;
}
}
</pre>
</div>
Any namespace prefixes used in a [=conditional group rule=]
must have been declared,
otherwise they are invalid [[!css-conditional-3]].
This includes namespace prefixes inside the selector function.
<wpt>
at-supports-namespace-002.html
</wpt>
<div class="invalid example" id="ex-ns-selector-invalid">
This example tries to check that attribute selectors
with [=CSS qualified name=]s are supported,
but is invalid,
because the namespace prefix has not been declared.
<pre class="lang-css">
@supports selector(a[xlink|href]) {
// do something, but fail
}
}
</pre>
</div>
<div class="example" id="ex-ns-selector">
This example checks that attribute selectors
with [=CSS qualified name=]s are supported.
<pre class="lang-css">
@namespace x url(http://www.w3.org/1999/xlink);
@supports selector(a[x|href]) {
// do something
}
}
</pre>
</div>
<h3 id="support-definition-ext">
Extensions to the definition of support</h3>
A CSS processor is considered to
<dfn export for=CSS id="dfn-support-selector">support a CSS selector</dfn>
if it accepts that all aspects of that selector, recursively,
(rather than considering any of its syntax to be unknown or invalid)
and that selector doesn't contain
<a>unknown -webkit- pseudo-elements</a>.
Note: Some functional selectors are parsed forgivingly,
i.e. if some arguments are unknown/invalid,
the selector itself is not invalidated.
These are nonetheless unsupported
<h2 class=no-num id="security">Security Considerations</h2>
No Security issues have been raised against this document
<h2 class=no-num id="privacy">Privacy Considerations</h2>
<!-- COPY FROM L3 when importing the rest of the spec -->
The ''selector()'' function may provide information about the user's software
such as its version
and whether it is running with non-default settings that enable or disable certain features.
This information can also be determined through other APIs.
However, the features in this specification are one of the ways this information
is exposed on the Web.
This information can also, in aggregate, be used to improve the accuracy of
<a href="https://www.w3.org/2001/tag/doc/unsanctioned-tracking/">fingerprinting</a> of the user.
<h2 class=no-num id="acknowledgments">Acknowledgments</h2>
<!-- Firstly, the -->The editors would like to thank
all of the contributors to the <a href="https://www.w3.org/TR/css-conditional-3/#acknowledgments">previous level</a>
of this module.
<!-- Secondly, we would like to acknowledge -->
<h2 id='changes' class='no-num'>
Changes</h2>
<h3 id="changes-from-2022-02-17" class="no-num">
Changes since the <a href="https://www.w3.org/TR/2022/CR-css-conditional-4-20220217/">Candidate Recommendation Snapshot of 17 February 2022</a></h3>
<ul>
<li>Clarify that unknown or invalid portions of a selector that do not invalidate the selector
nonetheless cause the selector to be considered unsupported.
</ul>
<h3 id="changes-from-20200303" class="no-num">
Changes since the <a href="https://www.w3.org/TR/2020/WD-css-conditional-4-20200303/">First Public Working Draft of 3 March 2020</a></h3>
<ul>
<li>Added [[#privacy|Privacy]] and [[#security|Security]] sections.
<li>Added some examples</li>
<li>Clarified that the requirement to declare namespace prefixes
applies to selectors inside selector() (<a href="https://github.com/w3c/csswg-drafts/issues/3220">Issue 3220</a>)</li>
</ul>
<h3 id="changes-from-L4" class="no-num">
Additions since Level 3</h3>
<ul>
<li>Added ''selector()'' notation to [=supports queries=].
</ul>
<wpt hidden title="CSS Conditional 3 tests">
at-media-001.html
at-media-002.html
at-media-003.html
at-media-content-001.html
at-media-content-002.html
at-media-content-003.html
at-media-content-004.html
at-media-dynamic-001.html
at-supports-045.html
at-supports-content-001.html
at-supports-content-002.html
at-supports-content-003.html
at-supports-content-004.html
at-supports-namespace-001.html
js/CSS-supports-L3.html
</wpt>
<wpt hidden title="CSS Conditional 5 tests">
</wpt>
<wpt hidden title="Untagged, probaly conditional 3, needs triage">
at-media-whitespace-optional-001.html
at-media-whitespace-optional-002.html
at-supports-001.html
at-supports-002.html
at-supports-003.html
at-supports-004.html
at-supports-005.html
at-supports-006.html
at-supports-007.html
at-supports-008.html
at-supports-009.html
at-supports-010.html
at-supports-011.html
at-supports-012.html
at-supports-013.html
at-supports-014.html
at-supports-015.html
at-supports-016.html
at-supports-017.html
at-supports-018.html
at-supports-019.html
at-supports-020.html
at-supports-021.html
at-supports-022.html
at-supports-023.html
at-supports-024.html
at-supports-025.html
at-supports-026.html
at-supports-027.html
at-supports-028.html
at-supports-029.html
at-supports-030.html
at-supports-031.html
at-supports-032.html
at-supports-033.html
at-supports-034.html
at-supports-035.html
at-supports-036.html
at-supports-037.html
at-supports-038.html
at-supports-039.html
at-supports-043.html
at-supports-044.html
at-supports-046.html
css-supports-001.xht
css-supports-002.xht
css-supports-003.xht
css-supports-004.xht
css-supports-005.xht
css-supports-006.xht
css-supports-007.xht
css-supports-008.xht
css-supports-009.xht
css-supports-010.xht
css-supports-011.xht
css-supports-012.xht
css-supports-013.xht
css-supports-014.xht
css-supports-015.xht
css-supports-016.xht
css-supports-017.xht
css-supports-018.xht
css-supports-019.xht
css-supports-020.xht
css-supports-021.xht
css-supports-022.xht
css-supports-023.xht
css-supports-024.xht
css-supports-025.xht
css-supports-026.xht
css-supports-029.xht
css-supports-030.xht
css-supports-031.xht
css-supports-032.xht
css-supports-033.xht
css-supports-034.xht
css-supports-035.xht
css-supports-036.xht
css-supports-037.xht
css-supports-038.xht
css-supports-039.xht
css-supports-040.xht
css-supports-041.xht
css-supports-042.xht
css-supports-043.xht
css-supports-044.xht
css-supports-045.xht
css-supports-046.xht
idlharness.html
js/001.html
js/CSS-supports-CSSStyleDeclaration.html
js/CSS-supports-L3.html
js/conditional-CSSGroupingRule.html
</wpt>