Safari 9: Everything web designers need to know now

Yesterday’s keynote at the Apple WWDC featured two new OS. The new MacOS is named El Capitan after a rock formation in Yosemite (which has been taken by most commentators to indicate that Apple sees its next OS as a minor, rather than major, version). MacOS El Capitan, and iOS 9 are available now to Apple developers, will be released to public beta next month, and will go live in the autumn.

Hidden amongst the underwhelming announcements about Apple pay rolling out to a whole two countries (Canada and the UK) and Apple’s streaming music service, were a number of clues as to how Apple sees the Web, and Safari’s role, evolving in the next few years…

1) Scroll snapping

One of the biggest announcements for web designers is the implementation of CSS scroll snapping. Scroll snapping — which is currently achieved with JavaScript — is a method of adjusting the easing on a scroll so that the scroll snaps to a predefined position. If you’ve ever scrolled a single page site that slid to the next section, as opposed to an arbitrary number of pixels, you’ve experienced scroll snapping.

[pullquote]Apple expects the trend for single page sites…to continue

It’s an indication that Apple expects the trend for single page sites, with sections that fill the whole viewport, to continue unabated.

Safari 9 introduces the following CSS scroll snapping properties: -webkit-scroll-snap-type, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, and -webkit-scroll-snap-coordinate.

As scroll snapping is largely viewed as a progressive enhancement, it may soon be practical to switch this effect from JavaScript to CSS.

2) Pinned sites

Safari 9 introduces pinned sites. Pinned sites is a way to keep your favorite websites open in the browser for quick access, without actually leaving a tab open. To use pinned sites in Safari 9 just drag an open tab to the left and a small icon will be created in the bookmarks bar allowing you to quickly access the page.

Users will undoubtedly expect to use this feature, so all sites need to be prepared. In order to be ready, all you need to do is create an icon: make it solid black, with a transparent background, and save it as an SVG. You can then link to the icon in the head of your HTML document, like so:

<link rel="icon" sizes="any" mask href="wedesignerdepot.svg">

If you’d like to color the icon to match your brand, add this meta tag immediately after it:

<meta name="theme-color" content="#FAB23A">

3) HTML5 video enhancements

Safari 9 introduces a couple of enhancements for HTML5 video.

Airplay allows custom controls for HTML5 media. Using JavaScript you’ll be able to detect Airplay availability and where possible (ie. in Safari 9) supply custom controls. Ideal for anyone else who’s tired of default controls breaking brand consistency.

PiP (Picture in Picture) is a style of video that’s used extensively on TV. PiP involves playing a video in the corner of the screen while other content is viewed elsewhere; browsing the channel guide on a Tivo box whilst the current channel plays in the corner, is a good example.

Safari 9 introducing PiP is an incredible innovation for anyone who likes to watch live events (like the Apple WWDC keynote) whilst actually working. However, like most technologies PiP is open to abuse; you’re likely to see the first PiP adverts popping up in the corner of your browser in the next 6 months. Fortunately Safari 9 also includes the option to mute all audio across all tabs with a quick click.

4) Force touch events

Apple’s new MacBooks feature force touch trackpads; trackpads that detect not just taps, but the force with which you tap. Safari 9 introduces several new JavaScript events — ironically classed as mouse events — to handle the feature: webkitmouseforcewillbegin, webkitmouseforcedown, webkitmouseforceup, and webkitmouseforcechanged.

Force touch events are only likely to be useful for supplementary navigation at this point as the technology is not just software, but also hardware, restricted. However, if used as a progressive enhancement they open up some interesting possibilities, especially in the area of gaming and experimental UI design.

5) SFSafariViewController

At first glance, SFSafariViewController appears to be of more interest to app designers than web designers. It will allow apps to display Web content within an app using Safari’s rendering.

Designed for streamlining scenarios such as opening a native app, then creating an account on a company’s web page, before returning to an app to log in with the account, the significant thing about SFSafariViewController is that allows web, rather than native, to be the keystone of a company’s online systems. It’s a small piece of software that sparks a very large step towards closer integration of native and web.

6) ECMAScript 6

[pullquote]JavaScript is a step closer to becoming the OOP language that it really should be

JavaScript developers will be excited to learn that Safari 9 includes full support for classes, computed properties, weak set, the number object, octal and binary literals, symbol objects, and template literals. This support means JavaScript is a step closer to becoming the OOP language that it really should be by now.

7) CSS Filters

The backdrop-filter CSS property has been added to Safari 9. blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia filters are all available.

8) Developer mode updates

Responsive design mode has been introduced in Safari 9 as a way of providing fast switching of layouts across different viewports. All Apple devices are included as presets, but it’s more of a useful presentation tool for client meetings than a dev tool as best practices favor content, as opposed to viewport, breakpoints. It’s important to note that responsive design mode only alters the viewport, it doesn’t simulate different devices. It may be useful as a quick test whenever new Apple devices are launched, before device simulators catch up.

The web inspector has been redesigned. Together with some UI tweaks to improve the UX, there’s a greater emphasis on frame rendering and performance.

9) Unprefixed CSS

Some updates are more welcome than others. One of the most welcome, but less likely to be noticed, is the dropping of browser prefixes for over 45 CSS properties. Whilst it does little in the short term with legacy browsers still in use, the sooner browsers drop prefixes, the sooner we’ll say goodbye to them for good.

The most significant to go prefix-free are the flex properties, the transition properties, the transform properties, and the animation properties.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.