CSSWG Minutes Telecon (2024-08-21)

View Transitions are one of the crucial superior options CSS has shipped in current occasions. Its title is self-explanatory: transitions between views are potential with simply CSS, even throughout pages of the identical origin! What’s extra fascinating is its subtext, since there isn’t any must create complicated SPA with routing simply to get these eye-catching transitions between pages.

What additionally makes View Transitions superb is how rapidly it has gone from its first public draft again in October 2022 to transport in browsers and even in some manufacturing contexts like Airbnb — one thing that doesn’t occur to each characteristic coming to CSS, so it reveals how rightfully hyped it’s.

That stated, the API remains to be new, so it’s sure to have some edge circumstances or bugs being solved as they arrive. An fascinating approach to sustain with the newest developments about CSS options like View Transitions is straight from the CSS Telecom Minutes (you’ll be able to subscribe to them at W3C.org).

View Transitions have been the first focus on the August 21 assembly, which had a lengthy agenda to handle. It began with a lightweight bug in Chrome concerning the navigation descriptor, utilized in each cross-document view transition to opt-in to a view transition.

@view-transition none;

Presently, the specs outline navigation as an enum sort (a set of predefined sorts), however Blink takes it as a CSSOMString (any string). Whereas this initially was handed as a bug, it’s fascinating to see the dialog it sparked on the GitHub Problem:

Really I feel that is debatable, we don’t at present have at guidelines that use enums in that approach, and often CSSOM doesn’t attempt to be absolutely type-safe on this approach. e.g. if we add new navigation sorts and a few browsers don’t assist them, this is able to interpret them as invalid guidelines slightly than guidelines with empty navigation.

The final assertion could not look thrilling, but it surely opens the potential for new navigation sorts past auto and none, so take into consideration what a unique sort of view transition may do.

After which onto the CSSWG Minutes:

emilio: Is it helpful to distinguish between lacking auto or none?

noamr: Sure, crucial for ahead compat. If one browser provides one other sort that others don’t have but, then we wish to see that there’s a distinction between none or invalid

emilio: However then you definitely get auto habits?

noamr: No, the unknown worth shouldn’t be learn for function of nav. It’s a vt position with out navigation descriptor and no preliminary worth Just like having invalid rule

So in future implementations, an invalid navigation descriptor can be ignored, however precisely how remains to be beneath debate:

ntim: How is it totally different from navigation none?

noamr: Auto vs invalid after which auto vs none. None would supersede auto; it has a that means to not do a nav whereas invalid is a no-op.

ntim: So none cancels the nav from the prev doc?

noamr: Sure

The none has the intent to cancel any view transitions from a earlier doc, whereas an invalid or empty string can be ignored. Ultimately, it resolved to return an empty string if it’s lacking or invalid.

RESOLVED: navigation is a CSSOMString, it returns an empty string when navigation descriptor is lacking or invalid

Onto the subsequent merchandise on the agenda. The dialogue went into the view-transition-group property and whether or not it ought to have an order of priority. To not confuse with the pseudo-element of the identical title (::view-transition-group) the view-transition-group property was resolved to be added someplace sooner or later. As of proper now, the tree of pseudo-elements created by view transitions is flattened:

::view-transition
├─ ::view-transition-group(name-1)
│ └─ ::view-transition-image-pair(name-1)
│ ├─ ::view-transition-old(name-1)
│ └─ ::view-transition-new(name-1)
├─ ::view-transition-group(name-2)
│ └─ ::view-transition-image-pair(name-2)
│ ├─ ::view-transition-old(name-2)
│ └─ ::view-transition-new(name-2)
│ /* and so one… */

Nonetheless, we could wish to nest transition teams into one another for extra complicated transitions, leading to a tree with ::view-transition-group inside others ::view-transition-group, like the next:

::view-transition
├─ ::view-transition-group(container-a)
│ ├─ ::view-transition-group(name-1)
│ └─ ::view-transition-group(name-2)
└─ ::view-transition-group(container-b)
├─ ::view-transition-group(name-1)
└─ ::view-transition-group(name-2)

So the view-transition-group property was born, or to be exact, it will likely be in some unspecified time in the future in timer. It’d look one thing near the next syntax if I’m following alongside appropriately:

view-transition-group: regular | <ident> | nearest | include;

regular is contained by the foundation ::view-transition (present habits).

<ident> can be contained by a component with an identical view-transition-name

nearest can be contained by its nearest ancestor with view-transition-name.

include will include all its descendants with out altering the aspect’s place within the tree

The values appear easy, however they’ll battle with one another. Think about the next nested construction:

A /* view-transition-name: foo */
└─ B /* view-transition-group: include */
└─ C /* view-transition-group: foo */

Right here, B needs to include C, however C explicitly says it needs to be contained by A. So, which wins?

