Web platform technologies in Safari 6.1 and 7

Warning This article was written over six months ago, and may contain outdated information.

At the recent unveiling of OSX Mavericks Apple also announced Safari 7, with greatly improved web standards support. It was left a little unclear as to which versions of OSX it would run on, but browsing through their developer area this week I found a downloadable pre-release of Safari 6.1, which I think clears that up: it seems Safari 7 will be exclusive to Mavericks, while 6.1 will run on Lion and Mountain Lion, with all of the web standards support of Safari 7, but only a limited set of new features.

As both versions are a major update for the browser, bringing almost a year’s worth of WebKit updates, I thought it would be useful to take a look through the new and updated features in each, as well as trying to identify where they differ.

NB: all of my tests for this post have been performed in Safari 6.1 Seed 2 for Mountain Lion, so it’s possible that missing features – or those implemented differently than expected – may be in Safari 7 only, or perhaps not yet enabled by default.

CSS

Starting with the biggest stuff, Regions is a mechanism where you choose content from a source element, then flow that content into another element, or multiple other elements. As this is still considered experimental, all appropriate properties use the -webkit- prefix:

.source { -webkit-flow-into: foo; }
.targetA, .targetB { -webkit-flow-from: foo; }

The launch and release notes mention a further two big layout features: first is Grid Layout, which I’m very excited about as I first saw a version of it some seven years ago and have been eagerly awaiting it since! Unfortunately it doesn’t seem to work at all in Safari 6.1; the inspector tools suggests the properties in auto-complete, but then treats them as invalid.

The release notes also mention Exclusions, but it’s actually Shapes that’s implemented – the two used to share a spec, but were recently split out into their own. Shapes works by defining a shape which controls the flow of content around it, either inside or outside:

.inside { -webkit-shape-inside: rectangle(0, 0, 100px, 50px);
.outside { -webkit-shape-outside: circle(50%,50%,100px);

Still on layout, Safari’s Flexbox support has been updated to use the stable syntax, bringing it on a par with other modern browsers. While these properties are also still prefixed, a number of sets of features are now considered stable and have had their prefixes removed: the transition property, gradient values, and the calc() value function.

Along with as these bigger changes, there are a bunch of smaller new features. The clip-path property, originally introduced in SVG, acts like clip, but allows more shapes than the basic rectangle; for example, to clip a circle you specify the x and y co-ordinates of the centre, and a radius:

img { -webkit-clip-path: circle(50px,50px,100px); }

A new value for the position property, sticky, sets an element to behave as if it’s static until a certain threshold is reached, at which point it becomes fixed.

div {
  position: -webkit-sticky;
  top: 0;
}

Also: the word-wrap property has been renamed overflow-wrap; and there are a few new value units – ch is equivalent to the 0 character of the currently applied font, and vmax is equivalent to either vh or vw, whichever is greater.

There have been numerous fixes to the properties in the Backgrounds & Borders module, giving it now full implementation except, for some reason, the long-standing background-repeat errors. Among the changes, the background-position property now accepts four values, for finer control over positioning:

div { background-position: bottom 10px right 25%; }

The color-mode media feature is now available, but sadly the resolution feature isn’t, meaning you must continue to use the non-standard -webkit-device-pixel-ratio.

A couple of changes I haven’t yet been able to find: the release video touts the image-set() function value as a new feature, but as far as I can tell it’s identical to the version already implemented in Safari 6; and background-blend-mode is said to be implemented, but didn’t work in any of the demos I tried – perhaps this is only in Safari 7?

HTML and DOM

There are only a few points increase on the HTML5 Test between Safari 6 and 7. The most notable new addition is the seamless attribute on the iframe element, which is intended to make the contents of the iframe appear to be part of the parent page. This removes the border and should allow style inheritance from the parent document, although I couldn’t get this latter part to work at all.

There are a few new additions to the DOM API for forms. The height and width attributes for an image input type are now available, along with the elements attribute for fieldset, which lists all of the form elements (i.e. not legend or label) contained within.

var fieldset = document.querySelector('fieldset');
console.log(fieldset.elements);
var inputImg = document.querySelector('input[type=image]');
console.log(inputImg.height,inputImg.width);

JavaScript

The two big new JS features in Safari 7 are support for Mutation Observers and Shared Workers. The former provide a new way of detecting changes to the DOM, while the latter extend the Web Workers concept to be available from multiple different scripts.

In terms of improvements, the requestAnimationFrame method has been unprefixed, and XMLHttpRequest now accepts the blob response type for easier file processing.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';

There are a bunch of new APIs: Page Visibility allows you to detect whether the tab your site is running in is in focus, and perform actions based on that; pause a playing video when the user switches away, for example.

function visChange() {
  var action = (document.hidden) ? 'something' : 'something else';
}
document.addEventListener('visibilitychange', visChange, false);

Web Speech was implemented in Chrome recently and is now in Safari too, using Apple’s Siri processing – and it hasn’t even been accepted by the W3C yet. Push Notifications are implemented in a split-level way; Local Notifications are the standard, and allow you to send notifications via Safari, and OSX Website Push Notifications require that you register your web server with the Apple Push Notifications service, and can create your own app entry in the notifications tray.

OS integration

It’s not clear that Push Notifications – especially the OSX version – will be present in Safari 6.1, and a further two APIs were announced for Safari 7 which are noticeably absent from the release notes for Safari 6.1: AirPlay, to allow streaming media over the AirPlay protocol, and JS Objective C, which will act as a bridge between the two technologies allowing them to work together.

While I can’t say for sure that these won’t be in Safari 6.1, I strongly suspect that they won’t be; and that while the two new versions of Safari will have equivalent levels of web standards support, Safari 7 will be much more tightly integrated to the OS.

6 comments on
“Web platform technologies in Safari 6.1 and 7”

  1. […] Peter Gasston gives us a rundown of what’s new for Web developers in Safari 7 (Mac OS X ‘Mavericks’ only), and 6.1 (Lion and Mountain Lion) […]

  2. […] Web platform technologies in Safari 6.1 and 7 I wish Apple would get Safari on a faster release schedule. […]

  3. […] Web platform technologies in Safari 6.1 and 7 by Peteypoo Gasston […]

  4. Aaaaaaaand the dev tools still suck just as much. Dang it! I thought I’d finally be able to switch back from Chrome

    Jordan Brennan [August 23rd, 2013, 05:07]

  5. […] time, the browser support include: Chrome Canary (unprefixed), Firefox Nightly (unprefixed) and Safari 7 (OS X Mavericks – TBA). Plus, Safari and Chrome on iOS 6 already support sticky positioning […]

  6. With the release of Safari 7, not only 3rd Party cookie is being blocked. Local Storage as well as WebDB, any kind of website data are being blocked. When you go to Safari Preferences (CMD+comma), Under privacy tab, on Safari 7, it now says : “Block cookies *and other website*”, originally was “Block cookies”. That confirms the changes.