Skip to content

[css-conditional-5] Draft spec for scroll-state() #6402 #10798

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 6 commits into from
Sep 4, 2024
Merged

[css-conditional-5] Draft spec for scroll-state() #6402 #10798

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6b08d4a
[css-conditional-5] Draft spec for scroll-state() #6402
lilles Aug 5, 2024
78f5cc8
Fixed some review issues
lilles Sep 2, 2024
c7bda8f
Fixed issues in "Updating Scroll State"
lilles Sep 3, 2024
cb73856
Move definition of "query container"
lilles Sep 3, 2024
9a66863
Talk about scroll-state features instead of scroll-state containers
lilles Sep 3, 2024
1a92414
Re-worded 'overflowing'
lilles Sep 4, 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
Prev Previous commit
Next Next commit
Fixed some review issues
  • Loading branch information
@lilles
lilles committed Sep 2, 2024
commit 78f5cc881947faf26a0db28ea1166fcee7721e8b
87 changes: 56 additions & 31 deletions css-conditional-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,7 @@ Creating Query Containers: the 'container-type' property</h3>

The 'container-type' property establishes the element as a
<dfn export>query container</dfn> for certain types of queries. For size
[=container queries=], that require certain types of containment, elements
[=container queries=], which require certain types of containment, elements
are explicitly made [=query containers=] through this property. For other
types of [=query containers=] any element can be a query container, such as
for [=container style queries=].
Expand Down Expand Up @@ -542,18 +542,18 @@ Creating Query Containers: the 'container-type' property</h3>
</div>

<div class=example>
Containers can also expose state that depend on scroll offset. Here is an
example of how to style a descendant of a sticky positioned element when it
is stuck to the top edge:
Containers can also expose state that depends on scroll offset. This example
styles a descendant of a sticky positioned element when it is stuck to the
top edge:

<pre class=lang-css>
#sticky {
container-type: scroll-state;
position: sticky;
container-type: scroll-state;
position: sticky;
}
@container scroll-state(stuck: top) {
#sticky-child {
background-color: lime;
background-color: lime;
}
}
</pre>
Expand Down Expand Up @@ -1090,17 +1090,22 @@ Style Container Features</h3>
<h3 id="scroll-state-container">
Scroll State Container Features</h3>

A <dfn export>container scroll-state query</dfn> allows to query a container for various
state that depends on scroll position. The ''scroll-state'' [=query container=] can either
be the scroller itself, or an element that is affected by the scroll position of an ancestor
A <dfn export>container scroll-state query</dfn> allows querying a container for
state that depends on scroll position. It is a boolean combination of
individual <dfn>scroll-state features</dfn> (<<scroll-state-feature>>)
that each query a single feature of the [=query container=]. The syntax of a
<dfn><<scroll-state-feature>></dfn> is the same as for a [=media feature=]:
a feature name, a comparator, and a value.

