iOS 5 for Web Devs: Safari Mobile Updates

Native iOS developers aren’t the only ones with something to be excited about when it comes to developing for iOS 5. A new version of Safari Mobile was released alongside the latest operating system, and mobile web developers now have many new features to experiment with. Get up to speed on the changes in this article!

An 86 Point Increase

With each new iOS release, Apple has done a phenomenal job of updating the native development community about changes to the SDK. They have released a high-level overview of changes, official release notes, and even complete API diffs.

If only web developers could be so lucky! Information on changes to Mobile Safari has been much harder to find. To be fair, some information has been officially released. You can check out the Safari 5 consumer-level update, a developer high-level update, and an obscurely named technical support note, HT4922. However, none of these documents specifically discuss changes relevant to iOS, and none go into the level of technical depth that would be useful for developers (If you know of an additional document not listed here, please leave a link in the comments). This lack of information is surprising if only for one reason: a lot has changed in Safari 5.1 on iOS 5.

The purpose of this article is to provide as comprehensive of a change log as possible for Mobile Safari 5.0 to 5.1. I have attempted to do this by simply reporting on my own experiments between iOS devices running each version. My testing so far has been simple: I just loaded HTML5Test.com on each Safari version and made note of the changes.

According to the HTML 5 Test, Mobile Safari 5.1 has seen an 86 point score increase over Mobile Safari 5.0.

Of course, as the name implies, the test site is really only testing for changes to HTML 5 and related specifications. It also plainly displays a disclaimer stating that not all new HTML 5 changes are tested (after all, the HTML 5 specification is still being written!) and that the results may not be entirely accurate. Nonetheless, this seems like an efficient method of gaining a quick overview of what has changed between browser versions, and I’m glad to be able to share my results from this test with the community.

Testing Platform

The results discussed in this article were obtained from testing with an iPhone 3GS running iOS 4.3.5 with Safari 5.0 and an iPhone 4 running iOS 5.0 with Safari 5.1. These results were further confirmed on an iPad running iOS 4.3.5 with Safari 5.0 and an iPad 2 running iOS 5.0 with Safari 5.1. I was glad to find that both the iPhone and iPad versions of Safari tested the same.

The full user-agent displayed on the iPhone 3GS:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_5 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5

The full user-agent displayed on the first-generation iPad:

