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.
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.
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.
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