Skip to content

Commit dec6b9d

Browse files
committed
Improve CSSContainerRule
- Add containerName, containerQuery. - Reorganize syntax so that conditionText and containerQuery both map to productions which make sense.
1 parent 0dc8a83 commit dec6b9d

File tree

1 file changed

+40
-14
lines changed

1 file changed

+40
-14
lines changed

css-contain-3/Overview.bs

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -568,7 +568,7 @@ Creating Named Containers: the 'container' shorthand</h3>
568568
Container Queries: the ''@container'' rule</h3>
569569

570570
The <dfn at-rule id="at-ruledef-container">@container</dfn> rule
571-
is a [=conditional group rule=] whose condition is
571+
is a [=conditional group rule=] whose condition contains
572572
a <dfn export>container query</dfn>,
573573
which is a boolean combination of [=container size queries=] and/or [=container style queries=].
574574
Style declarations within the <<stylesheet>> block of an ''@container'' rule
@@ -579,26 +579,27 @@ Container Queries: the ''@container'' rule</h3>
579579
The syntax of the ''@container'' rule is:
580580

581581
<pre class="prod def">
582-
@container [ <<container-name>> ]? <<container-condition>> {
582+
@container <<container-condition>> {
583583
<<stylesheet>>
584584
}
585585
</pre>
586586

587587
where:
588588

589589
<pre class="prod def">
590+
<dfn><<container-condition>></dfn> = [ <<container-name>> ]? <<container-query>>
590591
<dfn><<container-name>></dfn> = <<custom-ident>>
591-
<dfn><<container-condition>></dfn> = not <<query-in-parens>>
592+
<dfn><<container-query>></dfn> = not <<query-in-parens>>
592593
| <<query-in-parens>> [ [ and <<query-in-parens>> ]* | [ or <<query-in-parens>> ]* ]
593-
<dfn><<query-in-parens>></dfn> = ( <<container-condition>> )
594+
<dfn><<query-in-parens>></dfn> = ( <<container-query>> )
594595
| ( <<size-feature>> )
595596
| style( <<style-query>> )
596597
| <<general-enclosed>>
597598
598-
<dfn><<style-query>></dfn> = <<style-condition>> | <<style-feature>>
599-
<dfn><<style-condition>></dfn> = not <<style-in-parens>>
599+
<dfn><<style-query>></dfn> = not <<style-in-parens>>
600600
| <<style-in-parens>> [ [ and <<style-in-parens>> ]* | [ or <<style-in-parens>> ]* ]
601-
<dfn><<style-in-parens>></dfn> = ( <<style-condition>> )
601+
| <<style-feature>>
602+
<dfn><<style-in-parens>></dfn> = ( <<style-query>> )
602603
| ( <<style-feature>> )
603604
| <<general-enclosed>>
604605
</pre>
@@ -611,13 +612,13 @@ Container Queries: the ''@container'' rule</h3>
611612
is selected from among the element’s ancestor [=query containers=]
612613
that are established as a valid [=query container=]
613614
for all the [=container features=]
614-
in the <<container-condition>>.
615+
in the <<container-query>>.
615616
The optional <<container-name>>
616617
filters the set of [=query containers=] considered
617618
to just those with a matching [=query container name=].
618619

619620
Once an eligible [=query container=] has been selected for an element,
620-
each [=container feature=] in the <<container-condition>>
621+
each [=container feature=] in the <<container-query>>
621622
is evaluated against that [=query container=].
622623
If no ancestor is an eligible [=query container=],
623624
then the [=container query=] is ''unknown'' for that element.
@@ -1005,16 +1006,40 @@ The <code>CSSContainerRule</code> interface</h3>
10051006
<pre class='idl'>
10061007
[Exposed=Window]
10071008
interface CSSContainerRule : CSSConditionRule {
1009+
readonly attribute CSSOMString containerName;
1010+
readonly attribute CSSOMString containerQuery;
10081011
};
10091012
</pre>
10101013

10111014
<dl class='idl-attributes'>
10121015
<dt><code>conditionText</code> of type <code>CSSOMString</code> (CSSContainerRule-specific definition for attribute on CSSConditionRule)
10131016
<dd>The <code>conditionText</code> attribute (defined on the <code>CSSConditionRule</code> parent rule),
1014-
on getting, must return the condition that was specified,
1017+
on getting, must return a value as follows:
1018+
1019+
<dl class="switch">
1020+
<dt data-md>The ''@container'' rule has an associated <<container-name>>
1021+
<dd data-md>The result of getting the <code>containerName</code> and
1022+
<code>containerQuery</code> attributes, joined by a single whitespace.
1023+
<dt data-md>Otherwise
1024+
<dd data-md>The result of getting the <code>containerQuery</code> attribute.
1025+
</dl>
1026+
1027+
<dt><code>containerName</code> of type <code>CSSOMString</code>
1028+
<dd>The <code>containerName</code> attribute, on getting, must return a value as follows:
1029+
1030+
<dl class="switch">
1031+
<dt data-md>The ''@container'' rule has an associated <<container-name>>
1032+
<dd data-md>The result of serializing that <<container-name>>.
1033+
<dt data-md>Otherwise
1034+
<dd data-md>An empty string.
1035+
</dl>
1036+
1037+
<dt><code>containerQuery</code> of type <code>CSSOMString</code>
1038+
<dd>The <code>containerQuery</code> attribute,
1039+
on getting, must return the <<container-query>> that was specified,
10151040
without any logical simplifications,
1016-
so that the returned condition will evaluate to the same result
1017-
as the specified condition
1041+
so that the returned query will evaluate to the same result
1042+
as the specified query
10181043
in any conformant implementation of this specification
10191044
(including implementations that implement future extensions
10201045
allowed by the <<general-enclosed>> extensibility mechanism in this specification).
@@ -1026,8 +1051,6 @@ The <code>CSSContainerRule</code> interface</h3>
10261051
or simplification based on evaluating results) are not allowed.
10271052
</dl>
10281053

1029-
Issue(7033): Add CSSOM API for CSSContainerRule
1030-
10311054
Issue(6205): Container Queries should have a <code>matchContainer</code> method.
10321055
This will be modeled on {{matchMedia()}} and the {{MediaQueryList}} interface,
10331056
but applied to Elements rather than the Window.
@@ -1063,6 +1086,9 @@ Changes since the 18 August 2022 Working Draft</h3>
10631086

10641087
Significant changes since the <a href="https://www.w3.org/TR/2022/WD-css-contain-3-20220818/">18 August 2022 Working Draft</a> include:
10651088

1089+
* Add the {{CSSContainerRule/containerName}} and
1090+
{{CSSContainerRule/containerQuery}} attributes.
1091+
(<a href="https://github.com/w3c/csswg-drafts/issues/7033">Issue 7033</a>)
10661092
* Correct typo in 'container-type' syntax, to clarify that ''normal'' cannot
10671093
be combined with other values.
10681094
(<a href="https://github.com/w3c/csswg-drafts/issues/7669">Issue 7669</a>)

0 commit comments

Comments
 (0)