Exciting New Features in Safari 16

Ben Moss.
September 14, 2022

Apple has released an OS update. Packaged in with it is the latest version of Safari, 16.

Expected to be released ahead of next month’s macOS 13, Safari 16 is packed with updates, making it one of the most capable browsers available.

Exciting New Features in Safari 16.

For web designers, the significance is the forward momentum in web technologies that enable freer design work and fewer hacks to achieve complex layouts. Little by little, CSS recommendations are being implemented to the point that using JavaScript for layout is rapidly becoming as unnecessary as it is disliked.

Some of this was announced in June in the Safari 16 beta. But a lot has been added in the last couple of months. So here’s what’s new in Safari 16 today.

CSS Container Queries

The most exciting addition to Safari 16 is CSS Container Queries.

It is hard to understate how in-demand this feature has been; if you imagine an edit button on Twitter that gifted you crypto every time you corrected a typo, you’d be getting close to how popular this feature is.

Until now, media queries have detected the whole viewport. And so, if you have an element like a card, for example, that needs to change at smaller viewports, you need to calculate the available space and adapt the element’s design accordingly. Unfortunately, this frequently gets out of sync with edge cases causing more than a few headaches for front-end developers.

Media queries are severely restrictive to modern layout methods like Grid that wrap elements automatically because there is no way to detect how the elements are laid out.

Container Queries solve this by allowing you to define styles based on the size of the actual containing element; if a div is 300px wide, the contents can have one design, and if it’s 400px wide, they can have a different design — all without caring what size the whole viewport is.

This is dangerously close to OOP (Object Orientated Programming) principles and almost elevates CSS to an actual programming language. (All we need is conditional logic, and we’re there.)

The latest versions of Chrome, Edge, and now Safari (including mobile) support CSS Grid. Even discounting the rapid decline of Twitter, this is way more exciting than any edit button.

CSS Subgrid

Speaking of Grid, if you’ve built a site with it (and if you haven’t, where have you been?), you’ll know that matching elements in complex HTML structures often results in nesting grids. Matching those grids requires careful management, CSS variables, or both. With CSS Subgrid, grids can inherit grid definitions from a grid defined higher up the hierarchy.

CSS Subgrid has been supported by Firefox for a while but is not yet part of Chrome or Edge. Until there’s wider support, it’s not a practical solution, and using a fallback negates any benefit of using Subgrid. However, its introduction in Safari will surely herald rapid adoption by Google and Microsoft and moves the web forward considerably.

CSS Subgrid is likely to be a practical solution within 18 months.

AVIF Support

AVIF is an exceptionally compact image format that beats even WebP in many instances. It even allows for sequences, creating what is essentially an animated GIF but smaller, and for bitmaps.

AVIF is already supported by Chrome, with partial support in Firefox. Safari now joins them.

AVIF support is one of the more valuable additions to Safari 16 because you’re probably already serving different images inside a picture element. If so, your Safari 16 users will begin receiving a smaller payload automatically, speeding up your site and boosting UX and SEO.

Enhanced Animation

Safari 16 introduces some significant improvements in animation, but the one that catches the eye is that you can now animate CSS Grid.

Yes, let that sink in. Combine Container Queries and animation. The possibilities for hover states on elements are tantalizing.

Safari 16 also supports CSS Offset Path — known initially as CSS Motion Path — which allows you to animate elements along any defined path. This enables the kind of animated effect that previously needed JavaScript (or Flash!) to accomplish.

Chrome, Edge, and Firefox all support CSS Offset Path; the addition of Safari means it’s now a practical solution that can be deployed in the wild.

Web Inspector Extensions

Announced as part of the beta release, Web Inspector Extensions allow web developers to create extensions for Safari, just as they would for Chrome.

Web Inspector Extensions — or Safari Extensions as they’re destined to be known — can be built in HTML, CSS, and JS, so the learning curve is shallow. It’s a good route into app development for web designers.

Because the underlying technology is the same as other browser extensions, anyone who has made a Chrome, Edge, or Firefox extension will be able to port it to Safari 16+ relatively easily. As a result, there should be a rapid expansion of the available extensions.

Improved Accessibility

Accessibility is key to an effective and inclusive web. Be like Bosch: everybody counts, or nobody counts.

When testing a design for accessibility, emulators don’t cut it. In my experience, Safari has some of the most reliable accessibility settings, especially when it comes to Media Queries like prefers-reduced-movement.

Further gains in this field mean that Safari continues to be an essential tool for QA tests.

Reduced Resets

Finally, I want to throw up my hands to celebrate the reduced number of non-standard CSS appearance settings.

For years we’ve been prefacing our style sheets with elaborate resets like Normalize, designed to undo all the assumptions browser developers make about design and the UI preferences of their engineers.

Safari 16 has reportedly Removed most non-standard CSS appearance values.” How effective this is and how much we can rely on it given the other browsers on the market remains to be seen. However, like many of Safari 16’s changes, it’s a step towards a browser that’s on the developers’ side instead of an obstacle to overcome.

Ben Moss

Ben Moss is Senior Editor at WebdesignerDepot. He’s designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. One of these days he’ll run a sub-4hr marathon. Say hi on Twitter.

Read Next

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…