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
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.
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:
Safari 9 introduces a couple of enhancements for HTML5 video.
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
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.
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
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, thetransform properties, and the animation properties.