Home » News » Everything Web Designers Need To Know Now About Safari 9

Everything Web Designers Need To Know Now About Safari 9

Rate this post


In speech at the Apple WWDC, its core elements highlighted two new OS named 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 ready to all Apple developers, will be released to public beta next month, finally go live in this autumn.

Among the usual statement of about Apple pay rolling out to a whole two countries (Canada and the UK) and Apple’s streaming music service, the clues about how Apple sees the Web, and Safaris role, evolving in the next few years… appear.


One of the considerable statements for web designers is the application of CSS scroll snapping. Scroll snapping, supported by Java Script, is an effective tool for customization the flexibility on a scroll to be put in predefined position. It just like when you scroll a single page site that slid to the next section.

It is obvious that Apple’s prediction about single page sites with sections that fill the whole viewport trend is true and 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.

When scroll snapping is largely considered as the progressive enhancement, it will be applied in the near future to switch this effect from JavaScript to CSS.


Safari 9 offers pinned sites.  Pinned sites help to keep your favorite websites open in the browser for quick access, without leaving a tab open. Using this tool is very simple, 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 need to get ready by creating icons: make it solid black, with a transparent background, and save it as an SVG, then link to the icon in the head of your HTML document, like so:


Safari 9 introduces a couple of improvements for HTML5 video.

Airplay enables to customs controls for HTML5 media. Thanks to JavaScript, you’ll be able to detect Airplay availability and where possible (ie. in Safari 9) supply custom controls. It is ideal tool for users who get bored with default controls breaking brand consistency.

PiP (Picture in Picture) is a kind of video that’s applied largely on TV including playing a video in the corner of the screen while other content is viewed elsewhere.

PiP from Safari 9 is unbelievable change for anyone who likes to watch live events (like the Apple WWDC keynote) while actually working. Nevertheless, it still exists a disadvantage things is that you will see the first PiP adverts popping up in the corner of your browser in the next 6 months, but Safari 9 also provides the option to turn off all audio across all tabs with a quick click.


Apple’s new MacBooks are equipped force touch 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 seem like useful for supplementary navigation but the technology is not just software, but also hardware, restricted. On the other hand, when you apply it as a progressive enhancement, it brings you some interesting experiences, especially in the area of gaming and experimental UI design.


SFSafariViewController seems to attract app designers than web designers at the first time appearing. It enables apps to display Web content within an app using Safari’s rendering.

Designed for streamlining scenarios such as opening a native app, creating an account on a company’s web page, before returning to an app to log in with the account, the outstanding feature about SFSafariViewController is allowing web, rather than native, to be the keystone of a company’s online systems.


There is interesting news for JavaScript developers, that is Safari 9 will fully support for classes, computed properties, weak set, the number object, octal and binary literals, symbol objects, and template literals. It means that JavaScript is a step closer to becoming the OOP language


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.


Responsive design mode has been included in Safari 9 as an effective tool for fast switching of layouts across different viewports. All Apple devices are installed 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. Responsive design mode only alters the viewport, it doesn’t simulate different devices. It may be a quick useful test whenever new Apple devices are launched, before device simulators catch up.

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


Some updates are more welcome than others but less likely to be noticed and the dropping of browser prefixes for over 45 CSS properties is not an exceptional. While it does little in the short term with legacy browsers still in use, browsers drop should be prefixed as soon as possible.

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

Source: webdesignerdepot.com

Check Also

Happy valentine’s day, Happy discount deal!!

Rate this post Soulmate or sidekick, buddy or love? Who said that Valentine’s day only …