How to get all the browsers playing ball

by .

This post was of course an April Fool's Day joke, check the post date ;) We can but dream of having a script like this one day. Oh and if you haven't checked out what the script does do, you really should, it's awesome.

At the beginning of the year, all seven of the HTML5 Doctors met up and started to discuss the problem of browser support within the realm of HTML5, CSS3 and all the sexy new APIs.

In the last year, riding the popularity of HTML5, a great number of JavaScript polyfills/shim/shams/what-have-you have been released, and the Modernizr project even maintains a list of these scripts.

But we've gone one step further.

What if you could include a single JavaScript library, and it automatically detected the state of the browser support for the latest technology, and where the browser is lacking, the JavaScript library plugs the missing gaps.

An über polyfill library if you will!

That's exactly what we've been working on for the last few months. Here today, we give you a new service from the HTML5 Doctors that will give your old and busted browser a kick up the backside and finally bring it up to scratch.

It goes without saying that this is a fairly mammoth task, so this is just the beta of the service, but we felt that it was in a good enough state to release to our loyal readers.

The Über Polyfill

So enough jibber-jabber, right? Let's get down and dirty with how to get using this library today.

That's it. By including this script in to a browser like, say IE6, it will have access to Web Storage, WebSockets, Web Forms and more.

We've also configured the service so that you can include just specific pieces of technology - so if you just want Web Forms, you would do:

And if you wanted to mix Web Forms with full CSS3 support:

And so on.

This is a hosted service by HTML5 Doctor, so you'll need to hotlink the script in your site. It needs to be included before you try to access the "native" API in your JavaScript. So you can include this service in the head element, or just before your own JavaScript - as you like.

Support

Currently the service supports the following specifications:

  • All of CSS3 (including selectors)
  • PostMessage and related messaging APIs
  • RDFa
  • Includes all the new HTML5 elements - article, section, etc
  • Live connections via: XHR2, EventSource and WebSockets
  • File API
  • Offline support
  • Offline events
  • Loading web pages APIs, most importantly, the History API (ref)
  • Storage API, including the events (which most browsers currently lack)

Obviously sexy HTML5 things like native video and audio are supported, and specifically, we've been able to ensure that all browsers support WebM (yep, even gave Safari a bit of kick to support WebM) that way you only need to encode your videos once (finally). There's lots more we're planning to do in the future to make developing for the web with HTML5 so much easier.

The Future

There's still a lot that can be done with this service, and we're already working on the next exciting feature will be the full DAP implementation - yes that does mean you'll be able to access your camera from an input element:

<input type="file" accept="image/*;capture=camera">

Pretty exciting stuff, eh? Let us know what you'd like to be included that isn't in this and we'll look at including it in the full release.

