The requested example has just been merged to the spec - https://drafts.csswg.org/css-overflow-5/#example-87a0a07a.
среда, 2 июля 2025 г. в 17:07:43 UTC+2, Chris Harrelson: > LGTM3 > > On Thu, Jun 26, 2025 at 10:03 AM Jeffrey Yasskin <jyass...@chromium.org> > wrote: > >> +Lola Odelola <lolaodelola+...@gmail.com> and +Florian Scholz >> <flor...@openwebdocs.org> as the chairs of the Docs CG, who'll have a >> better sense of the right answer here. >> >> My guess is that it'll work better in the long run to start with putting >> your explanation into the specification, so that people reading that have >> the context they need to evolve the specification. This will also give >> those future editors a structure in the specification to start their >> documentation before there's a possibility of an MDN page. Then the MDN >> authors are likely to copy that to start their page, but since they're tech >> writers, they'll probably also be able to improve it for a general >> development audience. >> >> Jeffrey >> >> On Thu, Jun 26, 2025 at 3:34 AM Daniil Sakhapov <sakha...@chromium.org> >> wrote: >> >>> Jeffery, I think your suggestion is great! Do you think it would be >>> better to put the explanation on the MDN page for scroll-target-group >>> property? >>> >>> ср, 25 июн. 2025 г. в 15:26, Alex Russell <slightly...@chromium.org>: >>> >>>> LGTM2, contingent on a good resolution of Jeffery's concern. >>>> >>>> Best, >>>> >>>> Alex >>>> >>>> On Wednesday, June 25, 2025 at 8:14:12 AM UTC-7 Jeffrey Yasskin wrote: >>>> >>>>> 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%3DaSaTBfGRQQfhk_i8ARfua%3DTZ5KYhs5jG1mKaURX0o4A%40mail.gmail.com >> >> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CANh-dX%3DaSaTBfGRQQfhk_i8ARfua%3DTZ5KYhs5jG1mKaURX0o4A%40mail.gmail.com?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/eeefb179-39ef-4dc2-b9aa-c3f37259f628n%40chromium.org.
