Notes on Google I/O 2023: CSS Viewport and Animations

After watching a few Google I/O presentations strictly for curiosity’s sake, I proceeded to a few sessions that might have some relevance on near-term project ideas. First up are a few sessions that cover new developments in web browser capabilities. Generally speaking, I expect I’d only use most of these indirectly via libraries, but it’s neat to see what’s possible.

What’s new in web

This was a quick overview of new web development capabilities that, as tracked by Web Platform Baseline, have enough support to become realistic option for deploying in production. The part that caught my attention were CSS viewport units that lets us account for space consumed by browser UI. More details were promised in another session “What’s new in Web UI” so that’s where I went next.

What’s new in Web UI

I got a little more information about CSS viewport units here: not just small (with all browser UI present) and large (if all browser UI were absent) but also dynamic (adjusts as UI pieces moves in and out.) Nice! Related to this front are container queries that layout decisions to be made at a finer-grained level: parent container, instead of entire viewport.

CSS nesting folds a major advantage of Sass into standard CSS. Cascade layers and scoped styles allow fine control over style sheet cascading and avoid collisions in the face of modern web platforms that combine all styles from components and bundle them into a single download.

We’ve always had window.alert() to ask the browser to pop up a modal dialog box, but it’s very crude. Trying to recreate that illusion inside our web page required a lot of nasty DOM hackery. Popovers are still experimental, but it promises all the refinement of HTML under author’s control while letting the browser & operating system handle all the windowing complexity.

A few quick demonstrations of nifty animations were given, with a pointer to another session “Whats new in web animations”.

What’s new in web animations

This presenter opened up with a great manifesto on how things should work: “animations that help users build an accurate mental model of how the interface works, thereby increasing the overall usability.” When it works well, the user would rarely even notice their presence. What we usually notice to our annoyance are zealous overuse of animation getting in our way!

One incoming experimental feature is the View Transitions API for managing CSS animation effects as it applies to elements entering and leaving the markup DOM structure. It caught my attention because this would be a standardized version of what I just saw in Vue with <Transition> and something I’ve found mentioned in Angular Developer Guides as well.

Most of the effects demonstrated here are things I’ve seen online with other websites, but now it can be done strictly with CSS. No JavaScript required, which is great for moving workloads off the main thread.

These are all good things coming down the line for visual layout, but usually I’m more interested in hardware interfacing browser capabilities.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s