Skip to content

[css-contain-3] Improve CSSContainerRule #7293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 8, 2022
Merged

[css-contain-3] Improve CSSContainerRule #7293

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 40 additions & 14 deletions css-contain-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,7 @@ Creating Named Containers: the 'container' shorthand</h3>
Container Queries: the ''@container'' rule</h3>

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

<pre class="prod def">
@container [ <<container-name>> ]? <<container-condition>> {
@container <<container-condition>> {
<<stylesheet>>
}
</pre>

where:

<pre class="prod def">
<dfn><<container-condition>></dfn> = [ <<container-name>> ]? <<container-query>>
<dfn><<container-name>></dfn> = <<custom-ident>>
<dfn><<container-condition>></dfn> = not <<query-in-parens>>
<dfn><<container-query>></dfn> = not <<query-in-parens>>
| <<query-in-parens>> [ [ and <<query-in-parens>> ]* | [ or <<query-in-parens>> ]* ]
<dfn><<query-in-parens>></dfn> = ( <<container-condition>> )
<dfn><<query-in-parens>></dfn> = ( <<container-query>> )
| ( <<size-feature>> )
| style( <<style-query>> )
| <<general-enclosed>>

<dfn><<style-query>></dfn> = <<style-condition>> | <<style-feature>>
<dfn><<style-condition>></dfn> = not <<style-in-parens>>
<dfn><<style-query>></dfn> = not <<style-in-parens>>
| <<style-in-parens>> [ [ and <<style-in-parens>> ]* | [ or <<style-in-parens>> ]* ]
<dfn><<style-in-parens>></dfn> = ( <<style-condition>> )
| <<style-feature>>
<dfn><<style-in-parens>></dfn> = ( <<style-query>> )
| ( <<style-feature>> )
| <<general-enclosed>>
</pre>
Expand All @@ -611,13 +612,13 @@ Container Queries: the ''@container'' rule</h3>
is selected from among the element’s ancestor [=query containers=]
that are established as a valid [=query container=]
for all the [=container features=]
in the <<container-condition>>.
in the <<container-query>>.
The optional <<container-name>>
filters the set of [=query containers=] considered
to just those with a matching [=query container name=].

Once an eligible [=query container=] has been selected for an element,
each [=container feature=] in the <<container-condition>>
each [=container feature=] in the <<container-query>>
is evaluated against that [=query container=].
If no ancestor is an eligible [=query container=],
then the [=container query=] is ''unknown'' for that element.
Expand Down Expand Up @@ -1005,16 +1006,40 @@ The <code>CSSContainerRule</code> interface</h3>
<pre class='idl'>
[Exposed=Window]
interface CSSContainerRule : CSSConditionRule {
readonly attribute CSSOMString containerName;
readonly attribute CSSOMString containerQuery;
};
</pre>

<dl class='idl-attributes'>
<dt><code>conditionText</code> of type <code>CSSOMString</code> (CSSContainerRule-specific definition for attribute on CSSConditionRule)
<dd>The <code>conditionText</code> attribute (defined on the <code>CSSConditionRule</code> parent rule),
on getting, must return the condition that was specified,
on getting, must return a value as follows:

<dl class="switch">
<dt data-md>The ''@container'' rule has an associated <<container-name>>
<dd data-md>The result of getting the <code>containerName</code> and
<code>containerQuery</code> attributes, joined by a single whitespace.
<dt data-md>Otherwise
<dd data-md>The result of getting the <code>containerQuery</code> attribute.
</dl>

<dt><code>containerName</code> of type <code>CSSOMString</code>
<dd>The <code>containerName</code> attribute, on getting, must return a value as follows:

<dl class="switch">
<dt data-md>The ''@container'' rule has an associated <<container-name>>
<dd data-md>The result of serializing that <<container-name>>.
<dt data-md>Otherwise
<dd data-md>An empty string.
</dl>

<dt><code>containerQuery</code> of type <code>CSSOMString</code>
<dd>The <code>containerQuery</code> attribute,
on getting, must return the <<container-query>> that was specified,
without any logical simplifications,
so that the returned condition will evaluate to the same result
as the specified condition
so that the returned query will evaluate to the same result
as the specified query
in any conformant implementation of this specification
(including implementations that implement future extensions
allowed by the <<general-enclosed>> extensibility mechanism in this specification).
Expand All @@ -1026,8 +1051,6 @@ The <code>CSSContainerRule</code> interface</h3>
or simplification based on evaluating results) are not allowed.
</dl>

Issue(7033): Add CSSOM API for CSSContainerRule

Issue(6205): Container Queries should have a <code>matchContainer</code> method.
This will be modeled on {{matchMedia()}} and the {{MediaQueryList}} interface,
but applied to Elements rather than the Window.
Expand Down Expand Up @@ -1063,6 +1086,9 @@ Changes since the 18 August 2022 Working Draft</h3>

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

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