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/CAH3Z92-jGXuH3fQt8nxPhXvGuZ58ZFNm4b-W04DcgGZpnaPCjw%40mail.gmail.com.
