Would it be possible to put this explanation and example in the specification <https://drafts.csswg.org/css-overflow-5/#scroll-markers>, instead of in an email thread where it'll get lost?
Thanks, Jeffrey On Mon, Jun 23, 2025 at 5:14 AM Daniil Sakhapov <sakha...@chromium.org> wrote: > Sure! > > One example: imagine you're on a blog, and when you open an article, > there's a table of contents. Authors often want that table of contents to > highlight the section the user is currently reading. > > Usually, the algorithm to figure this out involves custom JavaScript. > However, by specifying the *scroll-target-group* property on a wrapper > for the anchor elements that make up the ToC, authors can let the browser > handle calculating the current section instead. This section can then be > styled via the *:target-current* pseudo-class. > > Example: > https://codepen.io/Daniil-Sakhapov-the-sans/pen/GgJwwzL?editors=1100 > (Note: requires Chrome Canary with > chrome://flags/#enable-experimental-web-platform-features enabled). > ------------------------------ > > The other use case is HTML scroll markers for carousels. If the > functionality of *::scroll-marker* isn't quite enough, authors can use > HTML anchor elements and the *scroll-target-group* property to leverage > the richer functionality of standard HTML elements. > среда, 18 июня 2025 г. в 17:26:27 UTC+2, Yoav Weiss: > >> >> >> On Monday, June 16, 2025 at 1:14:29 PM UTC+2 Daniil Sakhapov wrote: >> >> Contact emailssakha...@chromium.org >> >> ExplainerCurrently to create carousel or table of contents patterns >> authors can use ::scroll-marker pseudo elements to create navigation >> elements. As they are pseudo elements they have a number of limitations. >> The scroll-target-group property allows to overcome such limitations by >> making HTML anchor elements 'scroll markers'. By specifying fragment >> identifiers authors have 'scroll target into the view' functionality of >> ::scroll-markers, but don't have the 'tracking of current scroll marker' >> one. With scroll-target-group property, the browser runs an algorithm to >> determine the 'current scroll marker' and authors can style such anchor >> elements with :target-current pseudo class. >> >> >> Apologies, but can you expand a bit on the explainer and outline how you >> would expect web developers to use this and what experiences that would >> create? >> Also, a code example would be very useful. >> >> >> >> Specificationhttps://drafts.csswg.org/css-overflow-5/#scroll-target-group >> >> >> >> Summary >> >> The scroll-target-group property specifies whether the element is a >> scroll marker group container. 'none': The element does not establish a >> scroll marker group container. 'auto': The element establishes a scroll >> marker group container forming a scroll marker group containing all of the >> scroll marker elements for which this is the nearest ancestor scroll marker >> group container. Establishing a scroll marker group container allows for >> anchor HTML elements with fragment identifiers that are inside such a >> container to be HTML equivalent of ::scroll-marker pseudo elements. The >> anchor element whose scroll target (the element its fragment identifier is >> pointing to) is currently in view to be styled via :target-current pseudo >> class. >> >> Blink componentBlink>CSS >> <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> >> >> >> >> TAG review >> General TAG review for scroll navigation control primitives >> https://github.com/w3ctag/design-reviews/issues/1037 >> >> TAG review statusNot applicable >> >> >> >> Risks >> >> Interoperability and Compatibility >> >> None >> >> *Gecko*: No signal (https://github.com/mozilla/ >> standards-positions/issues/1251) >> Related issue https://github.com/mozilla/standards-positions/issues/1161 >> >> *WebKit*: No signal (https://github.com/WebKit/ >> standards-positions/issues/514) >> Related issue https://github.com/WebKit/standards-positions/issues/447 >> >> *Web developers*: Multiple verbal approvals at CSS Day 2025. >> >> *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 >> >> Covered by DevTools >> >> 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 >> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> >> ?Yes >> >> https://wpt.fyi/css/css-overflow/scroll-target-group-001.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-002.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-003.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-004.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-005.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-006.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-007.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-008.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-009.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-010.html >> https://wpt.fyi/css/css-overflow/scroll-target-group-011.html >> >> >> Flag name on about://flagsCSSScrollTargetGroup >> >> Rollout planWill ship enabled for all users >> >> >> >> Requires code in //chrome?False >> >> Tracking bughttps://chromium-review.googlesource.com/c/chromium/ >> src/+/6607668 >> >> Estimated milestonesDevTrial on desktop138DevTrial on Android138 >> 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 Statushttps://chromestatus.com/ >> feature/5189126177161216?gate=5135644355198976 >> >> >> >> This intent message was generated by Chrome Platform Status >> <https://chromestatus.com/>. >> >> -- > You received this message because you are subscribed to the Google Groups > "blink-dev" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to blink-dev+unsubscr...@chromium.org. > To view this discussion visit > https://groups.google.com/a/chromium.org/d/msgid/blink-dev/d9b8de44-9ac3-43bd-8a0e-1f9c552b0074n%40chromium.org > <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/d9b8de44-9ac3-43bd-8a0e-1f9c552b0074n%40chromium.org?utm_medium=email&utm_source=footer> > . > -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CANh-dX%3D%2BB1nxf%2BA3rpTc9xVN2YsvpH3ZL1Za60LWVLtjo4epPw%40mail.gmail.com.
