Dom Neill / Visual designer.

My two favourite WebKit features coming to
Safari 9.0 this autumn.

Every summer, designers and developers from around the world gather at Apple's Worldwide Developers' Conference (WWDC) in San Francisco to see what the future of Apple's software platforms look like; it's an opportunity for Apple to give the public a sneak-peek of what to expect in the next major releases of OS X and iOS, and an opportunity for designers and developers to get their products ready to support any new technologies ahead of launch.

Now, aside from the keynote, most years about 90% of the content at WWDC goes way over my head; I don't develop apps, and my knowledge of Objective-C and Swift is limited, to say the least. But, as a web designer, with some experience of building web apps for Safari on iOS and OS X, there was one session in particular this year that really caught my eye.

In session 501: "What's New in Web Development in WebKit and Safari", Apple's Brent Fulgham and Chris Young-Zawada highlight a couple of really cool WebKit features which are making their way into Safari 9.0 this Autumn.

In case you're not already familiar, WebKit is the browser engine behind Safari—the web browser on iOS and OS X—as well as other apps you may not have thought of, like Mail, and even the iTunes Store and Mac App Store. Versions of it are also used as the foundation for other web browsers like Chrome and Opera.

What's great about WebKit is that, with only a few exceptions, it works the same whether you're developing for Safari on Mac, iOS, or even a native Objective-C or Swift app which uses an embedded WKWebView (formerly UIWebView). This is a big deal these days, as the boundaries between desktop and mobile become more and more blurred, and it means that it's now easier than ever for designers and developers to build consistent experiences across multiple platforms.

The session covers a lot, but the two main features which appealed to me focus on layout and rendering, and backdrop effects in CSS.

Let's talk about backdrop effects first.

Not so long ago, I was working on an iOS web app that featured elements like navigation bars and modal windows which I wanted to fit in with the aesthetic of iOS. I wanted to create an experience which felt to the user like they were using a native app, and since iOS 7 launched, part of that experience is being able to use the illusion of depth to create a visual hierarchy for information on screen.

You'll know what I'm talking about if you've ever noticed the slight translucency and blur found across iOS and OS X, designed to show you that an element is floating 'on top of' or 'in front of' another element behind it. (Swipe down from the top of the screen in iOS to see this effect used in Notification Center, or check out how the toolbar in Safari changes colour slightly as you scroll through a webpage).

The overall effect here is that elements take on the look of frosted glass, and it's a really neat way of hinting at depth across an otherwise famously 'flat' UI.

Trouble is, until now there's been no easy way to achieve this effect on the web. Countless people have gone to a lot of effort to achieve it, but whatever the method, the end results are invariably time-consuming, use a lot of resources, slow down page loading times, and are just a nightmare to implement and maintain reliably.

But now, there's a single line of CSS which takes all that pain away:

-webkit-backdrop-filter: blur();

This single line of CSS does what countless combinations of style sheets, javascript and canvas elements are currently doing, but it's easier to implement, easier to change, and can be used in conjunction with other existing CSS filters for even greater flexibility.

Oh, and it works on top of video too.

So, let's take a quick look at this in context:

CSS:

body {
    background-image: url(../images/balloons.jpg);
}

#myElement {
    width: 300px;
    height: 90px;
    margin: auto;
    z-index: 1;
    background-color: rbga(255,255,255,0.8);
    -webkit-backdrop-filter: blur(10px);
}

HTML:

<html>
    <body>
        <div id='myElement'>Check me out!</div>
    </body>
</html>

Result:

backdrop filter demo

Clearly this is going to be pretty huge, and whilst it's only supported in Safari 9.0 in OS X 10.11 ('El Capitan') right now (unless you're running one of the recent WebKit nightly builds which have this baked in already), it's been submitted to the W3C for consideration as a web standard, so if it's approved there's a good chance we'll see this being rolled out to other browsers soon too.

Next: CSS Scroll Snap Points:

Another awesome addition is a feature called scroll snap points. If you've ever used the iTunes Store or Photos app on iOS, you'll have seen the behaviour this implements already. Basically, if you've got a row of images you want to scroll through by swiping left and right (or indeed up and down), scroll snap points let you tell Safari where the edge of each image is, so that when you lift your finger off the screen (or your trackpad), the image will continue moving until it's all in view; so you don't end up scrolled 'between' two images.

What's cool about this is that it takes advantage of two things which most iOS and OS X users are already familiar with: elastic scrolling and intertial scrolling. This means is that if you don't swipe/scroll enough to show the next image in your series, you'll get 'bounced' back to the one you started from. Or, if you swipe/scroll really hard, you'll skip through a number of images before the scrolling loses momentum, and you'll eventually slow down to a stop on a full image, never part-way between two images.

And it even works for rows of elements that don't share a common set of dimensions; so if you've got a row of images which are different widths, you can set your scroll snap point co-ordinates to be the middle of an image rather than the edge, so it's always perfectly centered in your container. scroll snap points demo itunes

Again, this isn't anything new; people have been hacking together solutions to simulate this kind of behaviour using javascript for years, but all the solutions which currently exist put a real strain on the browser because each frame of animation has to be calculated and rendered individually, which can lead to the feature being clunky or unresponsive; not a great user experience.

So how do you implement this feature using WebKit? Well it's almost as simple as implementing -webkit-backdrop-filter: blur();, but this time we're going to use two lines of code:

-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-x: repeat();

So, for example, if I have a series of images that are all 300px wide, I can set my scroll snap points up as follows:

CSS:

#imageCarousel {
    width: 300px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(300px);
}

HTML:

<html>
    <body>
        <div id='imageCarousel'>
            <img src="images/photo-1.jpg />
            <img src="images/photo-2.jpg />
            <img src="images/photo-3.jpg />
            <img src="images/photo-4.jpg />
            ...
            <img src="images/photo-12.jpg />
        </div>
    </body>
</html>

This works well for elements that are all the same width, but what about elements with different widths? Well, in that case we can use:

-webkit-scroll-snap-point-destination: x y;

and

-webkit-scroll-snap-point-coordinate: x y;

to set where we want the center of the image to be:

#imageCarousel {
    width: 300px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-scroll-snap-type: mandatory;
    -webkit-scroll-snap-destination: 50% 50%;
}

img.myPhoto {
    -webkit-scroll-snap-coordinate: 50% 50%;
}

Setting both sets of values to 50% means that the center of our images (blue), lines up with the center of our carousel (red):scroll destination illustration

So there you go; those are my two favourite features coming to Safari 9.0; they solve a lot of problems which have been plaguing designers and developers for a while now, they're lightweight, and they're really easy to implement. I had a quick play around after watching the session and had these features up and running in a few minutes, and I'm by no means an experienced developer.

Together, these two additions to WebKit alone make for some exciting possibilities when it comes to creating rich experiences on the web, but they're by not a complete reflection of all the different changes that are coming in Safari 9.0.

Check out the full session video on Apple's developer website for the full rundown of how these features work, and to find out more about the other additions coming to WebKit later this year.