Skip to content

Commit f48a555

Browse files
kbabbittkbabbitt
committed
[css-conditional-5][editorial] Fix some bikeshed errors
1 parent 01783f1 commit f48a555

File tree

1 file changed

+68
-66
lines changed

1 file changed

+68
-66
lines changed

‎css-conditional-5/Overview.bs‎

Lines changed: 68 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ WPT Display: closed
4545
spec:css-contain-2; type:dfn; text:layout containment box
4646
spec:css-contain-2; type:dfn; text:size containment box
4747
spec:css-pseudo-4; type:dfn; text:fictional tag sequence
48+
spec:css-pseudo-4; type:selector; text:::file-selector-button
49+
spec:css-pseudo-4; type:selector; text:::placeholder
4850
spec:css-scroll-snap-2; type:dfn; text:scrollsnapchanging
4951
spec:css-sizing-4; type:property; text:contain-intrinsic-size
5052
spec:css-sizing-4; type:property; text:aspect-ratio
@@ -110,7 +112,7 @@ Extensions to the ''@supports'' rule</h2>
110112

111113
<pre class="prod def" nohighlight>
112114
<dfn>&lt;supports-feature></dfn> = <<supports-selector-fn>> | <<supports-font-tech-fn>>
113-
| <<supports-font-format-fn>> | <<supports-decl>>
115+
| <<supports-font-format-fn>> | <<supports-decl>>
114116
<dfn>&lt;supports-font-tech-fn></dfn> = font-tech( <<font-tech>> )
115117
<dfn>&lt;supports-font-format-fn></dfn> = font-format( <<font-format>> )
116118
</pre>
@@ -198,7 +200,7 @@ Chained Conditionals: the ''@else'' rule</h2>
198200

199201
The <dfn>@else</dfn> rule is a [=conditional group rule=]
200202
used to form [=conditional rule chains=],
201-
which associate multiple [=conditional rules=]
203+
which associate multiple [=conditional group rules=]
202204
and guarantee that only the first one that matches
203205
will evaluate its condition as true.
204206
It is defined as:
@@ -262,23 +264,23 @@ Chained Conditionals: the ''@else'' rule</h2>
262264
<pre class="lang-css">
263265
@media (width >= 400px) and (pointer: fine) {
264266
@supports (display: flex) {
265-
/* A */
267+
/* A */
266268
}
267269
@supports not (display: flex) {
268-
@supports (caret-color: pink) and (background: double-rainbow()) {
269-
/* B */
270-
}
271-
@supports not ((caret-color: pink) and (background: double-rainbow())) {
272-
/* C */
273-
}
270+
@supports (caret-color: pink) and (background: double-rainbow()) {
271+
/* B */
272+
}
273+
@supports not ((caret-color: pink) and (background: double-rainbow())) {
274+
/* C */
275+
}
274276
}
275277
}
276278
@media not ((width >= 400px) and (pointer: fine)) {
277279
@supports (caret-color: pink) and (background: double-rainbow()) {
278-
/* B */
280+
/* B */
279281
}
280282
@supports not ((caret-color: pink) and (background: double-rainbow())) {
281-
/* C */
283+
/* C */
282284
}
283285
}
284286
</pre>
@@ -384,7 +386,7 @@ Container Queries</h2>
384386

385387
@container my-layout (inline-size > 45em) {
386388
.media-object {
387-
grid-template: 'img content' auto / auto 1fr;
389+
grid-template: 'img content' auto / auto 1fr;
388390
}
389391
}
390392
</pre>
@@ -423,13 +425,13 @@ Container Queries</h2>
423425
<pre class=lang-html>
424426
&lt;style>
425427
#container {
426-
width: 100px;
427-
container-type: inline-size;
428+
width: 100px;
429+
container-type: inline-size;
428430
}
429431
@container (inline-size < 150px) {
430-
#inner::before {
431-
content: "BEFORE";
432-
}
432+
#inner::before {
433+
content: "BEFORE";
434+
}
433435
}
434436
&lt;/style>
435437
&lt;div id=container>
@@ -445,20 +447,20 @@ Container Queries</h2>
445447
<pre class=lang-html>
446448
&lt;div id=host style="width:200px">
447449
&lt;template shadowroot=open>
448-
&lt;style>
449-
#container {
450-
width: 100px;
451-
container-type: inline-size;
452-
}
453-
@container (inline-size < 150px) {
454-
::slotted(span) {
455-
color: green;
456-
}
457-
}
458-
&lt;/style>
459-
&lt;div id=container>
460-
&lt;slot />
461-
&lt;/div>
450+
&lt;style>
451+
#container {
452+
width: 100px;
453+
container-type: inline-size;
454+
}
455+
@container (inline-size < 150px) {
456+
::slotted(span) {
457+
color: green;
458+
}
459+
}
460+
&lt;/style>
461+
&lt;div id=container>
462+
&lt;slot />
463+
&lt;/div>
462464
&lt;/template>
463465
&lt;span id=slotted>Green&lt;/span>
464466
&lt;/div>
@@ -504,11 +506,11 @@ Creating Query Containers: the 'container-type' property</h3>
504506
and establishes an [=independent formatting context=].
505507
<dt><dfn>scroll-state</dfn>
506508
<dd>
507-
Establishes a [=query container=] for [=scroll-state queries=]
509+
Establishes a [=query container=] for [=container scroll-state queries=]
508510
<dt><dfn>normal</dfn>
509511
<dd>
510512
The element is not a [=query container=]
511-
for any [=container size queries=] or [=scroll-state queries=],
513+
for any [=container size queries=] or [=container scroll-state queries=],
512514
but remains a [=query container=] for [=container style queries=].
513515
</dl>
514516