Mozilla/5.0 (iPad; U; CPU iPhone OS 4_3_5 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5

The full user-agent displayed on the iPhone 4:

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

The full user-agent displayed on the iPad 2:

Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

Safari 5.1 HTML 5 Test Results

Parsing Rules: 11/11, +10 Points

An additional 10 points were awarded for the inclusion of both HTML 5 tokenizer and HTML 5 tree building. The technical details of this test are beyond the scope of this article, but I can say that the HTML 5 specification defines a tokenization stage followed by a tree construction stage in parsing HTML 5 documents. This point increase implies that Safari 5.1 adheres to this process while 5.0 did not.

In addition to the 10 points gained in this category and added to the overall tally, Safari 5.1 also scored an addition 2 bonus points for the addition of inline SVG and MathML. Keep your eye on both of these technologies!

Canvas: 20/20, +0 Points

No change. This has been fully supported for awhile now.

Video: 21/31, +0 Points

No changes were reported in the video category, but Mobile Safari still doesn’t achieve a perfect score. What is missing? Ogg Theora and WebM format support as well as subtitle support.

Audio: 20/20, +0 Points

No changes. Mobile Safari has supported the audio element for some time, but still lacks WebM and Ogg Vorbis support (this is probably not coming anytime soon).

Elements: 22/28, +8 Points

A significant 8 point increase was achieved for this section.

New elements include:

• figure element
• figcaption element
• mark element

Other improvements in this category include:

• custom non-visible data
• hidden attribute

Forms: 75/98, +39 Points

This 39 point increase in the forms category is among the most exciting updates!

Many of the changes implemented apply to the type attribute of the input element. New type attribute values that now impact the form controls displayed by the browser UI include:

• month
• date
• time
• datetime
• datetime-local
• range

This is a big win for web developers targeting iOS. Mobile Safari will now display a UIPicker with the various time components when you set the type attribute to any of the date/time related values, and a UISlider is now displayed for the range value. Web apps are getting more native all the time.

Support for these additional updates is also reported:

• the required attribute for select elements
• challenge and key type attributes of the keygen element
• output element

Other changes in this section include the addition of the :invalid selector, the form, formAction, formEnctype, formMethod, and formTarget properties on fields, and the control property on labels.

User Interaction: 17/36, +17 Points

Points in this category were awarded for improvements to HTML editing attributes, properties, and methods. Specifically, the contentEditable and designMode attributes, the isContentEditable property, and the execCommand, queryCommandEnabled, queryCommandIndeterm, queryCommandState, queryCommandSupported, and queryCommandValue methods.

History and Navigation: 5/5, +0 Points

No change. Session history was already available.

Microdata: 0/15, +0 Points

No change and no support yet. To read about what we’re missing, check out this reference.

Web Applications: 15/20, -4 Points

Oddly enough, the test site actually reports a loss of 4 points in this section, with custom scheme handlers and custom content handlers listed as no longer supported.

Security: 5/10, +0 Points

No change. We’re still waiting for seamless iFrame support.

Geolocation: 15/15, +0 Points

No change here as Geolocation support has been available for some time.

Note: Geolocation is not part of the official HTML 5 specification, but is often associate with HTML 5 web sites. Read the official Geolocation specification.

WebGL: 9/25, +1 Point

This release brings us one point closer to WebGL support with the addition of DataView support.

Note: WebGL is not part of the official HTML 5 specification but is often associate with HTML 5 web sites. Read about WebGL here.

Communication: 25/25, +0 Points

No changes here. Both 5.0 and 5.1 offer support for cross-document messaging and Server-Sent Events.

Files: 0/20, +0 Points

No changes on this front, and that’s a big frustration point for many web developers who are longing for access to the FileReader API and the FileSystem API.

Note: This is not an official part of the HTML 5 specification.

Storage: 15/20, +0 Points

No changes. Support for IndexedDB is still pending, but at least Local Storage has been around for awhile.

Note: This is not an official part of the HTML 5 specification, but is a closely related technology often discussed alongside HTML 5 web sites. Read the full web storage working draft.

Workers: 15/15, +15 Points

The HTML Test is reporting a 15 point increase with support for both Web Workers and Shared Workers.

Note: This is not an official part of the HTML 5 specification, but is a closely related technology often discussed alongside HTML 5 web sites. Read the full web worker working draft.

Local Multimedia: 0/20, +0 Points

No changes here, unfortunately. The big feature many web developers are longing for in this category is access to the device camera.

Note: This is not part of the official HTML 5 specification.

Notifications: 0/10, +0 Points

No hint of web notifications with this release.

Note: This is not part of the official HTML 5 specification. Read the full web notifications working draft.

Other: 6/6, +0 Points

Points for both text selection and scroll into view had previously been awarded with Safari 5.0.

Beyond HTML 5 Test

The HTML 5 Test web site checks for a wide range of browser support issues, but there are a lot of things it doesn’t pay attention to as well. Examples include bug fixes, performance enhancements, and CSS or JavaScript tweaks. There were a good number of those kinds of updates in this release as well.

If you’d like to learn about even more Safari 5.1 enhancements, I highly recommend reading this blog post from David Calhoun.

A few additional changes that others around the web have already pointed out include:

position:fixed

This CSS property now works as most web developers would expect. To see it in action, check out this YouTube video from David’s post referenced above:

overflow:scroll

Same as above. This setting was tweaked to adhere to developer expectations. Read David’s post for all the details, and check out this YouTube video he originally posted to display the new behavior:

Errors? Omissions?

The above are the results I’ve so far been able to find from HTML 5 Test and several other resources around the web. If you know of any other major or interesting changes that I’ve failed to cover here, let me know in the comments. Likewise, If you find any errors, please don’t hesitate to correct this post.

Make Your Voice Heard. Vote in the Comments!

As you can see from the above, iOS 5 has definitely brought with it a significant number of changes and enhancements to Mobile Safari. Mobiletuts+ will be covering some of these new features as well as many other mobile web development related topics in upcoming posts. Let us know what type of content you would like to see covered by leaving a comment on this post. If there is a specific Safari 5.1 enhancement that you would like us to cover in greater detail, tell us below!