Exciting Additions to Safari 9
WWDC kicked off this week with a plethora of announcements about the next versions of Mac OS X, iOS, and watchOS as well as the big Apple Music launch. Mostly glossed over in all of this excitement was all the new additions to Safari. While Safari on the desktop may not have the sex appeal of Chrome or the cuddly mascot of Firefox, technologies introduced in desktop eventually find themselves into mobile. And mobile is where all the growth is happening.
CSS
The first things developers might notice is that a lot of CSS properties — specifically those related to animation and flexbox although there are others — no longer require the webkit prefix. I haven’t been able to confirm if this also applies to some of the JavaScript APIs, e.g., getUserMedia, but it’s a welcome addition nevertheless. Although if you use a tool like Autoprefixer you don’t need to worry about this at all.
Next there are two new webkit-specific CSS properties — scroll snapping and backdrop-filters. Scroll snapping takes an effect that is done mainly in single page scrolling sites with a bunch of JavaScript and replaces it with a single css rule. Hopefully, this gets added to the CSS spec and implemented by other browser vendors otherwise its useless without maintaining two code bases.
Which brings us to backdrop-filters. Unlike the rest of CSS, this addition doesn’t work on the selected HTML element, but on everything below it in the z-index. The closest thing in CSS to this is the :not() selector. This rule was created specifically when you want to have a dialog on a webpage and the rest of site to blur behind it. While I want this to enter the spec ,I have a feeling that its too drastic a change in the way CSS rules work to ever be accepted, but I wouldn’t mind being proved wrong.
HTML5 Video Enhancements
The two big improvements here are the ability to have custom controls for Airplay and the new Picture-in-Picture (PIP) feature. One of the things I hate about YouTube is that without the app installed on an iPhone, there is no way to Airplay it due to their custom UI. This will fix that, but given the relationship between Apple and Google I wouldn’t hold my breath.
ECMAScript 2015
Chrome, Firefox, and even Edge have all announced support for this new standard, but Apple was noticeable quite until today. By the end of the year every browser should have decent support for Classes, weak sets, template literals, and more.
Force Touch Events
I’m was a little surprised to see this opened up to the browser so quickly. Apple’s laptop lineup just received this capability and rumor has it the next version of the iPhone will be getting Force Touch this fall. Although limited by hardware, Apple clear sees this as an exciting new input option and we should be seeing it in games and UX experiments in the near future.
Pinned Sites
Mainly a UI improvement that has been done before in Chrome and Firefox. The only thing developers need to know is that there is a link tag that let’s you define the icon to show. As a bonus the icon can be a SVG.
Dev Tools
Most developers I know use either Chrome or Firefox for debugging their sites and only jump into Safari if they are trying to fix something specific to iDevices. The biggest change that you’ll notice is that Web Inspector had a major redesign. Without using it too much I have to say I like it more, but will stick to other browsers for the majority of my development work. The new kid on the block is the responsive design mode and does exactly what the name implies.
Final Thoughts
Overall most of the updates bring Safari up to date with its competitors with a few uniquely Apple additions thrown in for good measure. I’m eager to play around with Force Touch, but currently lack the hardware — as does most of the world.
