w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 661 forks source link

[css-view-transitions-2] Allow targeting of the root having an active view-transition of any type #11152

Open bramus opened 3 hours ago

bramus commented 3 hours ago

Right now we have the following selectors to customize the view transition styles in certain cases:

What is missing here is way to target the v-t root when a view-transition using any type is happening. This be useful to provide some default view-transition styles (e.g. when going from page to page) but special case the types.

html:not(html:active-view-transition-type(*)) {
  /* “Regular” v-t styles when no type at all is set */
}

html:active-view-transition-type(togglelightdark) {
  /* togglelightdark-specific vt-styles */
}

html:active-view-transition-type(reorder) {
  /* reorder-specific vt-styles */
}

Suggestion is to allow * in :active-view-transition-type() which would match any type, or to add the functionless :active-view-transition-type pseudo-class selector.

bramus commented 3 hours ago

The alternative is that authors always set a default type using CSS (cross-document) / JS (same-document) when none is to be used, but that seems a bit counterintuitive:

@view-transition {
  navigation: auto;
  types: default;
}
const t = document.startViewTransition({
  update: () => {
    document.documentElement.classList.toggle('vt');
  },
  types: ['default'],
});