Safari 9: Everything web designers need to know now

Ben Moss.
June 09, 2015
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 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

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

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 …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…