Advertisement
Mobile Web Apps

iOS 5 for Web Devs: Safari Mobile Updates

by

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:

Other improvements in this category include:

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:

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:

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!

Related Posts
  • Photography
    Post-Processing
    Meet Lightroom MobilePreview ipad
    Adobe brings Lightroom to iPad, photographers everywhere rejoice. Thoughts from a frequent Lightroom user on Adobe's latest innovation.Read More…
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give CrossBrowserTesting.com a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Code
    News
    iOS 2013: A Year in Review and 2014 PredictionsPreview image@2x
    For iOS developers, 2013 was a pivotal year. I'd even go as far as saying that it was the most significant year since the introduction of the iPhone, almost seven years ago. The reason is of course the unveiling of iOS 7. Let's take a look at some of the key moments of 2013 and take a sneak peak at what 2014 has in store for us.Read More…
  • Game Development
    How to Learn
    How to Learn the Phaser HTML5 Game EnginePhaserlogo400px
    Phaser is an open source HTML5 game framework created by Photon Storm. It's designed to create games that will run on desktop and mobile web browsers. A lot of focus was given to performance inside of mobile web browsers, a growing and important area of web gaming.Read More…
  • Web Design
    Case Studies
    How They Did It: Alice in VideolandAlice retina
    This summer I started building a modern retelling of "Alice in Wonderland", an interactive storybook web app by the name of Alice in Videoland. It ended up being featured in a sister article in Adobe Inspire as well as turning into an encore-winning presentation I gave at CSS Dev Conf 2013. The project was meant to be educational, a testing ground for new CSS animation techniques and desktop-to-tablet JavaScript. I keep Alice's source up on GitHub where anyone can examine my code, but sometimes it's nice to have someone go over the reasoning with you.Read More…