Apple’s HTML5 showcase details power of (Apple) web code

Apple posted a showcase of “HTML5 and web standards” on its website on Thursday that highlights the level of support for the emerging standard in the company’s Safari and Mobile Safari browsers.

It’s nice to see Apple (or anyone for that matter) talking about HTML5 and mentioning more than just video. The site showcases HTML5 audio and canvas elements, as well as CSS 3 transitions and typography tools. It also has a nice photo gallery that looks and behaves just like former Apple designer Mike Matas’ amazing photo-gallery site.

Unfortunately, the way Apple presents the showcase, you would think Safari is the only web browser that supports these new web standards.

In fact, visit the site with any other browser and you’ll get a message telling you to download Safari. Surely your browser must be inadequate? Actually, your browser is probably capable of handling the showcase just fine, but ultimately the showcase isn’t about web standards: It’s about Apple’s version of web standards.

Apple is detecting the user-agent string (the bit of identifying data your browser passes to a web server when it requests a page) and only allowing Safari users to see the galleries. Other browsers are effectively cut off, regardless of the fact that many can render them just fine.

Worse, Apple’s CSS code uses only WebKit-specific selectors -- for example, -webkit-border-radius instead of the actual CSS 3 selector border-radius. WebKit is the open source engine that powers Safari and GoogleChrome. Firefox, IE and Opera can’t understand this code as clearly.

So much for web standards. Not only is user-agent sniffing absolutely the wrong way to determine the HTML5 capabilities of the current user, the implicit suggestion is that HTML5 is something only Apple supports.

Microsoft recently published its own HTML5 showcase to hype the coming release of Internet Explorer 9, and its demo pages are viewable (and work) in any non-IE browser with the proper support. Mozilla’s HTML5 demo pages are geared to work with experimental builds of Firefox, but at least other browsers aren’t blocked, and most of the demos actually work in Chrome.

To test Apple’s demos in other browsers, we spoofed the user agent in Firefox and Chromium and found that, while several examples do indeed fail in Firefox, most worked just fine. Naturally, everything works without issue in Chromium, because it uses the same WebKit rendering engine as Safari. Apple is being disingenuous by making its browser seem more compelling than others. That’s not surprising, but we’d be disappointed to see independent developers follow suit. The version WebKit that Chromium uses doesn't yet support all of CSS 3's 3D transforms, which renders this demo incomplete, though still functional, in Chrome/Chromium.

So how should you detect whether the current browser can display whatever bit of HTML5 or CSS 3 you’re using? The long-established best practice is to detect for features, not browsers. To find out which features are available in the current browser isn’t hard -- there are even several free, open source libraries out there that do just that.

Modernizr is one of our favourites. This handy little JavaScript library can detect which HTML5 features are available. Then, armed with that information, you can then create conditional JavaScript statements to offer HTML5 to those browsers that support it, but still fall back on other content for those that don’t.

There are however, some cases where Modernizr might be overkill. For example, if you just want to embed some HTML5 video, you only need to detect one element. If Modernizr isn’t right for your project, check out Mark Pilgrim’s list of ways to detect HTML5 elements. The list of elements and how to detect them is an appendix to Pilgrim’s book in progress, Dive Into HTML5.

The list isn’t just elements, though it does cover those as well. But it also shows you how to detect API support for things like offline storage or geolocation, as well as SVG, SVG-in-HTML and even which video codec the current browser supports.

One thing Pilgrim doesn’t cover is CSS 3 features (CSS 3 = HTML5). To detect which CSS 3 features are available in the current browser you can use Modernizer or you can roll your own code using a library like jQuery, which includes a support() method to check a wide range of browser features before executing code.

Apple iPhone 4 announced at WWDC

 At its WWDC keynote, Apple CEO Steve Jobs has announced the new iPhone: the Apple iPhone 4.

- iPad technology inside
- Overhauled camera HD video upgrade
- Video calling
- 24 June 2010 release in UK

"This is the most beautiful design you've ever seen," Jobs said as he showed off the glass-encased iPhone 4, which is apparently "24 percent thinner" than the current iPhone at just over 9mm thick.

It includes heaps of new features. One is a new five-megapixel camera. Apple promises this camera will be far better than other phone cameras at the same resolution. And in the live demo today, the cheers and applause seemed to back that up.

It'll also shoot HD video at 720p, and Apple has brought its Mac OS X editing app -- iMovie -- to the iPhone 4 for editing and sharing high-def video on the handset itself. It looks fab, though you'll have to pay for it. We expect it'll be under a fiver though.

As well, the iPhone 4's display includes a massively increased screen resolution -- 960 x 640-pixels -- with a pixel density claimed to be better than the human eye can see. That means sharper images, apps, media and text. There's also a front-facing camera for making Wi-Fi video calls to other iPhone 4 users -- not over 3G, though, sadly. This could change in the future though as mobile networks get better. It uses H.264 and Apple will make the "FaceTime" video calling app software an open standard. Theoretically, then, other phones can build in support for it for cross-platform chat.

Powering this is Apple's own A4 CPU -- the same processor found in the iPad. That, combined with a much larger internal battery, has helped Apple offer up to 300 hours of standby time, seven hours of 3G talktime, 10 hours of web browsing over Wi-Fi and 10 hours of video playback.

It runs iOS 4 -- that's right, iPhone OS 4 we've covered before, but with the "Phone" bit of the name dropped -- and includes iBooks, as featured first on the iPad, which has been updated to support Adobe PDF files natively. 

Inside is up to 32GB of flash memory, 802.11n Wi-Fi, HSDPA data connectivity, a secondary front-facing camera, GPS, accelerometer, a digital compass, and even a gyroscope for extremely precise detection of how the phone is being held and tilted.

The iPhone 4 will be launched on 24 June 2010 in the UK on O2.