Skip to content

Commit 1bf466a

Browse files
fantasaifantasai
committed
[css-conditional-4][css-conditional-5] Split Level 4 ED
* Existing feature (selector()) from FPWD, which is implemented and shipping, to go to CR in L4 * New features (font-*(), @when, @else) which were never published on /TR to go to FPWD in L5
1 parent b472c60 commit 1bf466a

File tree

2 files changed

+414
-302
lines changed

2 files changed

+414
-302
lines changed

‎css-conditional-4/Overview.bs‎

Lines changed: 61 additions & 302 deletions
Original file line numberDiff line numberDiff line change
@@ -13,336 +13,95 @@ Test Suite: http://test.csswg.org/suites/css-conditional-4_dev/nightly-unstable/
1313
Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
1414
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
1515
Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
16-
Abstract: This module contains the features of CSS for conditional processing of parts of
17-
style sheets, conditioned on capabilities of the processor or the
18-
document the style sheet is being applied to. It includes and extends the
19-
functionality of CSS lConditional 3 [[!css-conditional-3]].
20-
The main extensions compared to level 3 are
21-
the Generalized Conditional ''@when''
22-
and Chained Conditional ''@else'' rules, and
23-
the addition of selector and font tech queries to the the ''@supports'' rule.
16+
Abstract: This module contains the features of CSS
17+
for conditional processing of parts of style sheets,
18+
based on capabilities of the processor or the environment
19+
the style sheet is being applied in.
20+
It includes and extends the functionality of CSS Conditional 3 [[!css-conditional-3]],
21+
adding the ability to query support for particular selectors [[SELECTORS-4]]
22+
through the new ''selector()'' notation for [=supports queries=].
2423
Default Highlight: css
2524
</pre>
2625

2726
<pre class="link-defaults">
28-
spec: css-conditional-3
29-
type: dfn; text: conditional group rule
27+
spec: css-conditional-3
28+
type: dfn; text: conditional group rule
3029
</pre>
3130

3231
<h2 id="introduction">Introduction</h2>
3332

34-
This is currently an early draft of the things that are <em>new</em> in level 4.
35-
The features in level 3 are still defined in [[css-conditional-3]]
36-
and have not yet been copied here.
33+
ISSUE: The features in level 3 are still defined in [[css-conditional-3]]
34+
and have not yet been copied here.
3735

38-
It adds extensions to the ''@supports'' rule
39-
to allow testing for supported selectors
40-
and supported font technologies.
36+
This level adds extensions to the ''@supports'' rule
37+
to allow testing for supported selectors.
4138

42-
It also adds an ''@when'' rule,
43-
which generalizes the concept of a conditional rule.
44-
Anything you can express in an existing conditional rule
45-
can be expressed in ''@when'',
46-
it just has to be wrapped in an appropriate function
47-
to declare what kind of condition it is.
48-
This allow authors to easily combine multiple types of queries,
49-
such as media queries and supports queries,
50-
in a single boolean expression.
51-
Without this,
52-
authors must rely on nesting separate conditional rules,
53-
which is harder to read and write,
54-
presupposes the conditions are to be conjoined with the "and" boolean relation
55-
(with no easy way to indicate anything else),
56-
and restricts their utility in the proposed <a>conditional rule chains</a>.
39+
<h2 id="at-supports-ext">
40+
Extensions to the ''@supports'' rule</h2>
5741

58-
It also adds ''@else'' rules,
59-
which immediately follow conditional rules
60-
and automatically qualify their conditions as you'd expect,
61-
such that at <em>most one rule</em> in an <a>conditional rule chain</a> is chosen as active.
42+
This level of the specification extends the <<supports-feature>> syntax as follows:
6243

