Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
331155d
[css-snappoints] Adding definition of snap position, and rephrasing i…
ChumpChief Nov 24, 2015
ecdd8ea
[css-snappoints] Adding scroll-snap-area. Included mechanism to spec…
ChumpChief Nov 24, 2015
7eb14dc
[css-snappoints] Adding scroll-snap-padding. Clarified definition of…
ChumpChief Nov 24, 2015
779d3c0
[css-snappoints] Adding scroll-snap-align. Omitting 'edges' value as…
ChumpChief Nov 25, 2015
f85ad4e
[css-snappoints] Copy in overview from Tab/Elika proposal, but making…
ChumpChief Jan 8, 2016
85a7c08
[css-snappoints] Minor editorial changes to overview.
ChumpChief Jan 8, 2016
1b960f8
[css-snappoints] Adding clarification re: visual viewport for snap vi…
ChumpChief Jan 8, 2016
480da86
[css-snappoints] Removing scroll-snap-coordinate and scroll-snap-dest…
ChumpChief Jan 8, 2016
777e1d8
[css-snappoints] Adding in detail of scroll-snap-padding
ChumpChief Jan 8, 2016
acb2116
[css-snappoints] Trying the term 'snap alignment container' over 'sna…
ChumpChief Jan 8, 2016
c5b59e7
[css-snappoints] Adding definition for scroll snap area and tweaking …
ChumpChief Jan 8, 2016
1393efe
[css-snappoints] Minor tweak to description of snap alignment contain…
ChumpChief Jan 8, 2016
f73c3cd
[css-snappoints] Adding an open issue for the pending working group r…
ChumpChief Jan 8, 2016
492a5f2
[css-snappoints] Updating examples, still need to update example figu…
ChumpChief Jan 8, 2016
82527a2
[css-snappoints] Updating example diagrams
ChumpChief Jan 8, 2016
332b95a
[css-snappoints] Changing 'snap points' to 'snap positions' for consi…
ChumpChief Jan 8, 2016
99b03fd
[css-snappoints] Changing src extension to .bs which I think is prefe…
ChumpChief Jan 9, 2016
73e9fb0
[css-snappoints] Update figcaption for example 1
ChumpChief Jan 11, 2016
6350afa
[css-snappoints] Update figcaption for example 2
ChumpChief Jan 11, 2016
f0e6761
[css-snappoints] Updating generated html
ChumpChief Jan 11, 2016
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
[css-snappoints] Removing scroll-snap-coordinate and scroll-snap-dest…
…ination definitions. Updating example markup to use new syntax is still TBD
  • Loading branch information
ChumpChief committed Jan 8, 2016
commit 480da8659d9da705cac07767345597c69be54036
53 changes: 0 additions & 53 deletions css-snappoints/Overview.src.html
Original file line number Diff line number Diff line change
Expand Up @@ -310,59 +310,6 @@ <h2 id="scroll-snap-align">Scroll Snap Align: the 'scroll-snap-align' property</
The scroll offset which aligns the center of this box's scroll snap area with the center of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
</dl>

<h2 id="scroll-snap-destination">Scroll Snap Destination: the 'scroll-snap-destination' property</h2>

The 'scroll-snap-destination' property is used to define the x and y coordinate within the <a>scroll container's</a> visual viewport
which element snap points will align with.

<pre class="propdef">
Name: scroll-snap-destination
Value: <<position>>
Initial: 0px 0px
Applies to: <a>scroll containers</a>
Inherited: no
Percentages: relative to width and height of the padding-box of the <a>scroll container</a>
Media: interactive
Computed value: specified value, with lengths made absolute
Animatable: yes
</pre>

<dl dfn-type="value" dfn-for="scroll-snap-destination">
<dt><dfn><<position>></dfn>
<dd>
Specifies the offset of the snap destination from the start edge of the <a>scroll container's</a> visual viewport. The first value gives the x coordinate of the snap destination, the second value its y coordinate.
</dl>

<h2 id="scroll-snap-coordinate">Scroll Snap Coordinate: the 'scroll-snap-coordinate' property</h2>

The 'scroll-snap-coordinate' property is used to define a coordinate within an element. This coordinate is then associated with the nearest ancestor element which is a <a>scroll container</a> or has a scroll-snap-type that is not "none". If it is associated with a <a>scroll container</a>, then that <a>scroll container</a> is considered to be snapped to that element if its scroll offset is such that the coordinate and destination are aligned. In the case that the element has been transformed, the snap coordinate is also transformed in the same way (such that the snap-point is aligned with the element as-drawn).

<p class="issue">
Consider alternative naming besides "coordinate". Consider naming conventions like in Grid Layout for grouping properties on the container vs. items.
</p>

<pre class="propdef">
Name: scroll-snap-coordinate
Value: none | [ border-box | margin-box ]? <<position>>
Initial: none
Applies to: all elements
Inherited: no
Percentages: refer to the specified element box
Media: interactive
Computed value: specified value, with lengths made absolute
Animatable: yes
</pre>

<dl dfn-type=value dfn-for="scroll-snap-coordinate">
<dt><dfn>none</dfn>
<dd>
Specifies that this element does not contribute a snap point.

<dt><dfn>[ border-box | margin-box ]? <<position>></dfn>
<dd>
Specifies the offset of the snap coordinate from the start edge of the element's specified box. If the box argument is omitted it defaults to border-box.
</dl>

<h2 class=no-num id="acknowledgments">Acknowledgments</h2>

Many thanks to lots of people for their proposals and recommendations, some of which are incorporated into this document.