Skip to content

[css-conditional-5] Add 'none'-keywords to scroll-state() features #10874

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 2 commits into from
Sep 18, 2024
Merged

[css-conditional-5] Add 'none'-keywords to scroll-state() features #10874

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c45185e
[css-conditional-5] Add 'none'-keywords to scroll-state() features
lilles Sep 12, 2024
adef204
Reference the media queries spec for boolean context
lilles Sep 18, 2024
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
31 changes: 18 additions & 13 deletions css-conditional-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -868,6 +868,8 @@ Container Features</h2>
A <dfn export>container feature</dfn>
queries a specific aspect of a [=query container=].

[=Container features=] use the same rules as [=media features=] when evaluating
in a [=boolean context=].

<h3 id="size-container">
Size Container Features</h3>
Expand Down Expand Up @@ -1127,7 +1129,7 @@ Sticky positioning: the '@container/stuck' feature</h4>
<pre class="descdef mq">
Name: stuck
For: @container
Value: top | right | bottom | left | block-start | inline-start | block-end | inline-end
Value: none | top | right | bottom | left | block-start | inline-start | block-end | inline-end
Type: discrete
</pre>

Expand All @@ -1152,10 +1154,10 @@ Sticky positioning: the '@container/stuck' feature</h4>
</pre>
</div>

In the boolean context, the query matches if visual shift is applied in any
direction.

<dl dfn-type=value dfn-for="@container/stuck">
<dt><dfn>none</dfn>
<dd>
The ''position/sticky'' container is not shifted in any direction.
<dt><dfn>top</dfn>
<dd>
The ''position/sticky'' container is shifted to stay inside the top edge.
Expand Down Expand Up @@ -1188,27 +1190,29 @@ Scroll snapping: the '@container/snapped' feature</h4>
<pre class="descdef mq">
Name: snapped
For: @container
Value: x | y | block | inline
Value: none | x | y | block | inline
Type: discrete
</pre>

The '@container/snapped' [=container feature=] queries whether a [=snap target=]
is snapped to its [=snap container=] in the given axis. It matches in the boolean
context if it is snapped in at least one of the directions.
is snapped to its [=snap container=] in the given axis.

<dl dfn-type=value dfn-for="@container/snapped">
<dt><dfn>none</dfn>
<dd>
The [=query container=] is not a [=snap target=].
<dt><dfn>x</dfn>
<dd>
'@container/snapped' [=container feature=] matches ''x''
if the [=query container=] is a horizontal [=snap target=] for its [=scroll container=]
if the [=query container=] is a horizontal [=snap target=] for its [=scroll container=].
<dt><dfn>y</dfn>
<dd>
'@container/snapped' [=container feature=] matches ''y''
if the [=query container=] is a vertical [=snap target=] for its [=scroll container=]
if the [=query container=] is a vertical [=snap target=] for its [=scroll container=].
<dt><dfn>block</dfn>
<dd>
'@container/snapped' [=container feature=] matches ''block''
if the [=query container=] is a [=snap target=] for its [=scroll container=]
if the [=query container=] is a [=snap target=] for its [=scroll container=].
in the block direction of the [=snap container=].
<dt><dfn>inline</dfn>
<dd>
Expand All @@ -1223,7 +1227,7 @@ Overflowing: the '@container/overflowing' feature</h4>
<pre class="descdef mq">
Name: overflowing
For: @container
Value: top | right | bottom | left | block-start | inline-start | block-end | inline-end
Value: none | top | right | bottom | left | block-start | inline-start | block-end | inline-end
Type: discrete
</pre>

Expand All @@ -1237,9 +1241,10 @@ Overflowing: the '@container/overflowing' feature</h4>
the [=query container=]. None of the values match if the container is not a
[=scroll container=].

In the boolean context, the query matches if any of the values match.

<dl dfn-type=value dfn-for="@container/overflowing">
<dt><dfn>none</dfn>
<dd>
The [=scroll container=] does not have [=scrollable overflow=] in any direction.
<dt><dfn>top</dfn>
<dd>
The [=scroll container=] has [=scrollable overflow=] past the top edge.
Expand Down