The ''scroll-state'' [=query container=] can either be the scroller itself,
or an element that is affected by the scroll position of an ancestor
[=scroll container's=] [=scrollport=].

<h4 id="updating-scroll-state">
Updating Scroll State</h4>
<div class=note>
Note: This section is subject to change as a result of resolving
<a href="https://github.com/w3c/csswg-drafts/issues/10796">issue #10796</a>
</div>

Issue(10796): This section is subject to change as a result of resolving
the issue of unifying scroll-snapshotting layout state across several specifications.

Scroll state may cause layout cycles since queried scroll state may cause style changes,
which may lead to scroll state changes as a result of layout. The same issue exists for
Expand Down Expand Up @@ -1128,6 +1133,22 @@ Sticky positioning: the '@container/stuck' feature</h4>
''position/sticky'' positioned container is visually shifted to stay inside
the [=sticky view rectangle=] for the given edge. The logical edges map to
physical based on the direction and writing-mode of the [=query container=].
None of the values match if the [=query container=] is not [=sticky positioned=].

It is possible for two values from opposite axes to match at the same time,
but not for opposite edges along the same axis.

<div class=example>
May match:
<pre class="lang-css">
@container scroll-state((stuck: top) and (stuck: left)) { ... }
</pre>

Will never match:
<pre class="lang-css">
@container scroll-state((stuck: left) and (stuck: right)) { ... }
</pre>
</div>

In the boolean context, the query matches if visual shift is applied in any
direction.
Expand All @@ -1147,16 +1168,16 @@ Sticky positioning: the '@container/stuck' feature</h4>
The ''position/sticky'' container is shifted to stay inside the left edge.
<dt><dfn>block-start</dfn>
<dd>
The ''position/sticky'' container is shifted to stay inside the block-start edge.
The ''position/sticky'' container is shifted to stay inside the [=block-start=] edge.
<dt><dfn>inline-start</dfn>
<dd>
The ''position/sticky'' container is shifted to stay inside the inline-start edge.
The ''position/sticky'' container is shifted to stay inside the [=inline-start=] edge.
<dt><dfn>block-end</dfn>
<dd>
The ''position/sticky'' container is shifted to stay inside the block-end edge.
The ''position/sticky'' container is shifted to stay inside the [=block-end=] edge.
<dt><dfn>inline-end</dfn>
<dd>
The ''position/sticky'' container is shifted to stay inside the inline-end edge.
The ''position/sticky'' container is shifted to stay inside the [=inline-end=] edge.
</dl>

<h4 id="snapped">
Expand All @@ -1177,25 +1198,25 @@ Scroll snapping: the '@container/snapped' feature</h4>
<dt><dfn>x</dfn>
<dd>
'@container/snapped' [=container feature=] matches ''x''
if the 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 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 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>
'@container/snapped' [=container feature=] matches ''inline''
if the container is a [=snap target=] for its [=scroll container=]
if the [=query container=] is a [=snap target=] for its [=scroll container=]
in the inline direction of the [=snap container=].
</dl>

<h4 id="overflowing">
Sticky positioning: the '@container/overflowing' feature</h4>
Overflowing: the '@container/overflowing' feature</h4>

<pre class="descdef mq">
Name: overflowing
Expand All @@ -1206,11 +1227,15 @@ Sticky positioning: the '@container/overflowing' feature</h4>

The '@container/overflowing' [=container feature=] queries whether a
[=scroll container=] has [=scrollable overflow=] in the given direction for the
current scroll progress. The logical values map to physical based on the direction
and writing-mode of the [=query container=].
current scroll progress. Content not reachable through user scrolling, like
content overflowing to the left of an ltr container, or a ''overflow/hidden''
container, does not make a query match.

In the boolean context, the query matches if there is scrollable overflow in any
direction.
The logical values map to physical based on the direction and writing-mode of
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>top</dfn>
Expand All @@ -1227,16 +1252,16 @@ Sticky positioning: the '@container/overflowing' feature</h4>
The [=scroll container=] has [=scrollable overflow=] past the left edge.
<dt><dfn>block-start</dfn>
<dd>
The [=scroll container=] has [=scrollable overflow=] past the block-start edge.
The [=scroll container=] has [=scrollable overflow=] past the [=block-start=] edge.
<dt><dfn>inline-start</dfn>
<dd>
The [=scroll container=] has [=scrollable overflow=] past the inline-start edge.
The [=scroll container=] has [=scrollable overflow=] past the [=inline-start=] edge.
<dt><dfn>block-end</dfn>
<dd>
The [=scroll container=] has [=scrollable overflow=] past the block-end edge.
The [=scroll container=] has [=scrollable overflow=] past the [=block-end=] edge.
<dt><dfn>inline-end</dfn>
<dd>
The [=scroll container=] has [=scrollable overflow=] past the inline-end edge.
The [=scroll container=] has [=scrollable overflow=] past the [=inline-end=] edge.
</dl>


Expand Down