At the recent WWDC, Apple made several huge announcements. These included the new version of Mac OS, named El Capitan, as well as Apple’s new streaming music service, and a lot many other things.

One such announcement was related to Apple’s flagship web browser: Safari. The new version of Safari will have many changes and features in store for web designers and developers alike.

What sort of changes and new features can we expect from Safari 9? In this post, I will attempt to answer this question.

Safari 9: What’s in Store for Web Designers and Developers?

Unprefixed CSS and CSS Filters

Quite possibly the biggest update in Safari is that it has dropped browser prefixes for over 45 CSS properties. In essence, this is not going to be really noticeable because many browsers still support prefixes for CSS properties, Safari 9 offering unprefixed CSS is surely a good start for now.

Also, Safari 9 will support the backdrop-filter CSS property: drop-shadow, grayscale, contrast, blur, brightness, hue-rotate, saturate, invert, sepia, and opacity: all of these CSS filters are now available in Safari 9.

CSS Scroll Snapping

While we are still on CSS, you should also note that the new version of Safari will implement CSS Scroll Snapping.

So far, scroll snapping (adjustments to the easing on a scroll so that it snaps to a predefined position) has been implemented with the help of JavaScript. Since the trend is in favor of single page websites that have sections occupying the entire viewport, it makes sense to support CSS scroll snapping.

However, this is still more of a progressive enhancement on the part of Apple rather than a necessity, so there might not be an overwhelming majority of designers who switch immediately to CSS scroll snapping.

That said, just in case you are curious, the following properties have been added to Safari 9: webkit-scroll-snap-type, webkit-scroll-snap-points-y, webkit-scroll-snap-points-x, webkit-scroll-snap-destination, and webkit-scroll-snap-coordinate.

Enhancements for HTML5 Video

I noticed that Safari’s latest version comes with two HTML5 video enhancements.

First, it will allow for custom controls for HTML5 video.

Second, Safari will now support Picture in Picture (PiP). If you are familiar with video for television, you must have already heard of PiP. It plays a video in the corner of a screen, while the rest of the screen shows some other content: certain digital television channel guides play the current channel in one corner and show the guide text elsewhere, for example. On the plus side, this can be useful for folks who prefer watching a video while working (myself included). On the down side, I am pretty sure it won’t be long before you see PiP being used to show annoying adverts.

Ecmascript 6 and New JavaScript Events

Safari’s new version has a special treat for JavaScript developers: it will now offer full support for classes, computed properties, weak set, number object, template literals, octal and binary literals, and symbol objects.

Beyond that, Safari 9 also introduces various new JavaScript events to handle force touch trackpad (a new feature in MacBook that detects the tap on the trackpad, but also the force with which the tap has been made): webkitmouseforcedown, webkitmouseforceup, webkitmouseforcewillbegin, and webkitmouseforcechanged.

My guess is that beyond game development and the occasional experimental UI design, these force touch events will not find much scope for use.


SFSafariViewController will let apps display web content within the app with the help of Safari’s rendering engine. For instance, if an app requires that users visit the web page in order to create an account and login and then return back to the app, SFSafariViewController can be of use here.

While this feature is geared more towards app developers rather than web designers or developers, it is a living proof that we are moving closer towards better integration of native apps and web.

Changes to Developer Mode

For responsive design, you can now easily switch layouts across viewports. Apple has included all their devices as their presets. However, I do not see much use for this feature: the responsive design mode will alter your viewport, but it will not simulate other devices. So at best, you can use it for quick testing in the absence of actual device simulators.

Also, the Web Inspector has had some minor UI and UX improvements.


Since I mostly work with Linux devices, and my mobile operating system of choice is Android, Safari as a web browser has never been significant to me. Yet, in spite of it all, with Apple devices being popular in the market and also because most of the designers out there do use MacBooks, staying aloof from Safari is not an option for me either.

Personally, I am having mixed feelings about Safari 9. The new improvements, such as unprefixed CSS and JavaScript events, are indeed praiseworthy. But like most other offerings from Apple, many of these updates, such as custom controls for HTML5 video, will not find much use beyond a given niche.

What are your thoughts about this new version of Safari? Love it or hate it? Share your views in the comments below!

Featured Image: christowski

Sufyan bin Uzayr writes for various magazine and blogs, and has authored several books. He blogs about technology, Linux and open source, mobile, web design and development, typography, and Content Management Systems at Code Carbon. You can learn more about him, follow him on Twitter or friend him on Facebook and Google+.

The post Safari 9: What’s in Store for Web Designers and Developers? appeared first on Torque.

Share This