Apple-Flash fiasco has been going on for a while and Apple hates Flash you know that too — so you may not expect Flash to be there in iDevices.In a alternative solution to Flash, Apple is supporting HTML 5 and Steve jobs stated that he thinks HTML5 is the new standard of the future of web.To add more weight age to this statement saying that Flash is no longer required Apple has launched a new section of its website dedicated to showcase the capabilities of the next generation of Web standards that fall under the HTML5 umbrella.

The feature shows “how Apple’s Safari scheme browser, newborn Macs, and newborn Apple mobile devices every hold the capabilities of HTML5, CSS3 and JavaScript.These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t add-ons to the web.
It’s nice to see Apple (or anyone for that matter) talking about HTML5 and mentioning more than just video. The site showcases demonstrations of video, typography, a picture gallery, transitions between images, audio, 360-degree ikon rotations, and VR. It also has a nice photo gallery that looks and behaves just like former Apple designer Mike Matas’ amazing photo-gallery site.The VR demonstrate requires a application that supports CSS 3-D transforms — which, Apple indicates, effectuation Safari on Mac OS X Snow Leopard or on a figure using the iPhone OS, or the stylish WebKit Nightly Build.

The demos only work on the most recent versions of Safari that can be found on Mac, iPhone, iPod touch and iPad devices. Users of other browsers–including those based on WebKit, the same underlying HTML rendering engine used by Apple’s browsers–are directed to download Apple’s browser.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 Google Chrome. 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, the user agent in Firefox and Chromium can be tweaked and can be observed some of them 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.
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 the favorites. 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 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.What Apple doesn’t tell us is that one could create a similar showcase in Flash with far more advanced effects, which are way out of reach of HTML5 and CSS3.Judging from the demos, the future of HTML5 applications looks bright indeed.