42 Responses on the article “How to get all the browsers playing ball”

  • Gavin says:

    OMG! WOW! AMAZING! ;-)

  • Oh Boy! I can’t wait to use the File API in IE6! So excuted!!

  • Francesco says:

    Awesome stuff!

    Too bad it doesn’t make coffee, though. :(

    ;)

  • Thomas C. says:

    Haha nice one :D

  • Gart says:

    Bwahahaha :D If only this were true. Great April fools guys :D

  • This is possibly the most ground breaking script of our time.
    We’ve got it running on some internal servers and the results are incredible!

    Once again you’ve excelled yourselves gentlemen!

  • First thought: Sweet.
    Second thought: What’s today’s date?
    Third thought: The source code of that js-file sure looks a bit special.

    :D

  • Billy Wenge-Murphy says:

    Not an April Fool’s joke: IE6 has a do-everything polyfill called “Chrome Frame”

  • Corey Dutson says:

    Basically what Ludvig said.

    I will add that i am very very sad about this.

  • Jay Robinson says:

    Francesco, we’ve got a script that makes tea!: http://jwr.cc/x/9m

  • Alhadis says:

    Reminder for self: Don’t trust other coders. xD

  • Alexandre Mercier says:

    Nice first-letter over effect on the list ;)

  • Angela says:

    Oh… that’s mean ;-)

  • Thasmo says:

    NO – you got me… :( xD

  • Tom says:

    Maybe it’s just because of the beta, but when hotlinking the script in a testsite (IE8, Windows XP) I get a ‘null is null or not an object’. Did I miss some implementation do’s or dont’s or is it because of the beta state.

    Very nice idea by the way, this should make backwards compatibility a lot easier!

  • Adrian Schmidt says:

    Haha… ran the js in Firebug… lmao

  • Dan Walsh says:

    Damn, you totally got me! ;-)

  • Jad says:

    !#$@%!!! You got me too!!

    I’ve just lost a half hour trying to apply the script….
    then I’ve started to read the comments…

    Well done… :-p :-)

  • 3LauraB says:

    Talk about getting hopes dashed! Major browser comedown now ,I hate April Fools, so gullable me , very funny ;)

  • Ryan says:

    Bastard…you got me!

  • Lorezo says:

    Don’t tell me it’s not true! =)

  • onno says:

    The joke is upon us all year long, with the state of browsers what they are. This is just a painful reminder.

  • Haha, nice one! Nearly had me there for a minute until you mentioned video/audio/WebM.

  • Nick Lowman says:

    Looks like that horse has eaten too many sweets.

  • Rudolph Gottesheim says:

    Great one, guys! Can’t believe you got me. :)

  • Kris says:

    File API in IE6? Can’t explain that.

  • Billee D. says:

    Awesome and thank you for making me shoot coffee out of my nose today. Rainbow-farting unicorns rule! :D

  • Paul d'Aoust says:

    This is not a very funny joke. :-( You lifted my spirits and then dashed them to the ground. Mercilessly.

  • Johnny5th says:

    *facepalm* I was so excited… I feel like an idiot.

  • morio says:

    CSS3 rectangles breaking 960 grid layout on IE6 reported the bug!

  • OMG, I’m used to read this blog, but now I need to add a comment. Or not, there is nothing to add, it’s perfect!

  • Liam says:

    Damn, you got me. I should’ve checked the publish date.
    Out of interest, does the script do anything? I get an innerHTML of null error on Chrome…

  • Chris says:

    That’s actually a little annoying. Yeah, I found it very bizarre that you claimed the script could add native video and WebM support. But apart from that, polyfills ARE a thing, you know. Worst of all is that adding the script to a page doesn’t do anything at all: No popup “April Fool’s!” message, nothing.

    Real time waster.

  • Remy Sharp says:

    Yeah, we spotted it doesn’t work when it’s included in the head element, but we really shouldn’t be including scripts in the head element anyway- should we?

    Here’s a working example: http://jsbin.com/uneyu3 (and the source code: http://jsbin.com/uneyu3/edit)

    In case you didn’t spot it – check out the feature list again, even try hovering over the list – there’s a clue in every first letter…

  • Liam says:

    In case you didn’t spot it – check out the feature list again, even try hovering over the list – there’s a clue in every first letter…

    Nice. Very subtle too.

    I still attach all my scripts to the <head>, I think it keeps things neater. I’m in the practice of wrapping everything in a ready event listener though. If it’s good enough for jQuery, it’s good enough for me!

  • Remy Sharp says:

    @Liam – bad practice there my friend. If you put JavaScript in the head element it blocks browser rendering, regardless of whether you use jQuery’s ready method. If a script is slow to load, your entire page will appear blank and appear, to the user, to have hung.

    More info here: http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

  • Liam says:

    Ah good point, thanks for the article link. Optimisations like this are of particular interest to me lately.

  • Dan says:

    I’m not sure I understand the joke! When I add the script to my page, nothing happens. It says it’s a null value.

  • While I like the practical joke, I have to report that this does not work as intended since apparently, the css is not optimal. Too bad, but a nice idea.

    Btw: are you planning to implement CSS4 artificial intelligent styling or the SVG2-HD vector video codec in future versions too? I’ve got IE 3 ready and waiting for that “fix”.

  • Totally agree with Mike Edward Moras anyways thanks for make a fool of me :D

  • Rhodders says:

    Do we know when we can expect to see the DAP working?

  • Leave a Reply to Liam

    Some HTML is ok

    You can use these tags:
    <a href="" title="">
    <abbr title="">
    <b>
    <blockquote cite="">
    <cite>
    <del datetime="">
    <em>
    <i>
    <q cite="">
    <strong>

    You can also use <code>, and remember to use &lt; and &gt; for brackets.