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 unveil­ing of OSX Mav­er­icks Apple also announced Safari 7, with great­ly improved web stan­dards sup­port. It was left a lit­tle unclear as to which ver­sions of OSX it would run on, but brows­ing through their devel­op­er area this week I found a down­load­able pre-release of Safari 6.1, which I think clears that up: it seems Safari 7 will be exclu­sive to Mav­er­icks, while 6.1 will run on Lion and Moun­tain Lion, with all of the web stan­dards sup­port of Safari 7, but only a lim­it­ed set of new features.

As both ver­sions are a major update for the brows­er, bring­ing almost a year’s worth of WebKit updates, I thought it would be use­ful to take a look through the new and updat­ed fea­tures in each, as well as try­ing to iden­ti­fy where they differ.

NB: all of my tests for this post have been per¬≠formed in Safari 6.1 Seed 2 for Moun¬≠tain Lion, so it‚Äôs pos¬≠si¬≠ble that miss¬≠ing fea¬≠tures ‚ÄĒ or those imple¬≠ment¬≠ed dif¬≠fer¬≠ent¬≠ly than expect¬≠ed ‚ÄĒ may be in Safari 7 only, or per¬≠haps not yet enabled by default.

CSS

Start­ing with the biggest stuff, Regions is a mech­a­nism where you choose con­tent from a source ele­ment, then flow that con­tent into anoth­er ele­ment, or mul­ti­ple oth­er ele­ments. As this is still con­sid­ered exper­i­men­tal, all appro­pri­ate prop­er­ties use the -webkit- prefix:

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

The launch and release notes men­tion a fur­ther two big lay­out fea­tures: first is Grid Lay­out, which I’m very excit­ed about as I first saw a ver­sion of it some sev­en years ago and have been eager­ly await­ing it since! Unfor­tu­nate­ly it does­n’t seem to work at all in Safari 6.1; the inspec­tor tools sug­gests the prop­er­ties in auto-com­plete, but then treats them as invalid.

The release notes also men¬≠tion Exclu¬≠sions, but it‚Äôs actu¬≠al¬≠ly Shapes that‚Äôs imple¬≠ment¬≠ed ‚ÄĒ the two used to share a spec, but were recent¬≠ly split out into their own. Shapes works by defin¬≠ing a shape which con¬≠trols the flow of con¬≠tent 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 lay­out, Safar­i’s Flexbox sup­port has been updat­ed to use the sta­ble syn­tax, bring­ing it on a par with oth­er mod­ern browsers. While these prop­er­ties are also still pre­fixed, a num­ber of sets of fea­tures are now con­sid­ered sta­ble and have had their pre­fix­es removed: the transition prop­er­ty, gra­di­ent val­ues, and the calc() val­ue function.

Along with as these big­ger changes, there are a bunch of small­er new fea­tures. The clip-path prop­er­ty, orig­i­nal­ly intro­duced in SVG, acts like clip, but allows more shapes than the basic rec­tan­gle; for exam­ple, to clip a cir­cle you spec­i­fy the x and y co-ordi­nates of the cen­tre, and a radius:

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

A new val­ue for the position prop­er­ty, sticky, sets an ele­ment to behave as if it’s sta­t­ic until a cer­tain thresh­old is reached, at which point it becomes fixed.

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

Also: the word-wrap prop¬≠er¬≠ty has been renamed overflow-wrap; and there are a few new val¬≠ue units ‚ÄĒ ch is equiv¬≠a¬≠lent to the 0 char¬≠ac¬≠ter of the cur¬≠rent¬≠ly applied font, and vmax is equiv¬≠a¬≠lent to either vh or vw, whichev¬≠er is greater.

There have been numer­ous fix­es to the prop­er­ties in the Back­grounds & Bor­ders mod­ule, giv­ing it now full imple­men­ta­tion except, for some rea­son, the long-stand­ing background-repeat errors. Among the changes, the background-position prop­er­ty now accepts four val­ues, for fin­er con­trol over positioning:

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

The col­or-mode media fea­ture is now avail­able, but sad­ly the res­o­lu­tion fea­ture isn’t, mean­ing you must con­tin­ue to use the non-stan­dard -webkit-device-pix­el-ratio.

A cou¬≠ple of changes I haven‚Äôt yet been able to find: the release video touts the image-set() func¬≠tion val¬≠ue as a new fea¬≠ture, but as far as I can tell it‚Äôs iden¬≠ti¬≠cal to the ver¬≠sion already imple¬≠ment¬≠ed in Safari 6; and background-blend-mode is said to be imple¬≠ment¬≠ed, but did¬≠n‚Äôt work in any of the demos I tried ‚ÄĒ per¬≠haps 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 addi¬≠tion is the seam¬≠less attribute on the iframe ele¬≠ment, which is intend¬≠ed to make the con¬≠tents of the iframe appear to be part of the par¬≠ent page. This removes the bor¬≠der and should allow style inher¬≠i¬≠tance from the par¬≠ent doc¬≠u¬≠ment, although I could¬≠n‚Äôt get this lat¬≠ter part to work at all.