vmpstr: Relating to nesting with view-transition-group, it takes key phrases or ident. Comprise says that all the view-transition descendants are nested. Ident says identical factor but additionally aspect itself will nest on the factor with that ident. Query is what occurs if a component has a view-transition-group with a customized ident and in addition has an ancestor set to include – the place will we nest this? the include one or the one with the ident? noam and I agree that ident ought to in all probability win, appears extra particular.

<khush>: +1

The conversations continued if there must be a include key phrase that wins over <ident>

emilio: Agree that this appears fascinating. Is there any use case for truly imposing the containment? Do we want a robust include? I don’t suppose so?

astearns: Someplace alongside the road of including a brand new key phrase similar to contain-idents?

<fantasai>: “contain-all”

emilio: Yeah, like sth to include all the things however wants a use case

However for now, it was set for <ident> to have extra specificity than include

PROPOSED RESOLUTION: idents take priority over include in view-transition-group

astearns: objections or issues or questions?

<fantasai>: simply as they do for <ident> values. (which additionally apply containment, however solely to ‘regular’ parts)

RESOLVED: idents take priority over include in view-transition-group

Lastly, the primary course of the dialogue: whether or not or not some properties must be captured as kinds as a substitute of as a snapshot. Proper now, view transitions work by taking a snapshot of the “previous” view and transitioning to the “new” web page. Nonetheless, not all the things is baked into the snapshot; some related properties are saved to allow them to be animated extra rigorously.

From the spec:

Nonetheless, properties like mix-blend-mode which outline how the aspect attracts when it’s embedded can’t be utilized to its picture. Such properties are utilized to the aspect’s corresponding ::view-transition-group() pseudo-element, which is supposed to generate a field equal to the aspect.

Briefly, some properties that depend upon the aspect’s container are utilized to the ::view-transition-group slightly than ::view-transition-image-pair(). Since, sooner or later, we may nest teams inside teams, how we seize these properties has much more nuance.

noamr: Greatest problem we wish to talk about right now, how we seize and show nested elements but additionally applies to non-nested view transition parts derived from the nested dialog. After we nest teams, some CSS properties that have been beforehand not that necessary to seize are actually crucial as a result of in any other case it seems damaged. Two teams: tree results like opacity, masks, clip-path, filters, perspective, these apply to complete tree; borders and border-radius as a result of upon getting a hierarchy of teams, and you’ve got overflow then the overflow impacts the origin the place you draw the borders and shadows these additionally paint after backgrounds

noamr: We see three choices.

Change all the things by default and don’t simply seize snapshot however add extra issues that get captured as ?? as a substitute of a flat snapshot (opacity, filter, remodel, bg borders). Will change issues as a result of these kinds are a part of the group however have modified issues earlier than (however that is totally different because it modifications observable computed fashion)

Add new property view-transition-style or view-transition-capture-mode. Fan of the primary because it jogs my memory of transform-style.

To have this new property however give it auto worth. If group incorporates different teams if you get the brand new mode so customers utilizing nesting get the brand new mode however can have a property to vary the habits If folks need the previous crossfade habits they’ll at all times accomplish that by common DOM nesting

Relating to the primary choice about altering how all view transitions seize properties by default:

bramus: Sure, this is able to be breaking, however it will break in a great way. Relating to the title of the property, one of many values proposed is cross-fade, which is a worth I wouldn’t advocate as a result of authors can change the animation, e.g. to scale-up/ scale-down, and so on. I’d recommend a unique title for the property, view-transition-capture-mode: flat | layered

After all, altering how view transitions work is a dilemma to actually take into consideration:

noamr: There’s some sentiment to 1 however I really feel folks want to consider this extra?

astearns: Might resolve on choice 1 and have blink attempt it out to see how a lot breakage there’s and if its manageable then we’re good and are available again to this. Can be resolving one 1 until it’s not potential. I’d slightly not outline a brand new seize mode with out a change

…so the perfect plan of action was to collect extra knowledge and resolve:

khush: After we prototype we’ll discover edge circumstances. We are going to take these again to the WG in that case. Wish to get this proper

noamr: It entails a variety of CSS props. A few of them are captured and never painted, whereas others are painted. Those particularly would all be specified

After some extra dialogue, it was resolved to return again with compat knowledge from browsers, you’ll be able to learn the full minutes at W3C.org. I wager there are a variety of fascinating issues I missed, so I encourage you to learn it.

RESOLVED: Change the seize mode for all view-transitions and specify how every property is affected by this seize mode change

RESOLVED: Describe categorization of properties within the Module Interactions sections of every spec

RESOLVED: Blink will experiment and are available again with modifications wanted if there are compat issues

CSSWG Minutes Telecon (2024-08-21) initially revealed on CSS-Methods, which is a part of the DigitalOcean household. It is best to get the publication.