Intent to Ship: :target-before and :target-after pseudo-classes

[Daniil Sakhapov]

Contact emails

sakh...@chromium.org

Explainer

Being able to select scroll markers before/after the target one allows to e.g. highlight the progress of the scroller by styling the already viewed scroll markers.

Specification

https://drafts.csswg.org/css-overflow-5/#active-before-after-scroll-markers

Summary

These pseudo-classes match scroll markers that are, respectively, before or after the active marker (the one matching :target-current) within the same scroll marker group, as determined by flat tree order: * :target-before matches all scroll markers that precede the active marker in the flat tree order within the group. * :target-after matches all scroll markers that follow the active marker in the flat tree order within the group.

Blink component

Blink>CSS

TAG review

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1291) Overall Carousel proposal: https://github.com/mozilla/standards-positions/issues/1161

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/544) Overall Carousel proposal: https://github.com/WebKit/standards-positions/issues/447

Web developers: Strongly positive The feature has been requested by the early adopters of the CSS Carousel and other authors in various discussions.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

http://wpt.fyi/css/css-overflow/html-scroll-marker-target-before-after.html http://wpt.fyi/css/css-overflow/scroll-marker-target-before-after.html

Flag name on about://flags

CSSScrollMarkerTargetBeforeAfter

Finch feature name

None

Non-finch justification

None

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/440475008

Sample links

https://drafts.csswg.org/css-overflow-5/#example-cf830461

Estimated milestones

DevTrial on desktop	141
DevTrial on Android	141

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5120827674722304?gate=5190715919433728

This intent message was generated by Chrome Platform Status.