Skip to content

Add CSS <timeline-range-name>#29683

Open
dletorey wants to merge 8 commits into
mdn:mainfrom
dletorey:43871-timeline-range-name
Open

Add CSS <timeline-range-name>#29683
dletorey wants to merge 8 commits into
mdn:mainfrom
dletorey:43871-timeline-range-name

Conversation

@dletorey
Copy link
Copy Markdown
Contributor

@dletorey dletorey commented May 15, 2026

Summary

  • Added <timeline-range-name> CSS type data
  • Added the scroll value for <timeline-range-name>

Test results and supporting details

  • Firefox, with flag layout.css.scroll-driven-animations.enabled ste to true:
    • Firefox Beta 151
    • Firefox Developer Edition 151
    • Firefox Nightly 152 (without flag)
  • Other browsers:
    • Chrome 147
    • Edge 148
    • Safari 26.5
    • Opera 146

Related issues

@github-actions github-actions Bot added the data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label May 15, 2026
@github-actions github-actions Bot added the size:m [PR only] 25-100 LoC changed label May 15, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 15, 2026

Tip: Review these changes grouped by change (recommended for most PRs), or grouped by feature (for large PRs).

Comment on lines +17 to +23
"flags": [
{
"type": "preference",
"name": "layout.css.scroll-driven-animations.enabled",
"value_to_set": "true"
}
],
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be enabled by default in Nightly?

Suggested change
"flags": [
{
"type": "preference",
"name": "layout.css.scroll-driven-animations.enabled",
"value_to_set": "true"
}
],

"spec_url": "https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges",
"support": {
"chrome": {
"version_added": "115"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did you determine Chrome 115?

"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "26"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did you determine Safari 26?

"spec_url": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-scroll",
"support": {
"chrome": {
"version_added": "147"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did you determine Chrome 147?

"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "26.5"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did you determine Safari 26.5?

@caugner caugner changed the title 43871 timeline range name Add CSS <timeline-range-name> May 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS size:m [PR only] 25-100 LoC changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants