I decided to try serving different video using some of the features we use for serving content based on user preferences and accessibility features. I made a video. Then I made alternate versions for assorted media queries. While this would be onerous for some organizations to do for many of their videos, I wanted to at least test both the support and the practicality for teams that can wrangle the budget to give this a shot.

The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the second half of this mini two-part series, Adrian Bece expands on the demos from the first article to demonstrate how the View Transitions API can be used to transition not just elements between two states but the transition between full views and pages in single-page and multi-page applications.

Despite what you might read in some corners of the internet, it’s been possible to vertically centre an element inside a parent for a very long time now. The align-content property from the Box Alignment spec does the job, however browsers require that you make the parent element either a flex or a grid layout. While the property was specified to work in block layout, no browser had implemented it, until now.

Nested theming is the case where the page is styled in one theme but sub-sections of it use another theme. A practical example of nested theming could be a scrolling product page that has discrete sections, some on a light background and some on a dark background, or maybe a rich editor web app that allows users to preview content in different themes.

I think the styling story for Shadow DOM Web Components is not great. I’ve got what seems to me like a simple idea that would help that. What I mean is using a pseudo selector to break through the Shadow DOM and then be able to style inside it, from any CSS on the page. This is not possible right now, and I wish it were.