Apple has released an OS update. Packed 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.
For web designers, the importance of the forward momentum in web technologies that enable cheaper design work and fewer hacks to achieve complex layouts. Little by little, CSS recommendations are being implemented to the point where it’s becoming unnecessary and disliked to set JavaScript.
Some of this was announced in June in the Safari 16 beta. But a lot has been added in the last few 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’s hard to underestimate the popularity of this feature; If you imagine an edit button on Twitter that gave you encryption every time you corrected a typo, you would come close to how popular this feature is.
So far, media inquiries have uncovered the entire scene. And so, if you have an element like a card, for example, that needs to be resized at smaller view points, you need to calculate the available space and adapt the design of the element accordingly. Unfortunately, this often gets out of sync with edge cases and causes more than a few headaches for front-end developers.
Media queries are highly restricted 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 solves this by allowing you to define styles based on the actual size of the 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 the overall view size is.
This is very close to OOP (Object Oriented Programming) principles and almost elevates CSS to an actual programming language. (Just 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 far more exciting than any edit button.
CSS Subnet
Speaking of Grids, if you’ve built a site with it (and if not, where have you been?), you’ll know that elements in complex HTML structures often result in nested grids. Matching those grids requires careful management, CSS variables, or both. With CSS Subgrid, grids can inherit grid definitions from a grid defined higher in the hierarchy.
CSS Subgrid has been supported by Firefox for a while but is not yet part of Chrome or Edge. Until there is wider support, it is not a practical solution, and Subgrid cannot be exploited using a backhaul. However, its introduction in Safari will certainly indicate a rapid adoption by Google and Microsoft and will move the web forward greatly.
CSS Subgrid is likely to be a practical solution within 18 months.
AVIF support
AVIF is an extremely compact image format that even outperforms WebP in many cases. It even allows for sequences, which essentially creates an animated GIF but smaller, and for bitmaps.
Chrome already supports AVIF, with partial support in Firefox. Safari now joins them.
AVIF support is one of the most valuable additions to Safari 16 because you’re probably already serving multiple images inside a picture element. If so, your Safari 16 users will automatically start receiving less payload, making your site faster and boosting UX and SEO.
Improved Animation
Safari 16 introduces some significant improvements to animation, but the most eye-catching feature is that you can now animate a CSS Grid.
Yes, let that in. Combine Questions Container and animation. The possibilities for anomalous states on features are fading.
Safari 16 also supports CSS Offset Path – originally called CSS Motion Path – which allows you to animate elements along any defined path. This allows the kind of animation effect that previously required JavaScript (or Flash!) to be accomplished.
Chrome, Edge, and Firefox all support CSS Offset Path; Adding Safari means it’s now a practical solution that can be deployed in the wild.
Web Inspector Extension
Announced as part of the beta release, Web Inspector Extensions allows web developers to create extensions for Safari, just as they would for Chrome.
Web Inspector Extensions – or Safari Extensions as they are called – can be built in HTML, CSS, and JS, so the learning curve is shallow. It is a good way to develop apps 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 available extensions.
Improved Accessibility
Accessibility is key to an effective and inclusive web. Be like Bosch: everyone counts, or no one counts.
When testing a design for accessibility, imitators don’t cut it. In my experience, Safari has some of the most reliable accessibility settings, especially when it comes to Media Queries as it prefers reduced motion.
Further gains in this area mean that Safari continues to be an essential tool for QA tests.
Reset Reduced
Finally, I want to throw my hands up to celebrate the reduced number of non-standard CSS appearance settings.
For years we’ve been providing our stylesheets with elaborate overhauls like Normalization, designed to undo all the assumptions browser developers make about their engineers’ UI design and choices.
Safari 16 is reported to have “Removed most of the non-standard CSS appearance values.” It remains to be seen how effective this is and how much we can rely on it given the other browsers on the market. However, like many of the changes in Safari 16, this is a step towards a browser for developers rather than a hurdle to overcome.
