diff --git a/css-snappoints/Overview.bs b/css-snappoints/Overview.bs
new file mode 100644
index 00000000000..9c838b43da9
--- /dev/null
+++ b/css-snappoints/Overview.bs
@@ -0,0 +1,317 @@
+
CSS Scroll Snap Points Module Level 1
+
+
+Group: csswg
+Shortname: css-snappoints
+TR: http://www.w3.org/TR/css-snappoints-1/
+Level: 1
+Status: ED
+Work Status: Exploring
+ED: http://dev.w3.org/csswg/css-snappoints/
+Editor: Matt Rakow, Microsoft
+Editor: Jacob Rossi, Microsoft
+Abstract: This module contains features to control panning and scrolling behavior with "snap positions".
+!Issue Tracking: http://wiki.csswg.org/spec/css-snappoints
+Ignored Terms: scroll-snap-positions-*, containing block chain
+
+
+
Introduction
+
+ This section is not normative.
+
+ Popular UX paradigms for scrollable content frequently employ paging through content,
+ or sectioning into logical divisions.
+ This is especially true for touch interactions
+ where it is quicker and easier for users to quickly pan through a flatly-arranged breadth of content
+ rather than delving into a heirarchical structure through tap navigation.
+ For example, it is easier for a user to view many photos in a photo album
+ by panning through a photo slideshow view
+ rather than tapping on individual photos in an album.
+
+ However, given the imprecise nature of scrolling inputs
+ like touch panning and mousewheel scrolling,
+ it is difficult for web developers to guarantee a well-controlled scrolling experience,
+ in particular creating the effect of paging through content.
+ For instance, it is easy for a user to land at an awkward scroll offset
+ which leaves a page partially on-screen when panning.
+
+ To this end, we introduce scroll snap positions
+ which enforce the scroll offsets that a scroll container's visual viewport may end at
+ after a scrolling operation has completed.
+
+
Module interactions
+
+ This module extends the scrolling user interface features defined in [[!CSS21]] section 11.1.
+
+ None of the properties in this module apply to the ''::first-line'' and ''::first-letter'' pseudo-elements.
+
+
Values
+
+ This specification follows the
+ CSS property
+ definition conventions from [[!CSS21]]. Value types not defined in
+ this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
+ Other CSS modules may expand the definitions of these value types: for
+ example [[CSS3VAL]], when combined with this module, expands the
+ definition of the <> value type as used in this specification.
+
+
Motivating Examples
+
+
+ In this example, a series of images arranged in a scroll container
+ are used to build a photo gallery. In this example the scroll container
+ is larger than the photos contained within (such that multiple images may be seen simultaneously), and the image
+ sizes vary. Using mandatory element-based snap
+ positions, scrolling will always complete with an image centered in the scroll container's visual viewport.
+
+
+ img {
+ /* Specifies that the center of each photo
+ should align with the center of the scroll
+ container in the X axis when snapping */
+ scroll-snap-align: center none;
+ }
+ .photoGallery {
+ width: 500px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ white-space: nowrap;
+ /* Requires that the scroll offset always be
+ at a valid snap position when the scrolling
+ operation completes. */
+ scroll-snap-type: mandatory;
+ }
+
+
+
+
+
+
+ The layout of the scroll container's contents in the example.
+ The snap alignment container 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 X axis, a snap position is established at each scroll offset which aligns the X-center of the snap alignment container (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
+
+
+
+
+
+ This example builds a paginated document that aligns each page near to (but not exactly on) the edge of the scroll container.
+ This allows the previous page to "peek" in from above in order to make the user aware that they are not yet at the top of the document.
+ Using proximity snap positions instead of mandatory snap positions allows the user to stop halfway through a page (rather than forcing them
+ to snap one page at a time). However, if a scrolling operation would finish near a snap position, then the scroll will be adjusted to
+ align the page as specified.
+
+
+ .page {
+ /* Defines the top of each page as the
+ edge that should be used for snapping */
+ scroll-snap-align: none start;
+ }
+ .docScroller {
+ width: 500px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ /* Specifies that each element's snap area should
+ align with a 100px offset from the top edge. */
+ scroll-snap-padding: 100px 0 0;
+ /* Encourages scrolling to end at a snap position when the
+ operation completes, if it is near a valid snap position */
+ scroll-snap-type: proximity;
+ }
+
+
+
+
+
+
+ The layout of the scroll container's contents in the example.
+ The snap alignment container is represented by the red rectangle (inset from the top by 100px due to the scroll-snap-padding), and the snap area is represented by the yellow rectangle. Since the scroll-snap-align is "start" in the Y axis, a snap position is established at each scroll offset which aligns the Y-start of the snap alignment container (represented by a red dotted line) with the Y-start of a snap area (represented by a yellow dotted line).
+
+
+
+
+
Overview
+
+ This module introduces control over scroll snap positions,
+ which are scroll positions that produce particular alignments
+ of content within a scrollable viewport.
+ Using the 'scroll-snap-type' property on the relevant scroll container,
+ the author can request a particular bias
+ for the viewport to land on a valid snap position
+ after scrolling operations.
+
+ Valid snap positions can be specified
+ as a particular alignment ('scroll-snap-align')
+ of an element's scroll snap area ('scroll-snap-area', defaulting to its margin box)
+ within the scroll container’s snap alignment container
+ (the rectangle obtained by reducing its visual viewport by its 'scroll-snap-padding').
+ This is conceptually equivalent to specifying the alignment of
+ an alignment subject within an alignment container.
+ A scroll position that satisfies the specified alignment
+ is a valid snap position.
+
+ Snap positions must only affect the nearest ancestor
+ (on the element's containing block chain)
+ scroll container.
+
+
Definitions
+
+
+
scroll container
+
+ An element which provides a scrolling user interface as described in [[!CSS21]], particularly in the section on overflow.
+
+
snap alignment container
+
+ A scroll container's snap alignment container is the rectangle obtained by reducing its visual viewport by its 'scroll-snap-padding'.
+
+
snap area
+
+ An element's snap area is the rectangle obtained by expanding its specified box by its 'scroll-snap-area'.
+
+
snap position
+
+ For a scroll container, a particular value for its scroll offset is a snap position if when scrolled to that offset the visual viewport of the scroll container would align with a descendent element in the manner specified by the scroll snap properties.
+
+
+
Scroll Snap Types: the 'scroll-snap-type' property
+
+ The ''scroll-snap-type'' property defines how strictly a scroll container's visual viewport should rest on snap positions. It intentionally does not specify nor mandate any precise animations or physics used to enforce those snap position; this is left up to the user agent.
+
+
+ Open issue on whether to enhance the scroll-snap-type property for specifying the axis or adding a second property. We have resolved that this functionality be added once the issue is resolved.
+
+
+
+ Name: scroll-snap-type
+ Value: none | mandatory | proximity
+ Initial: none
+ Applies to: all elements
+ Inherited: no
+ Percentages: n/a
+ Media: interactive
+ Computed value: specified value
+ Animatable: no
+
+
+
+
none
+
+ The visual viewport of this scroll container must ignore snap positions.
+
+
mandatory
+
+ The visual viewport of this scroll container is guaranteed to rest on a snap position when there are no active scrolling operations. That is, it must come to rest on a snap position at the termination of a scroll, if a valid, reachable snap position exists. If no valid, reachable snap position exists then no snapping occurs. If the content changes such that the visual viewport would no longer rest on a snap position (e.g. content is added, moved, deleted, resized), the scroll offset must be modified to maintain this guarantee.
+
+
proximity
+
+ The visual viewport of this scroll container may come to rest on a snap position at the termination of a scroll at the discretion of the UA given the parameters of the scroll. If the content changes such that the visual viewport would no longer rest on a snap position (e.g. content is added, moved, deleted, resized), the scroll offset may be modified to maintain this guarantee.
+
+
+
Scroll Snap Padding: the 'scroll-snap-padding' property
+
+ The 'scroll-snap-padding' property defines the snap alignment container, a region inset from the visual viewport of a scroll container used in calculating its snap positions. The snap alignment container is used as the alignment container when calculating valid snap positions.
+
+
+ Name: scroll-snap-padding
+ Value: <>{1,4}
+ Initial: 0
+ Applies to: scroll containers
+ Inherited: no
+ Percentages: relative to the scroll container's visual viewport
+ Media: interactive
+ Computed value: specified value, with lengths made absolute
+ Animatable: yes
+
+
+
+
<>{1,4}
+
+ Specifies the region inset from the visual viewport. Values are interpreted as for 'padding', and specify inward offsets from each edge of the visual viewport.
+
+
+ This property is a shorthand property that sets all of the 'scroll-snap-padding-*' longhands in one declaration.
+
+
Scroll Snap Area: the 'scroll-snap-area' property
+
+ The 'scroll-snap-area' property defines a region for an element used in calculating snap positions for its ancestor scroll container.
+
+
+ Name: scroll-snap-area
+ Value: [ border-box | margin-box ]? <>{1,4}
+ Initial: 0
+ Applies to: all elements
+ Inherited: no
+ Percentages: relative to the specified element box
+ Media: interactive
+ Computed value: specified value, with lengths made absolute
+ Animatable: yes
+
+
+
+
[ border-box | margin-box ]? <>{1,4}
+
+ Specifies the outset of the element's snap area from the axis-aligned bounding box of the transformed specified box, in the scroll container's coordinate space. Outsets are applied to this bounding box, not the specified box. If the box argument is omitted it defaults to border-box.
+
+ Note: This ensures that the scroll snap area is always rectangular and axis-aligned to the scroll container's coordinate space.
+
+
+
Scroll Snap Align: the 'scroll-snap-align' property
+
+ The 'scroll-snap-align' property specifies how a scroll container's region specified by 'scroll-snap-padding' should align with descendent elements' scroll snap area. The two values specify the snapping behavior in the x and y axes, respectively. If only one value is specified, the second value defaults to the same value.
+
+
+ Should this be x/y axes, or inline/block? Starting with x/y axes for consistency with padding/area, otherwise a writing mode change would result in a axis mismatch (since padding is physical by default).
+
+
+
+ Name: scroll-snap-align
+ Value: [ none | start | end | center ]{1,2}
+ Initial: none
+ Applies to: all elements
+ Inherited: no
+ Percentages: n/a
+ Media: interactive
+ Computed value: two keywords
+ Animatable: no
+
+
+
+
none
+
+ This box does not define a snap position in the specified axis.
+
+
start
+
+ The scroll offset which aligns the start edge of this box's scroll snap area with the start edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a snap position in that axis.
+
+
end
+
+ The scroll offset which aligns the end edge of this box's scroll snap area with the end edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a snap position in that axis.
+
+
center
+
+ 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 snap position in that axis.
+
+
+
Acknowledgments
+
+ Many thanks to lots of people for their proposals and recommendations, some of which are incorporated into this document.
diff --git a/css-snappoints/Overview.html b/css-snappoints/Overview.html
index dbb9bf13c5e..55968b5eb86 100644
--- a/css-snappoints/Overview.html
+++ b/css-snappoints/Overview.html
@@ -3,6 +3,7 @@
CSS Scroll Snap Points Module Level 1
+
@@ -55,7 +56,7 @@
This module contains features to control panning and scrolling behavior with "snap points".
+
This module contains features to control panning and scrolling behavior with "snap positions".
CSS is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.
@@ -115,19 +116,25 @@
To this end, we introduce scroll snap positions
which enforce the scroll offsets that a scroll container’s visual viewport may end at
after a scrolling operation has completed.
1.1. Module interactions
@@ -176,25 +183,24 @@
1.2
example [CSS3VAL], when combined with this module, expands the
definition of the <length> value type as used in this specification.
2. Motivating Examples
-
- In this example, a series of images arranged in a scroll container are used to build a photo gallery. In this example the scroll container is larger than the photos contained within (such that multiple images may be seen simultaneously), and the image
+
+ In this example, a series of images arranged in a scroll container are used to build a photo gallery. In this example the scroll container is larger than the photos contained within (such that multiple images may be seen simultaneously), and the image
sizes vary. Using mandatory element-based snap
- points, scrolling will always complete with an image centered in the scroll container’s visual viewport.
+ positions, scrolling will always complete with an image centered in the scroll container’s visual viewport.
img {
- /* Defines the center of each photo as the
- coordinate that should be used for snapping */
- scroll-snap-coordinate: 50% 50%;
+ /* Specifies that the center of each photo
+ should align with the center of the scroll
+ container in the X axis when snapping */
+ scroll-snap-align: center none;
}
.photoGallery {
width: 500px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
- /* Specifies that each element’s snap coordinate should
- align with the center of the scroll container */
- scroll-snap-destination: 50% 50%;
- /* Requires that scrolling always end at a snap point
- when the operation completes. */
+ /* Requires that the scroll offset always be
+ at a valid snap position when the scrolling
+ operation completes. */
scroll-snap-type: mandatory;
}
@@ -207,35 +213,31 @@
2.
</div>
-
+ The layout of the scroll container’s contents in the example.
- The snap-destination is horizontally and vertically centered within the scroll container’s visual viewport
- (represented by a red X),
- and each element has its snap coordinate horizontally and vertically centered within the element
- (represented by yellow plus signs).
+ The snap alignment container 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 X axis, a snap position is established at each scroll offset which aligns the X-center of the snap alignment container (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
-
- This example builds a paginated document that aligns each page near to (but not exactly on) the edge of the scroll container.
+
+ This example builds a paginated document that aligns each page near to (but not exactly on) the edge of the scroll container.
This allows the previous page to "peek" in from above in order to make the user aware that they are not yet at the top of the document.
- Using proximity snap points instead of mandatory snap points allows the user to stop halfway through a page (rather than forcing them
- to snap one page at a time). However, if a scrolling operation would finish near a snap point, then the scroll will be adjusted to
+ Using proximity snap positions instead of mandatory snap positions allows the user to stop halfway through a page (rather than forcing them
+ to snap one page at a time). However, if a scrolling operation would finish near a snap position, then the scroll will be adjusted to
align the page as specified.
.page {
- /* Defines the top center of each page as the
- coordinate that should be used for snapping */
- scroll-snap-coordinate: 50% 0;
+ /* Defines the top of each page as the
+ edge that should be used for snapping */
+ scroll-snap-align: none start;
}
.docScroller {
width: 500px;
overflow-x: hidden;
overflow-y: auto;
- /* Specifies that each element’s snap coordinate should
- align with the center of the scroll container, offset
- a short distance from the top edge. */
- scroll-snap-destination: 50% 100px;
- /* Encourages scrolling to end at a snap point when the
- operation completes, if it is near a snap point */
+ /* Specifies that each element’s snap area should
+ align with a 100px offset from the top edge. */
+ scroll-snap-padding: 100px 0 0;
+ /* Encourages scrolling to end at a snap position when the
+ operation completes, if it is near a valid snap position */
scroll-snap-type: proximity;
}
@@ -247,21 +249,42 @@
2.
</div>
-
+ The layout of the scroll container’s contents in the example.
- The snap-destination is horizontally centered and offset 100px from the top edge with respect to the scroll container’s visual viewport
- (represented by a red X),
- and each element has its snap coordinate horizontally centered and top-aligned with respect to the element
- (represented by yellow plus signs).
+ The snap alignment container is represented by the red rectangle (inset from the top by 100px due to the scroll-snap-padding), and the snap area is represented by the yellow rectangle. Since the scroll-snap-align is "start" in the Y axis, a snap position is established at each scroll offset which aligns the Y-start of the snap alignment container (represented by a red dotted line) with the Y-start of a snap area (represented by a yellow dotted line).
-
3. Definitions
+
3. Overview
+
This module introduces control over scroll snap positions,
+ which are scroll positions that produce particular alignments
+ of content within a scrollable viewport.
+ Using the scroll-snap-type property on the relevant scroll container,
+ the author can request a particular bias
+ for the viewport to land on a valid snap position after scrolling operations.
An element which provides a scrolling user interface as described in [CSS21], particularly in the section on overflow.
+
snap alignment container
+
A scroll container’s snap alignment container is the rectangle obtained by reducing its visual viewport by its scroll-snap-padding.
+
snap area
+
An element’s snap area is the rectangle obtained by expanding its specified box by its scroll-snap-area.
+
snap position
+
For a scroll container, a particular value for its scroll offset is a snap position if when scrolled to that offset the visual viewport of the scroll container would align with a descendent element in the manner specified by the scroll snap properties.
The scroll-snap-type property is used to define how strictly snap points are enforced on the scroll container, if any are present. It defines how and when snap points are enforced on the visual viewport of the scroll container it is applied to in order to adjust scroll offset. It intentionally does not specify nor mandate any precise animations or physics used to enforce those snap points; this is left up to the user agent.
The scroll-snap-type property defines how strictly a scroll container’s visual viewport should rest on snap positions. It intentionally does not specify nor mandate any precise animations or physics used to enforce those snap position; this is left up to the user agent.
+
Open issue on whether to enhance the scroll-snap-type property for specifying the axis or adding a second property. We have resolved that this functionality be added once the issue is resolved.
@@ -294,37 +317,34 @@
none
-
The visual viewport of this scroll container must ignore snap points, if any, when scrolled.
+
The visual viewport of this scroll container must ignore snap positions.
mandatory
-
The visual viewport of this scroll container is guaranteed to rest on a snap point when there are no active scrolling operations. That is, it must come to rest on a snap point at the termination of a scroll, if a valid, reachable snap point exists (if no valid, reachable snap point exists then no snapping occurs). If the content changes such that the visual viewport would no longer rest on a snap point (e.g. content is added, moved, deleted, resized), the scroll offset must be modified to maintain this guarantee.
+
The visual viewport of this scroll container is guaranteed to rest on a snap position when there are no active scrolling operations. That is, it must come to rest on a snap position at the termination of a scroll, if a valid, reachable snap position exists. If no valid, reachable snap position exists then no snapping occurs. If the content changes such that the visual viewport would no longer rest on a snap position (e.g. content is added, moved, deleted, resized), the scroll offset must be modified to maintain this guarantee.
proximity
-
The visual viewport of this scroll container may come to rest on a snap point at the termination of a scroll at the discretion of the UA given the parameters of the scroll. If the content changes such that the visual viewport would no longer rest on a snap point (e.g. content is added, moved, deleted, resized), the scroll offset may be modified to maintain this guarantee.
+
The visual viewport of this scroll container may come to rest on a snap position at the termination of a scroll at the discretion of the UA given the parameters of the scroll. If the content changes such that the visual viewport would no longer rest on a snap position (e.g. content is added, moved, deleted, resized), the scroll offset may be modified to maintain this guarantee.
-
Describe the guarantee as an invariant for better clarity. Include edge case behavior such as mandatory snap points when there is no satisfiable snap point.
-
Should there be a way to specify that either end of the scrollable content should have a snap point?
The scroll-snap-destination property is used to define the x and y coordinate within the scroll container’s visual viewport
- which element snap points will align with.
Specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport. The first value gives the x coordinate of the snap destination, the second value its y coordinate.
+
Specifies the region inset from the visual viewport. Values are interpreted as for padding, and specify inward offsets from each edge of the visual viewport.
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 scroll container or has a scroll-snap-type that is not "none". If it is associated with a scroll container, then that scroll container 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).
-
Consider alternative naming besides "coordinate". Consider naming conventions like in Grid Layout for grouping properties on the container vs. items.
-
+
This property is a shorthand property that sets all of the scroll-snap-padding-* longhands in one declaration.
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.
+
+ Specifies the outset of the element’s snap area from the axis-aligned bounding box of the transformed specified box, in the scroll container’s coordinate space. Outsets are applied to this bounding box, not the specified box. If the box argument is omitted it defaults to border-box.
+
Note: This ensures that the scroll snap area is always rectangular and axis-aligned to the scroll container’s coordinate space.
The scroll-snap-align property specifies how a scroll container’s region specified by scroll-snap-padding should align with descendent elements' scroll snap area. The two values specify the snapping behavior in the x and y axes, respectively. If only one value is specified, the second value defaults to the same value.
+
Should this be x/y axes, or inline/block? Starting with x/y axes for consistency with padding/area, otherwise a writing mode change would result in a axis mismatch (since padding is physical by default).
This box does not define a snap position in the specified axis.
+
start
+
The scroll offset which aligns the start edge of this box’s scroll snap area with the start edge of its ancestor scroll container’s region defined by scroll-snap-padding in the specified axis is a snap position in that axis.
+
end
+
The scroll offset which aligns the end edge of this box’s scroll snap area with the end edge of its ancestor scroll container’s region defined by scroll-snap-padding in the specified axis is a snap position in that axis.
+
center
+
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 snap position in that axis.
Acknowledgments
Many thanks to lots of people for their proposals and recommendations, some of which are incorporated into this document.
Conformance
-
Document conventions
+
Document conventions
Conformance requirements are expressed with a combination of
- descriptive assertions and RFC 2119 terminology. The key words "MUST",
- "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
- "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
- document are to be interpreted as described in RFC 2119.
- However, for readability, these words do not appear in all uppercase
- letters in this specification.
+ descriptive assertions and RFC 2119 terminology. The key words "MUST",
+ "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
+ "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
+ document are to be interpreted as described in RFC 2119.
+ However, for readability, these words do not appear in all uppercase
+ letters in this specification.
All of the text of this specification is normative except sections
- explicitly marked as non-normative, examples, and notes. [RFC2119]
+ explicitly marked as non-normative, examples, and notes. [RFC2119]
Examples in this specification are introduced with the words "for example"
- or are set apart from the normative text with class="example",
- like this:
-
-
-
This is an example of an informative example.
+ or are set apart from the normative text with class="example",
+ like this:
+
+
+
This is an example of an informative example.
Informative notes begin with the word "Note" and are set apart from the
- normative text with class="note", like this:
-
Note, this is an informative note.
+ normative text with class="note", like this:
+
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
- set apart from other normative text with <strong class="advisement">, like
- this: UAs MUST provide an accessible alternative.
-
Conformance classes
+ set apart from other normative text with <strong class="advisement">, like
+ this: UAs MUST provide an accessible alternative.
+
Conformance classes
Conformance to this specification
- is defined for three conformance classes:
A style sheet is conformant to this specification
- if all of its statements that use syntax defined in this module are valid
- according to the generic CSS grammar and the individual grammars of each
- feature defined in this module.
+ if all of its statements that use syntax defined in this module are valid
+ according to the generic CSS grammar and the individual grammars of each
+ feature defined in this module.
A renderer is conformant to this specification
- if, in addition to interpreting the style sheet as defined by the
- appropriate specifications, it supports all the features defined
- by this specification by parsing them correctly
- and rendering the document accordingly. However, the inability of a
- UA to correctly render a document due to limitations of the device
- does not make the UA non-conformant. (For example, a UA is not
- required to render color on a monochrome monitor.)
+ if, in addition to interpreting the style sheet as defined by the
+ appropriate specifications, it supports all the features defined
+ by this specification by parsing them correctly
+ and rendering the document accordingly. However, the inability of a
+ UA to correctly render a document due to limitations of the device
+ does not make the UA non-conformant. (For example, a UA is not
+ required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
- if it writes style sheets that are syntactically correct according to the
- generic CSS grammar and the individual grammars of each feature in
- this module, and meet all other conformance requirements of style sheets
- as described in this module.
-
Partial implementations
-
So that authors can exploit the forward-compatible parsing rules to
- assign fallback values, CSS renderers must treat as invalid (and ignore
- as appropriate) any at-rules, properties, property values, keywords,
- and other syntactic constructs for which they have no usable level of
- support. In particular, user agents must not selectively
- ignore unsupported component values and honor supported values in a single
- multi-value property declaration: if any value is considered invalid
- (as unsupported values must be), CSS requires that the entire declaration
- be ignored.
-
Experimental implementations
-
To avoid clashes with future CSS features, the CSS2.1 specification
- reserves a prefixed
- syntax for proprietary and experimental extensions to CSS.
-
Prior to a specification reaching the Candidate Recommendation stage
- in the W3C process, all implementations of a CSS feature are considered
- experimental. The CSS Working Group recommends that implementations
- use a vendor-prefixed syntax for such features, including those in
- W3C Working Drafts. This avoids incompatibilities with future changes
- in the draft.
-
Non-experimental implementations
+ if it writes style sheets that are syntactically correct according to the
+ generic CSS grammar and the individual grammars of each feature in
+ this module, and meet all other conformance requirements of style sheets
+ as described in this module.
+
Requirements for Responsible Implementation of CSS
+
The following sections define several conformance requirements
+ for implementing CSS responsibly,
+ in a way that promotes interoperability in the present and future.
+
Partial Implementations
+
So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid
+ (and ignore as appropriate)
+ any at-rules, properties, property values, keywords, and other syntactic constructs
+ for which they have no usable level of support.
+ In particular, user agents must not selectively ignore
+ unsupported property values and honor supported values in a single multi-value property declaration:
+ if any value is considered invalid (as unsupported values must be),
+ CSS requires that the entire declaration be ignored.
+
Implementations of Unstable and Proprietary Features
Once a specification reaches the Candidate Recommendation stage,
- non-experimental implementations are possible, and implementors should
- release an unprefixed implementation of any CR-level feature they
- can demonstrate to be correctly implemented according to spec.
+ implementers should release an unprefixed implementation
+ of any CR-level feature they can demonstrate
+ to be correctly implemented according to spec,
+ and should avoid exposing a prefixed variant of that feature.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
@@ -473,27 +533,37 @@
Describe the guarantee as an invariant for better clarity. Include edge case behavior such as mandatory snap points when there is no satisfiable snap point. ↵
-
Should there be a way to specify that either end of the scrollable content should have a snap point? ↵
-
Consider alternative naming besides "coordinate". Consider naming conventions like in Grid Layout for grouping properties on the container vs. items. ↵
+
Open issue on whether to enhance the scroll-snap-type property for specifying the axis or adding a second property. We have resolved that this functionality be added once the issue is resolved. ↵
+
Should this be x/y axes, or inline/block? Starting with x/y axes for consistency with padding/area, otherwise a writing mode change would result in a axis mismatch (since padding is physical by default). ↵
+
+ 
+
+ 
+ 
+