Skip to content
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.

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

[css-scroll-snap-2] Drop scroll-start and add issue to :snapped #10505

Merged
merged 3 commits into from
Jul 10, 2024
Merged
Changes from 1 commit
Commits
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
179 changes: 13 additions & 166 deletions css-scroll-snap-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@ Introduction {#intro}
<em>This is currently a delta spec over Scroll Snap 1.</em>

Scroll experiences don't always start at the beginning. Interactions with
carousels, swipe controls, and listviews often start somewhere in the middle,
and each require JavaScript to set this position on page load.
By enabling CSS to specify this scroll start position,
both users, page authors and browsers benefit.
carousels, swipe controls, and listviews often intend to begin from some element
which might not be positioned at the beginning of the scroll container.
JavaScript is required to make the scroll container initially scrolled
to that element. By enabling CSS to specify that an element should be
initially scrolled to, both users, page authors and browsers benefit.

In addition to setting an initial scroll position,
In addition to setting an initial scroll target,
developers need insights and events into Scroll Snap.
Events like which element is snapped on which axis,
when the snap event is changing,
Expand All @@ -70,36 +71,6 @@ First Layout {#first-layout}
Motivating Examples {#examples}
===============================

<div class="example">
A carousel that starts in the middle:
Copy link
Contributor

@flackr flackr Jun 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is still a good example, it just requires that we add a class to the middle item in the carousel which sets scroll-start-target. This at least works for the case where the carousel shows one item at a time or when the items are snap center aligned. Can you update the example instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good, done.


<pre class="lang-css">
.carousel {
overflow-inline: auto;
scroll-start: center;
}
</pre>

<pre class="lang-html">
&lt;div class="carousel">
&lt;img src="img1.jpg">
&lt;img src="img2.jpg">
&lt;img src="img3.jpg">
&lt;img src="img4.jpg">
&lt;img src="img5.jpg">
&lt;/div>
</pre>

<!-- <figure>
<img src="images/element_snap_positions.png" alt="">

<figcaption>
The layout of the scroll container’s contents in the example.
The snapport is represented by the red rectangle, and the snap area is represented by the yellow rectangle. Since the scroll-snap-align is “center” in the inline (horizontal) axis, a snap position is established at each scroll position which aligns the X-center of the snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
</figcaption>
</figure> -->
</div>

<div class="example">
A search bar is available when the user scrolls back to the top:

Expand Down Expand Up @@ -137,93 +108,6 @@ Motivating Examples {#examples}
Setting Where Scroll Starts {#properties-on-the-scroll-container}
=================================================================

<!-- BIG TEXT: SCROLL START -->

The 'scroll-start' property {#scroll-start}
-------------------------------------------

<pre class="propdef shorthand">
Name: scroll-start
Value: [ auto | start | end | center | left | right | top | bottom | <<length-percentage [0,∞]>> ]{1,2}
</pre>

This property is a shorthand property that sets all of the scroll-start-* longhands in one declaration.
The first value defines the scroll starting point in the block axis,
the second sets it in the inline axis. If the second value is omitted, it defaults to ''scroll-start/start''. If ''scroll-start-target'' is set on any child, 'scroll-start' is not used, in favor of using the element as the offset.

Values are defined as follows:

<dl dfn-type=value dfn-for="scroll-start, scroll-start-x, scroll-start-y, scroll-start-block, scroll-start-inline">
<dt><dfn>auto</dfn>
<dd>
...

<dt><dfn><<length-percentage [0,∞]>></dfn>
<dd>
...

Negative values are invalid.
Values corresponding to a length greater than the width/height of the scrollport
are valid,
but clamped to the width/height of the scrollport.

<dt><dfn>start</dfn>
<dt><dfn>center</dfn>
<dt><dfn>end</dfn>
<dd>
Equivalent to ''0%'', ''50%'', and ''100%'', respectively.
</dl>

<h4 id="display-none-behavior">
Interaction with ''display: none'' and initial creation</h4>

Same behavior that animations follow with [[#first-layout]].

<h4 id="slow-page-load-behavior">
Slow page loading or document streaming behavior</h4>

TODO

<h4 id="fragment-navigation-behavior">
Interaction with "fragment navigation"</h4>

TODO

If the scrollport has a in-page '':target'' via a URL fragment or a previous scroll position, then 'scroll-start' is unused. Existing target logic should go unchanged. This makes 'scroll-start' a soft request in the scroll position resolution routines.

<h4 id="place-content-behavior">
Interaction with 'place-content'</h4>

TODO

Note: While 'place-content' can make a scroller appear to start in the center
or end, no browser supports it and it appears complicated to resolve.

<h4 id="find-in-page-behavior">
Interaction with "find in page"</h4>

TODO

<h4 id="scroll-snap-container-behavior">
Interaction with "scroll-snap" containers</h4>

This effectively will layout and start scroll at the snapped child, thus negating / cancelling 'scroll-start'. 'scroll-start' will only work if nothing else has effected the scroll position.

<h4 id="nested-scrollers">
Nested scrollers with 'scroll-start'</h4>

Should follow patterns that scroll snap has set.

<h4 id="toggling-display-none">
Interaction when 'display' is toggled</h4>

Same behavior that animations follow with [[#first-layout]].

<h4 id="rtl">
Interaction with RTL and LTR</h4>

Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical.

The 'scroll-start-target' property {#scroll-start-target}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scroll-start-target says it is a shorthand but I think that's no longer true since becoming a single property, right?

Copy link
Contributor Author

@DavMila DavMila Jun 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that's correct. Good catch. I've removed the "shorthand" references.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remnants of scroll-start-target-* longhands are still there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing this out. Created #10554 to remove them.

-------------------------------------------

Expand Down Expand Up @@ -289,7 +173,7 @@ Interaction with 'place-content'</h4>
<h4 id="scroll-start-fragment-navigation">
Post-first layout arrivals</h4>

While the document is being [[html#updating-the-document|updated],
While the document is being [[html#updating-the-document|updated]],
a <a>scroll container's</a> [=initial scroll target=] might arrive
after that <a>scroll container</a> has been laid out.
If this happens,
Expand All @@ -313,6 +197,9 @@ Post-first layout arrivals</h4>
Styling Snapped Items {#styling-snapped}
=============================

Issue: The ':snapped' pseudo-class is being dropped in favor of a
<a href="https://drafts.csswg.org/css-contain-4/scroll_state_explainer.html">container state query</a> approach.

The Snapped-element Pseudo-class: '':snapped'' {#snapped}
-------------------------------------------------------

Expand Down Expand Up @@ -650,47 +537,7 @@ when the scrolling operation ends.
█████ ███▌ █▌ ▐▌ ███▌ █▌ █▌ █▌ █▌ █▌ ▐▌ ████▌
-->

Appendix A: Longhands {#longhands}
==================================

The physical and logical longhands (and their shorthands)
interact as defined in [[!CSS-LOGICAL-1]].

Physical Longhands for 'scroll-start' {#scroll-start-longhands-physical}
----------------------------------------------------------------------

<pre class="propdef">
Name: scroll-start-x, scroll-start-y
Value: auto | start | end | center | <<length-percentage [0,∞]>>
Initial: auto
Applies to: <a>scroll containers</a>
Inherited: no
Logical property group: scroll-start
Percentages: relative to the corresponding axis of the scroll container’s scrollport
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
Animation type: by computed value type
</pre>

...

Flow-relative Longhands for 'scroll-start' {#scroll-start-longhands-logical}
--------------------------------------------------------------------------

<pre class="propdef">
Name: scroll-start-inline, scroll-start-block
Value: auto | start | end | center | <<length-percentage [0,∞]>>
Initial: auto
Applies to: <a>scroll containers</a>
Inherited: no
Logical property group: scroll-start
Percentages: relative to the corresponding axis of the scroll container’s scrollport
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
Animation type: by computed value type
</pre>

...

Appendix B: Event Handlers {#event-handlers}
Appendix A: Event Handlers {#event-handlers}
============================================================

ISSUE: This section should be moved to the HTML event handler
Expand Down Expand Up @@ -736,9 +583,9 @@ Extensions to the <code>GlobalEventHandlers</code> Interface Mixin {#interface-g
Privacy Considerations {#privacy}
======================

TODO
The features in this spec have no known privacy implications.

Security Considerations {#security}
=======================

TODO
The features in this spec have no known security implications.