63-
Issue: In the future, copy the contents of [[css-conditional-3]] into this document.
64-
65-
<h2 id="at-supports-ext">Extensions to the ''@supports'' rule</h2>
66-
67-
This level of the specification extends the <<supports-feature>> syntax as follows:
68-
69-
<pre class="prod def" nohighlight>
70-
<dfn>&lt;supports-feature></dfn> = <<supports-selector-fn>> | <<supports-font-tech-fn>>
71-
| <<supports-font-format-fn>> | <<supports-decl>>
72-
<dfn>&lt;supports-selector-fn></dfn> = selector( <<complex-selector>> )
73-
<dfn>&lt;supports-font-tech-fn></dfn> = font-tech ( <<font-tech>> )
74-
<dfn>&lt;font-tech></dfn> = [ features-opentype | features-aat | features-graphite
75-
| color-colrv0 | color-colrv1 | color-svg | color-sbix | color-cbdt
76-
| variations | palettes | incremental ]
77-
<dfn>&lt;supports-font-format-fn></dfn> = font-format ( <<font-format>> )
78-
<dfn>&lt;font-format</dfn> = [ collection | embedded-opentype | opentype
79-
| svg | truetype | woff | woff2 ]
80-
</pre>
81-
82-
83-
: <<supports-selector-fn>>
84-
::
85-
The result is true if the UA
86-
<a href="#dfn-support-selector">supports the selector</a>
87-
provided as an argument to the function.
88-
89-
: <<supports-font-tech-fn>>
90-
::
91-
The result is true if the UA
92-
<a href="#dfn-support-font-tech">supports the font tech</a>
93-
provided as an argument to the function.
94-
95-
: <<supports-font-format-fn>>
96-
::
97-
The result is true if the UA
98-
<a href="#dfn-support-font-format">supports the font format</a>
99-
provided as an argument to the function.
100-
101-
<h3 id="support-definition-ext">Extensions to the definition of support</h3>
102-
103-
A CSS processor is considered to
104-
<dfn export for=CSS id="dfn-support-selector">support a CSS selector</dfn>
105-
if it accepts that selector (rather than discarding it as a
106-
parse error), and that selector doesn't contain
107-
<a>unknown -webkit- pseudo-elements</a>.
108-
109-
A CSS processor is considered to
110-
<dfn export for=CSS id="dfn-support-font-tech">support a font tech</dfn>
111-
when the text and layout processing engine ingesting
112-
this CSS text is capable of utilising the specified [[css-fonts-4#font-tech-definitions]]
113-
in layout and rendering.
114-
115-
Note: the allowed values for the font-tech function
116-
are the same as those for the tech function
117-
in the '@font-face' '@font-face/src' descriptor.
118-
119-
A CSS processor is considered to
120-
<dfn export for=CSS id="dfn-support-font-format">support a font format</dfn>
121-
when the text and layout processing engine ingesting
122-
this CSS text is capable of utilising the specified [[css-fonts-4#font-format-definitions]]
123-
in layout and rendering.
124-
125-
Note: the allowed values for the font-format function
126-
are the same as those for the format function
127-
in the '@font-face' '@font-face/src' descriptor.
128-
129-
<h2 id="when-rule">Generalized Conditional Rules: the ''@when'' rule</h2>
130-
131-
The <dfn>@when</dfn> at-rule is a <a>conditional group rule</a>
132-
that generalizes the individual <a>conditional group rules</a>
133-
such as ''@media'' and ''@supports''.
134-
It is defined as:
135-
136-
<pre class=prod>
137-
@when <<boolean-condition>> {
138-
<<stylesheet>>
139-
}
140-
</pre>
141-
142-
Where <<boolean-condition>> is a boolean algebra a la [[mediaqueries-4#mq-syntax]],
143-
but with ''media()'' and ''supports()'' functions as leaves.
144-
145-
Issue: Define "boolean algebra, with X as leaves" in a generic way in Conditional,
146-
so all the conditional rules can reference it directly,
147-
rather than having to redefine boolean algebra on their own.
148-
149-
The ''media()'' and ''supports()'' functions are defined as:
150-
151-
<pre class=prod>
152-
<dfn>media()</dfn> = media( [ <<mf-plain>> | <<mf-boolean>> | <<mf-range>> ] )
153-
<dfn>supports()</dfn> = supports( <<declaration>> )
154-
</pre>
155-
156-
A ''media()'' or ''supports()'' function is associated the boolean result
157-
that its contained condition is associated with.
158-
159-
<h2 id="else-rule">Chained Conditionals: the ''@else'' rule</h2>
160-
161-
Usually, <a>conditional group rules</a> are independent;
162-
each one has a separate condition
163-
evaluated without direct reference to any other rule,
164-
and decides whether or not to apply its contained rules
165-
based solely on its condition.
166-
167-
This is fine for simple conditions,
168-
but makes it difficult to write a collection of conditionals that are meant to be mutually exclusive;
169-
authors have to very carefully craft their conditions to not activate when the other rules are meant to,
170-
and make sure the collection of conditionals don't accidentally <em>all</em> exclude some situation
171-
which is then left unstyled.
172-
173-
The <dfn>@else</dfn> rule is a <a>conditional group rule</a>
174-
used to form <a>conditional rule chains</a>,
175-
which allow multiple conditional rules to be provided
176-
and guarantee that at most one of them will evaluate their condition as true.
177-
It is defined as:
178-
179-
<pre class=prod>
180-
@else <<boolean-condition>>? {
181-
<<stylesheet>>
182-
}
183-
</pre>
184-
185-
''@else'' is interpreted identically to ''@when''.
186-
If its <<boolean-condition>> is omitted,
187-
it's treated as having a condition that's always true.
188-
189-
A <dfn export>conditional rule chain</dfn> is a series of consecutive <a>conditional group rules</a>,
190-
starting with a <a>conditional group rule</a> other than ''@else'',
191-
followed by zero or more ''@else'' rules.
192-
There cannot be anything between the successive <a>conditional group rules</a>
193-
other than whitespace and/or comments;
194-
any other token "breaks" the chain.
195-
196-
Issue: Should we require that only the last ''@else'' in a chain can have an omitted condition?
197-
It's not uncommon for me, when debugging code,
198-
to short-circuit an if-else chain by setting one of them to "true";
199-
I presume that would be similarly useful in CSS?
200-
It's still pretty easy to see you've done something wrong if you omit the condition accidentally.
201-
202-
Within a <a>conditional rule chain</a>,
203-
the conditions of each <a>conditional group rule</a> are evaluated in order.
204-
If one of them is true,
205-
the conditions of all <em>following</em> <a>conditional group rules</a> in the chain must evaluate to false,
206-
regardless of what they contain.
207-
208-
An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid and must be ignored.
209-
210-
<div class=example>
211-
For example, here's a (somewhat silly) conditional chain:
212-
213-
<pre class="lang-css">
214-
@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
215-
/* A */
216-
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
217-
/* B */
218-
} @else {
219-
/* C */
220-
}
44+
<pre class="prod def" nohighlight>
45+
<dfn>&lt;supports-feature></dfn> = <<supports-selector-fn>> | <<supports-decl>>
46+
<dfn>&lt;supports-selector-fn></dfn> = selector( <<complex-selector>> )
22147
</pre>
22248

223-
Exactly one of the preceding rules will be chosen,
224-
even though the second rule
225-
doesn't exclude large widths, fine points, or flexbox support,
226-
and the last rule
227-
doesn't specify anything at all.
228-
229-
To achieve the same result without <a>conditional rule chains</a>,
230-
you'd need to write:
49+
: <<supports-selector-fn>>
50+
::
51+
The result is true if the UA
52+
<a href="#dfn-support-selector">supports the selector</a>
53+
provided as an argument to the function.
23154

232-
<pre class="lang-css">
233-
@media (width >= 400px) and (pointer: fine) {
234-
@supports (display: flex) {
235-
/* A */
236-
}
237-
@supports not (display: flex) {
238-
@supports (caret-color: pink) and (background: double-rainbow()) {
239-
/* B */
240-
}
241-
@supports not ((caret-color: pink) and (background: double-rainbow())) {
242-
/* C */
243-
}
244-
}
245-
}
246-
@media not ((width >= 400px) and (pointer: fine)) {
247-
@supports (caret-color: pink) and (background: double-rainbow()) {
248-
/* B */
249-
}
250-
@supports not ((caret-color: pink) and (background: double-rainbow())) {
251-
/* C */
252-
}
253-
}
254-
</pre>
55+
<h3 id="support-definition-ext">
56+
Extensions to the definition of support</h3>
25557

256-
This is simultaneously impossible to read,
257-
requires significant duplication of both conditions and contents,
258-
and is <em>very</em> difficult to write correctly
259-
<!-- (I wrote it wrong <em>twice</em> while producing this example). -->
260-
If the conditions got any more complicated
261-
(which is not unusual in real-world content),
262-
the example would get <em>significantly</em> worse.
263-
</div>
58+
A CSS processor is considered to
59+
<dfn export for=CSS id="dfn-support-selector">support a CSS selector</dfn>
60+
if it accepts that selector
61+
(rather than discarding it as a parse error),
62+
and that selector doesn't contain
63+
<a>unknown -webkit- pseudo-elements</a>.
26464

265-
<div class="example">
266-
In this example, three different color font technologies
267-
are tested, in order of preference,
268-
plus a monochrome fallback.
269-
The most capable, COLRv1, supports both gradients and font variations;
270-
the next best choice, SVG, supports gradients
271-
while the least capable, COLRv0, supports flat color fill only.
272-
273-
The fallback has no test condition,
274-
so will always be chosen unless one of the earlier conditions succeeds.
275-
276-
<pre class="lang-css">
277-
@when font-tech(color-COLRv1) and font-tech(variations) {
278-
@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
279-
}
280-
@else font-tech(color-SVG) {
281-
@font-face { font-family: icons; src: url(icons-gradient.woff2); }
282-
}
283-
@else font-tech(color-COLRv0) {
284-
@font-face { font-family: icons; src: url(icons-flat.woff2); }
285-
}
286-
@else {
287-
@font-face { font-family: icons; src: url(icons-fallback.woff2); }
288-
}
289-
</pre>
290-
291-
Notice that in this example,
292-
the variable color font is only downloaded
293-
if COLRv1 is supported
294-
and font variations are also supported.
295-
296-
Notice too that only one of the available options will be downloaded;
297-
this would not be the case without ''@when'' and ''@else'',
298-
as the next example shows.
299-
</div>
65+
<h2 class=no-num id="security">Security Considerations</h2>
30066

301-
<div class="example">
302-
In this example,
303-
although it appears that the fallback will not be used
304-
if COLRv1 is supported,
305-
in fact both fonts will be downloaded,
306-
which wastes bandwidth if it is not used.
67+
No Security issues have been raised against this document
30768

308-
The fallback might still be used for some characters;
309-
for example, if the color font supports only Latin,
310-
while the fallback supports Latin and Greek.
69+
<h2 class=no-num id="privacy">Privacy Considerations</h2>
31170

312-
<pre class="lang-css">
313-
@font-face { font-family: icons; src: url(icons-fallback.woff2);
314-
@supports font-tech(color-COLRv1) {
315-
@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
316-
}
317-
</pre>
71+
<!-- COPY FROM L3 when importing the rest of the spec -->
31872

319-
</div>
73+
The ''selector()'' function may provide information about the user's software
74+
such as its version
75+
and whether it is running with non-default settings that enable or disable certain features.
32076

321-
<h2 class=no-num id="security">Security Considerations</h2>
77+
This information can also be determined through other APIs.
78+
However, the features in this specification are one of the ways this information
79+
is exposed on the Web.
32280

323-
No Security issues have been raised against this document
81+
This information can also, in aggregate, be used to improve the accuracy of
82+
<a href="https://www.w3.org/2001/tag/doc/unsanctioned-tracking/">fingerprinting</a> of the user.
32483

325-
<h2 class=no-num id="privacy">Privacy Considerations</h2>
84+
<h2 class=no-num id="acknowledgments">Acknowledgments</h2>
32685

327-
No Privacy issues have been raised against this document
86+
<!-- Firstly, the -->The editors would like to thank
87+
all of the contributors to the <a href="http://www.w3.org/TR/css-values-3/#acknowledgements">previous level</a>
88+
of this module.
32889

90+
<!-- Secondly, we would like to acknowledge -->
32991

330-
<h2 class=no-num id="acknowledgments">Acknowledgments</h2>
92+
<h2 id='changes' class='no-num'>
93+
Changes</h2>
33194

332-
The @when and @else rules are based on a proposal by Tab Atkins.
95+
<h3 id="changes-from-20200303" class="no-num">
96+
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>
33397

334-
<h2 id='changes' class='no-num'>
335-
Changes</h2>
98+
<ul>
99+
<li>Added Privacy and Security sections.
100+
</ul>
336101

337-
<h3 id="changes-from-20200303" class="no-num">Changes since the
338-
<a href="https://www.w3.org/TR/2020/WD-css-conditional-4-20200303/">First Public Working Draft of 3 March 2020</a>
339-
</h3>
102+
<h3 id="changes-from-L4" class="no-num">
103+
Additions since Level 3</h3>
340104

341-
<ul>
342-
<li>Renamed font-technology to font-tech</li>
343-
<li>Added some examples</li>
344-
<li>Added @when and @else per CSSWG resolution</li>
345-
<li>Extended @supports feature to express font capabilities</li>
346-
<li>Added two co-editors per CSSWG resolution</li>
347-
<li>Added Privacy and Security sections</li>
348-
</ul>
105+
<ul>
106+
<li>Added ''selector()'' notation to [=supports queries=].
107+
</ul>

0 commit comments

Comments
 (0)