Skip to content

Commit

Permalink
[css-scroll-snap-2] Drop scroll-start and add issue to :snapped (#10505)
Browse files Browse the repository at this point in the history 
* [css-scroll-snap-2] Drop scroll-start and add issue to :snapped

Towards resolving [6985](#6985 (comment))
this patch removes scroll-start from the spec and notes that :snapped
is being replaced.

* Remove "shorthand" for scroll-start-target

* [css-scroll-snap-2] Put carousel example back into scroll-start spec

---------

Co-authored-by: David Awogbemila <awogbemila@chromium.org>
  • Loading branch information
@DavMila
DavMila and David Awogbemila committed Jul 10, 2024
1 parent e462f14 commit a285f77
Showing 1 changed file with 20 additions and 154 deletions.
174 changes: 20 additions & 154 deletions css-scroll-snap-2/Overview.bs
View file
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 @@ -69,37 +70,27 @@ First Layout {#first-layout}

Motivating Examples {#examples}
===============================

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

A carousel that starts scrolled to the middle image:
<pre class="lang-css">
.carousel {
overflow-inline: auto;
scroll-start: center;
}
.carousel .origin {
scroll-start-target: auto;
}
</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="img3.jpg" class="origin">
&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 +128,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}
-------------------------------------------

Expand Down Expand Up @@ -256,10 +160,9 @@ Initial scroll target</h4>
</div>


<h4 id="scroll-start-target-shorthand">
The scroll-start-target shorthand</h4>
<h4 id="scroll-start-target-propdef">scroll-start-target Property Definition</h4>

<pre class="propdef shorthand">
<pre class="propdef">
Name: scroll-start-target
Value: [ none | auto ]
Initial: ''none''
Expand Down Expand Up @@ -289,7 +192,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 +216,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 +556,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 +602,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.

0 comments on commit a285f77

Please sign in to comment.