Intent to Ship: :target-before and :target-after pseudo-classes
Daniil Sakhapov
Contact emails
sakh...@chromium.orgExplainer
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-markersSummary
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>CSSTAG review
NoneTAG review status
PendingRisks
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)?
YesIs this feature fully tested by web-platform-tests?
Yeshttp://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
CSSScrollMarkerTargetBeforeAfterFinch feature name
NoneNon-finch justification
NoneRollout plan
Will ship enabled for all usersRequires code in //chrome?
FalseTracking bug
https://issues.chromium.org/issues/440475008Sample 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
