From f1da859439f8b6e5c9b13b497512df70352e9907 Mon Sep 17 00:00:00 2001 From: "Daniel D. Beck" Date: Tue, 25 Nov 2025 12:31:19 +0100 Subject: [PATCH 1/2] Add `scroll-target-group` --- features/scroll-target-group.yml | 10 ++++++++++ features/scroll-target-group.yml.dist | 13 +++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 features/scroll-target-group.yml create mode 100644 features/scroll-target-group.yml.dist diff --git a/features/scroll-target-group.yml b/features/scroll-target-group.yml new file mode 100644 index 00000000000..cad8e2c8e64 --- /dev/null +++ b/features/scroll-target-group.yml @@ -0,0 +1,10 @@ +name: scroll-target-group +description: > + The `scroll-target-group` CSS property picks an element to be a scroll marker group container, which uses the anchor links within that element as scroll markers. + It's an alternative to the `::scroll-marker-group` pseudo-element, which uses generated elements as scroll markers. +spec: https://drafts.csswg.org/css-overflow-5/#scroll-target-group +group: scrolling +compat_features: + - css.properties.scroll-target-group + - css.properties.scroll-target-group.auto + - css.properties.scroll-target-group.none diff --git a/features/scroll-target-group.yml.dist b/features/scroll-target-group.yml.dist new file mode 100644 index 00000000000..f78e01bcde7 --- /dev/null +++ b/features/scroll-target-group.yml.dist @@ -0,0 +1,13 @@ +# Generated from: scroll-target-group.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + chrome: "140" + chrome_android: "140" + edge: "140" +compat_features: + - css.properties.scroll-target-group + - css.properties.scroll-target-group.auto + - css.properties.scroll-target-group.none From 59c61e22ad842c63642dd12f3415834981a0c767 Mon Sep 17 00:00:00 2001 From: "Daniel D. Beck" Date: Tue, 9 Dec 2025 12:23:46 +0100 Subject: [PATCH 2/2] Add `scroll-marker-targets` feature and `scroll-markers` group --- features/scroll-marker-targets.yml | 8 ++++++++ features/scroll-marker-targets.yml.dist | 22 ++++++++++++++++++++++ features/scroll-markers.yml | 4 ++-- features/scroll-target-group.yml | 7 ++++--- groups/scroll-markers.yml | 7 +++++++ 5 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 features/scroll-marker-targets.yml create mode 100644 features/scroll-marker-targets.yml.dist create mode 100644 groups/scroll-markers.yml diff --git a/features/scroll-marker-targets.yml b/features/scroll-marker-targets.yml new file mode 100644 index 00000000000..f4880ea2777 --- /dev/null +++ b/features/scroll-marker-targets.yml @@ -0,0 +1,8 @@ +name: Scroll marker target pseudo-classes +description: The `:target-current` CSS pseudo-class selects the active scroll marker (as in `::scroll-marker`), while the `:target-after` and `:target-before` pseudo-classes select the inactive markers preceding and following the active scroll marker. +spec: https://drafts.csswg.org/css-overflow-5/#active-before-after-scroll-markers +group: scroll-markers +compat_features: + - css.selectors.target-before + - css.selectors.target-current + - css.selectors.target-after diff --git a/features/scroll-marker-targets.yml.dist b/features/scroll-marker-targets.yml.dist new file mode 100644 index 00000000000..d5d5d787e50 --- /dev/null +++ b/features/scroll-marker-targets.yml.dist @@ -0,0 +1,22 @@ +# Generated from: scroll-marker-targets.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + chrome: "142" + edge: "142" +compat_features: + # baseline: false + # support: + # chrome: "142" + # chrome_android: "142" + # edge: "142" + - css.selectors.target-after + - css.selectors.target-before + + # baseline: false + # support: + # chrome: "135" + # edge: "135" + - css.selectors.target-current diff --git a/features/scroll-markers.yml b/features/scroll-markers.yml index db4a2758c97..b59531652af 100644 --- a/features/scroll-markers.yml +++ b/features/scroll-markers.yml @@ -1,7 +1,7 @@ name: Scroll markers -description: A scroll container can be navigated by activating `::scroll-marker` pseudo-elements which appear in a generated `::scroll-marker-group` pseudo-element, either before or after the scroll container. +description: A scroll marker scrolls a container to a scroll target. The `::scroll-marker` CSS pseudo-element selects a scroll marker in a `::scroll-marker-group` pseudo-element, generated before or after the scroll container. You can use them to navigate and style tables of contents, tab panels, and carousels. spec: https://drafts.csswg.org/css-overflow-5/#scroll-markers -group: scrolling +group: scroll-markers compat_features: - css.selectors.scroll-marker - css.selectors.scroll-marker-group diff --git a/features/scroll-target-group.yml b/features/scroll-target-group.yml index cad8e2c8e64..7ff9c995c0c 100644 --- a/features/scroll-target-group.yml +++ b/features/scroll-target-group.yml @@ -1,9 +1,10 @@ name: scroll-target-group description: > - The `scroll-target-group` CSS property picks an element to be a scroll marker group container, which uses the anchor links within that element as scroll markers. - It's an alternative to the `::scroll-marker-group` pseudo-element, which uses generated elements as scroll markers. + The `scroll-target-group` CSS property sets the container where anchor links act as scroll markers. + Using selectors such as `:target-current`, you can style elements when a target has scrolled into view. + It's an alternative to the `::scroll-marker-group` pseudo-element, which generates scroll markers. spec: https://drafts.csswg.org/css-overflow-5/#scroll-target-group -group: scrolling +group: scroll-markers compat_features: - css.properties.scroll-target-group - css.properties.scroll-target-group.auto diff --git a/groups/scroll-markers.yml b/groups/scroll-markers.yml new file mode 100644 index 00000000000..99facfab7d0 --- /dev/null +++ b/groups/scroll-markers.yml @@ -0,0 +1,7 @@ +# https://drafts.csswg.org/css-overflow-5/#scroll-markers +name: Scroll markers +parent: scrolling +# The collection of things that make up scroll-markers. It's likely that all of +# the items in this group will some day merge into the `scroll-markers` feature, +# but until we have the machinery to represent feature merges, this is a good +# way to find them all.