Re: [csswg-drafts] [css-view-transitions-2] view-transition-name determined by element (#8320)

Agenda+’ing this one as I think it’s ready for discussion at the meeting.

Proposal:

- Introduce `ident()` (from #9141) to dynamically construct idents for use in `view-transition-name` and other properties that accept idents.
- Allow `attr()` to be used in `ident()`

Why not only `attr()`?

- If you only have `attr()` an author would need to give each and every element a unique `[id]` (or whatever attribute they may use). At that point they’re back to “naming each and every element individually”: card is card-1, title is title-1, photo is photo-1, … rinse and repeat for each and every card+title+photo.
- Authors already often give wrapping elements a unique name (e.g. the card wrapper gets a unique `[id]`). With `ident()` authors then use that value from the card on child elements such as the title, photo, etc.
- See https://github.com/w3c/csswg-drafts/issues/8320#issuecomment-2074407580 for an example.

Why `ident()` and not allow setting some “strings” as the value?

- Parsing purposes. See https://github.com/w3c/csswg-drafts/issues/8320#issuecomment-2044637489

Why not `auto`?

- Doesn’t work with MPA
- Doesn’t work with nodes that get replaced in between renders (something frameworks often doe, or authors directly manipulating `innerHTML` on some parent).
- Doesn’t work when transitioning between two different elements (e.g. from the `<h2>` in one state to the `<span>` in the other)
  - See https://github.com/w3c/csswg-drafts/issues/8320#issuecomment-2074407580 for an example.
- Doesn’t allow setting custom animations.
  - For that you would need `view-transition-class` to target all, set a specific `view-transition-name` after all to target just the one.
- If DOM order is used as the counting mechanism this would not work when nodes from a group of siblings get removed as all nodes after the one that got removed get their index adjusted.
- `auto` is a solution for View Transitions only. The proposed `ident()` not only works with `view-transition-name` but also with `scroll-timeline-name`, `anchor-name`, `container-name`, etc.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8320#issuecomment-2085214293 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 30 April 2024 12:35:11 UTC