@@ -541,9 +543,9 @@ Creating Query Containers: the 'container-type' property</h3>
541543
<pre class=lang-css>
542544
@container style(--cards: small) {
543545
article {
544-
border: thin solid silver;
545-
border-radius: 0.5em;
546-
padding: 1em;
546+
border: thin solid silver;
547+
border-radius: 0.5em;
548+
padding: 1em;
547549
}
548550
}
549551
</pre>
@@ -561,7 +563,7 @@ Creating Query Containers: the 'container-type' property</h3>
561563
}
562564
@container scroll-state(stuck: top) {
563565
#sticky-child {
564-
background-color: lime;
566+
background-color: lime;
565567
}
566568
}
567569
</pre>
@@ -932,33 +934,33 @@ Container Queries: the ''@container'' rule</h3>
932934
<dfn><<container-condition>></dfn> = [ <<container-name>>? <<container-query>>? ]!
933935
<dfn><<container-name>></dfn> = <<custom-ident>>
934936
<dfn><<container-query>></dfn> = not <<query-in-parens>>
935-
| <<query-in-parens>> [ [ and <<query-in-parens>> ]* | [ or <<query-in-parens>> ]* ]
937+
| <<query-in-parens>> [ [ and <<query-in-parens>> ]* | [ or <<query-in-parens>> ]* ]
936938
<dfn><<query-in-parens>></dfn> = ( <<container-query>> )
937-
| ( <<size-feature>> )
938-
| style( <<style-query>> )
939-
| scroll-state( <<scroll-state-query>> )
940-
| <<general-enclosed>>
939+
| ( <<size-feature>> )
940+
| style( <<style-query>> )
941+
| scroll-state( <<scroll-state-query>> )
942+
| <<general-enclosed>>
941943
942944
<dfn><<style-query>></dfn> = not <<style-in-parens>>
943-
| <<style-in-parens>> [ [ and <<style-in-parens>> ]* | [ or <<style-in-parens>> ]* ]
944-
| <<style-feature>>
945+
| <<style-in-parens>> [ [ and <<style-in-parens>> ]* | [ or <<style-in-parens>> ]* ]
946+
| <<style-feature>>
945947
<dfn><<style-in-parens>></dfn> = ( <<style-query>> )
946-
| ( <<style-feature>> )
947-
| <<general-enclosed>>
948+
| ( <<style-feature>> )
949+
| <<general-enclosed>>
948950
<dfn><<style-feature>></dfn> = <<style-feature-plain>> | <<style-feature-boolean>> | <<style-range>>
949951
<dfn><<style-feature-plain>></dfn> = <<style-feature-name>> : <<style-feature-value>>
950952
<dfn><<style-feature-boolean>></dfn> = <<style-feature-name>>
951953
<dfn><<style-range>></dfn> = <<style-range-value>> <<mf-comparison>> <<style-range-value>>
952-
| <<style-range-value>> <<mf-lt>> <<style-range-value>> <<mf-lt>> <<style-range-value>>
953-
| <<style-range-value>> <<mf-gt>> <<style-range-value>> <<mf-gt>> <<style-range-value>>
954+
| <<style-range-value>> <<mf-lt>> <<style-range-value>> <<mf-lt>> <<style-range-value>>
955+
| <<style-range-value>> <<mf-gt>> <<style-range-value>> <<mf-gt>> <<style-range-value>>
954956
<dfn><<style-range-value>></dfn> = <<custom-property-name>> | <<style-feature-value>>
955957
956958
<dfn><<scroll-state-query>></dfn> = not <<scroll-state-in-parens>>
957-
| <<scroll-state-in-parens>> [ [ and <<scroll-state-in-parens>> ]* | [ or <<scroll-state-in-parens>> ]* ]
958-
| <<scroll-state-feature>>
959+
| <<scroll-state-in-parens>> [ [ and <<scroll-state-in-parens>> ]* | [ or <<scroll-state-in-parens>> ]* ]
960+
| <<scroll-state-feature>>
959961
<dfn><<scroll-state-in-parens>></dfn> = ( <<scroll-state-query>> )
960-
| ( <<scroll-state-feature>> )
961-
| <<general-enclosed>>
962+
| ( <<scroll-state-feature>> )
963+
| <<general-enclosed>>
962964
</pre>
963965

964966
The keywords ''container-name/none'', ''and'', ''not'', and ''or''
@@ -1051,7 +1053,7 @@ Container Queries: the ''@container'' rule</h3>
10511053
<pre class=lang-css>
10521054
@container card (inline-size > 30em) {
10531055
@container style(--responsive: true) {
1054-
/* styles */
1056+
/* styles */
10551057
}
10561058
}
10571059
</pre>
@@ -1102,7 +1104,7 @@ Animated Containers</h3>
11021104
must start on background-color on #inner. */
11031105
@container (width <= 150px) {
11041106
#inner {
1105-
background-color: skyblue;
1107+
background-color: skyblue;
11061108
}
11071109
}
11081110

@@ -1119,7 +1121,7 @@ Animated Containers</h3>
11191121
<pre class=lang-html>
11201122
&lt;main>
11211123
&lt;div id=container>
1122-
&lt;div id=inner>Inner&lt;/div>
1124+
&lt;div id=inner>Inner&lt;/div>
11231125
&lt;/div>
11241126
&lt;div id=sibling>Sibling&lt;/div>
11251127
&lt;/main>
@@ -1488,7 +1490,7 @@ Scroll snapping: the '@container/snapped' feature</h4>
14881490
</pre>
14891491

14901492
The '@container/snapped' [=container feature=] queries whether a [=snap target=]
1491-
is, or would be, snapped to its [=snap container=], in the given axis. That is,
1493+
is, or would be, snapped to its [=scroll snap container=], in the given axis. That is,
14921494
it matches any [=snap target=] that the {{scrollsnapchanging}} event is fired for.
14931495

14941496
<dl dfn-type=value dfn-for="@container/snapped">
@@ -1497,27 +1499,27 @@ Scroll snapping: the '@container/snapped' feature</h4>
14971499
The [=query container=] is not a [=snap target=].
14981500
<dt><dfn>x</dfn>
14991501
<dd>
1500-
'@container/snapped' [=container feature=] matches ''x''
1502+
'@container/snapped' [=container feature=] matches ''@container/snapped/x''
15011503
if the [=query container=] is a horizontal [=snap target=] for its [=scroll container=].
15021504
<dt><dfn>y</dfn>
15031505
<dd>
1504-
'@container/snapped' [=container feature=] matches ''y''
1506+
'@container/snapped' [=container feature=] matches ''@container/snapped/y''
15051507
if the [=query container=] is a vertical [=snap target=] for its [=scroll container=].
15061508
<dt><dfn>block</dfn>
15071509
<dd>
1508-
'@container/snapped' [=container feature=] matches ''block''
1510+
'@container/snapped' [=container feature=] matches ''@container/snapped/block''
15091511
if the [=query container=] is a [=snap target=] for its [=scroll container=].
1510-
in the block direction of the [=snap container=].
1512+
in the block direction of the [=scroll snap container=].
15111513
<dt><dfn>inline</dfn>
15121514
<dd>
1513-
'@container/snapped' [=container feature=] matches ''inline''
1515+
'@container/snapped' [=container feature=] matches ''@container/snapped/inline''
15141516
if the [=query container=] is a [=snap target=] for its [=scroll container=]
1515-
in the inline direction of the [=snap container=].
1517+
in the inline direction of the [=scroll snap container=].
15161518
<dt><dfn>both</dfn>
15171519
<dd>
15181520
'@container/snapped' [=container feature=] matches ''both''
15191521
if the [=query container=] is a [=snap target=] for its [=scroll container=]
1520-
in both directions of the [=snap container=].
1522+
in both directions of the [=scroll snap container=].
15211523
</dl>
15221524

15231525
<h4 id="scrollable">
@@ -1663,8 +1665,8 @@ The <code>CSSContainerRule</code> interface</h3>
16631665
<pre class='idl'>
16641666
[Exposed=Window]
16651667
interface CSSContainerRule : CSSConditionRule {
1666-
readonly attribute CSSOMString containerName;
1667-
readonly attribute CSSOMString containerQuery;
1668+
readonly attribute CSSOMString containerName;
1669+
readonly attribute CSSOMString containerQuery;
16681670
};
16691671
</pre>
16701672

@@ -1756,7 +1758,7 @@ Changes since the <a href="https://www.w3.org/TR/2024/WD-css-conditional-5-20240
17561758

17571759
<ul>
17581760
<!-- To 31 Oct 2024 -->
1759-
<li>Add 'none'-keywords to scroll-state() features (<a href="https://github.com/w3c/csswg-drafts/pull/10874">#10874</a>)</li>
1761+
<li>Add ''@container/stuck/none''-keywords to scroll-state() features (<a href="https://github.com/w3c/csswg-drafts/pull/10874">#10874</a>)</li>
17601762
<li>Added container-type:scroll-state, and scroll-state() queries for stuck, snapped, and scrollable features
17611763
(<a href="https://github.com/w3c/csswg-drafts/issues/6402#issuecomment-1812973013">#6402</a>,
17621764
<a href="https://github.com/w3c/csswg-drafts/issues/10784#issuecomment-2379901508">#10784</a>,

0 commit comments

Comments
 (0)