There are a few new addi­tions to the DOM API for forms. The height and width attrib­ut­es for an image input type are now avail­able, along with the ele­ments attribute for fieldset, which lists all of the form ele­ments (i.e. not legend or label) con­tained 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 fea­tures in Safari 7 are sup­port for Muta­tion Observers and Shared Work­ers. The for­mer pro­vide a new way of detect­ing changes to the DOM, while the lat­ter extend the Web Work­ers con­cept to be avail­able from mul­ti­ple dif­fer­ent scripts.

In terms of improve­ments, the reques­tAni­ma­tion­Frame method has been unpre­fixed, and XML­HttpRe­quest now accepts the blob response type for eas­i­er 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 Vis­i­bil­i­ty allows you to detect whether the tab your site is run­ning in is in focus, and per­form actions based on that; pause a play­ing video when the user switch­es away, for example.

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

Web Speech was imple¬≠ment¬≠ed in Chrome recent¬≠ly and is now in Safari too, using Apple‚Äôs Siri pro¬≠cess¬≠ing ‚ÄĒ and it has¬≠n‚Äôt even been accept¬≠ed by the W3C yet. Push Noti¬≠fi¬≠ca¬≠tions are imple¬≠ment¬≠ed in a split-lev¬≠el way; Local Noti¬≠fi¬≠ca¬≠tions are the stan¬≠dard, and allow you to send noti¬≠fi¬≠ca¬≠tions via Safari, and OSX Web¬≠site Push Noti¬≠fi¬≠ca¬≠tions require that you reg¬≠is¬≠ter your web serv¬≠er with the Apple Push Noti¬≠fi¬≠ca¬≠tions ser¬≠vice, and can cre¬≠ate your own app entry in the noti¬≠fi¬≠ca¬≠tions tray.

OS integration

It‚Äôs not clear that Push Noti¬≠fi¬≠ca¬≠tions ‚ÄĒ espe¬≠cial¬≠ly the OSX ver¬≠sion ‚ÄĒ will be present in Safari 6.1, and a fur¬≠ther two APIs were announced for Safari 7 which are notice¬≠ably absent from the release notes for Safari 6.1: Air¬≠Play, to allow stream¬≠ing media over the Air¬≠Play pro¬≠to¬≠col, and JS Objec¬≠tive C, which will act as a bridge between the two tech¬≠nolo¬≠gies allow¬≠ing them to work together.

While I can‚Äôt say for sure that these won‚Äôt be in Safari 6.1, I strong¬≠ly sus¬≠pect that they won‚Äôt be; and that while the two new ver¬≠sions of Safari will have equiv¬≠a¬≠lent lev¬≠els of web stan¬≠dards sup¬≠port, Safari 7 will be much more tight¬≠ly inte¬≠grat¬≠ed to the OS.

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

  1. [‚Ķ] Peter Gasston gives us a run¬≠down of what‚Äôs new for Web devel¬≠op¬≠ers in Safari 7 (Mac OS X ‚ÄėMav¬≠er¬≠icks‚Äô only), and 6.1 (Lion and Moun¬≠tain Lion) [‚Ķ]

  2. [‚Ķ] Web plat¬≠form tech¬≠nolo¬≠gies in Safari 6.1 and 7 I wish Apple would get Safari on a faster release schedule. [‚Ķ]

  3. [‚Ķ] Web plat¬≠form tech¬≠nolo¬≠gies in Safari 6.1 and 7 by Petey¬≠poo Gasston [‚Ķ]

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

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

  5. [‚Ķ] time, the brows¬≠er sup¬≠port include: Chrome Canary (unpre¬≠fixed), Fire¬≠fox Night¬≠ly (unpre¬≠fixed) and Safari 7 (OS X Mav¬≠er¬≠icks ‚Äď TBA). Plus, Safari and Chrome on iOS 6 already sup¬≠port sticky positioning [‚Ķ]

  6. With the release of Safari 7, not only 3rd Par¬≠ty cook¬≠ie is being blocked. Local Stor¬≠age as well as Web¬≠DB, any kind of web¬≠site data are being blocked. When you go to Safari Pref¬≠er¬≠ences (CMD+comma), Under pri¬≠va¬≠cy tab, on Safari 7, it now says : ‚ÄúBlock cook¬≠ies *and oth¬≠er web¬≠site*‚ÄĚ, orig¬≠i¬≠nal¬≠ly was ‚ÄúBlock cook¬≠ies‚ÄĚ. That con¬≠firms the changes.