Repository navigation
[css-view-transitions-1] CSS selector to differentiate transitions with only old or new images #8057
Description
Filing a separate issue to track the use-case identified in the comment here, pasted below:
I'll note that our suggestion doesn't rely specifically on the specific mapping of class/element syntax, but that provides a good example. Whatever the selector-syntax mapping (@FremyCompany's suggestion of IDs might make more sense), the goal is just to allow compound/complex selectors in the function.
One reason for that might be exposing the hierarchy. The more important goal in my mind was the ability to differentiate what happens in these three instances:
- There is only a
newimage. - There is only an
oldimage. - There are both
oldandnewimages.
The solution mentioned a few times for that is using :only-child/:not(:only-child) on the element in question. I assume that solution is also possible with the current proposal?
html::view-transition-old(*):only-child {
/* this is a default exit animation */
}This could be done with html::view-transition-old(*):only-child but @jakearchibald highlighted that " it's tricky because what does ::before:only-child mean? We might need to allow-list which pseudos can use :only-child."
Activity
jakearchibald commentedon Dec 1, 2022
I think this was resolved in #7085 (comment)
JakeA: would folks be happy with us using :only-child for view transitions?
TabAtkins: As long as it matches intent
TabAtkins: defined as up to two children, and this one says if you have only one
JakeA: But usually it doesn't count pseudos...
JakeA: but I guess if we're appying it to a pseudo
…
TabAtkins: pseudo-elements live in the tree
RESOLVED: Allow pseudo-elements to define additional pseudo-classes they allow to be placed after them.
PR at #8126
cdoublev commentedon Dec 7, 2022
Please forgive me for this aside.
In 3.6.5 Internal structure, Selectors says:
And CSS View Transitions says:
Can I assume that all except
::view-transition-new()and::view-transition-old()have an internal structure? I do not have a good knowledge of CSS View Transitions and it is not easy for me to answer this from reading the above mentioned algorithm.jakearchibald commentedon Dec 7, 2022
You don't have to assume, it's all defined in #8126 😄
(but yes,
::view-transition-newand::view-transition-oldare replaced content, so they never have children)khushalsagar commentedon Jan 12, 2023
Edits landed in #8126.