[css-view-transitions-1] CSS selector keywords. (original) (raw)

Forking this from #7788 to resolve on the exact keywords used in the selector.

1. Property used on DOM elements to tag them for independent animations: view-transition-name.
2. The pseudo-element which directly originates from the root element and is the ancestor for all container elements. Options are:
   1. html::view-transition
   2. html::view-transition-root
      Proposed Resolution: html::view-transition
3. The pseudo-element which animates the size and position for tagged elements. Options are:
   1. html::view-transition-container(*)
   2. html::view-transition-group(*)
      Proposed Resolution: html::view-transition-group(*)
4. The pseudo-element which adds isolation for blending. Options are:
   1. html::view-transition-image-group(*)
   2. html::view-transition-pair(*)
   3. html::view-transition-effect-group(*)
   4. html::view-transition-images(*)
   5. html::view-transition-set(*)
   6. html::view-transition-image-set(*)
   7. html::view-transition-image-pair(*)
5. The pseudo-element which displays snapshot from the old DOM element. Options are:
   1. html::view-transition-old(*)
      Proposed Resolution: html::view-transition-old(*)
6. The pseudo-element which displays snapshot from the new DOM element. Options are:
   1. html::view-transition-new(*)
      Proposed Resolution: html::view-transition-new(*)

Please comment in case I missed an existing suggestion from #7788 or if you have any other suggestions.

• 1, 5 and 6 have only option which is the proposed resolution.
• 2 has a couple of options but I think we converged on (2.i) so I added that as the proposed resolution.
• 3, 4 need consensus.

Pasting fantasai's comment on 3,4:

• changing ::view-transition-image-group to ::view-transition-pair because it's shorter (and not a hyphenated phrase) and avoids evoking the idea of groups in SVG, which it's not conceptually similar to
• changing ::view-transition-container to ::view-transition-group because it's shorter and evokes the idea of groups in SVG (which create hierarchy in the graphic elements)

The downside of using "pair" is that it'll make it awkward if a future change needs a pseudo-element other than old/new under this element. It's not a pair anymore then. ^_^ But no hard preference there, we don't forsee anything that would add more pseudo-elements under this node right now.

I also didn't follow why the the element adding isolation isn't conceptually similar to SVG groups but the one which mirrors size/position of the DOM element is. @fantasai could you clarify?

Regarding shorter names, the motivation to use view-transition-image-group/view-transition-image-pair instead of view-transition-group/view-transition-pair would be that the latter sounds similar to view-transition-container. The "image" keyword there makes it obvious that it's a pair of replaced elements. We could go with view-transition-image-pair instead of view-transition-image-group.