The fine art of Browser Sniffing

Sun, 3 Jul 2011

Further experiments with HTML 5 and Flash.
Flash is a great tool for creating animations. It is usable on most browsers and most platforms and creates compact files which are easy to place on a web page. The problem is that they are not Web Standard compliant and they don’t work on the growing iPhone and iPad market. Instead, the Elders of the Internet recommend that we use HTML 5 animation. This would be all well and good but the HTML 5 standard isn’t yet complete, different browsers use different techniques so you need separate code for each browser you want to display with. On top of that the tools for creating animation with HTML 5 are just not up to the job. Enter Google with its new tool Swiffy. Swiffy takes a flash file (an .swf file, pronounced ‘swiff’- hence the name Swiffy) and converts it into an HTML file. This means that I can use Flash to create animations then convert them and display as appropriate. The downside – there is always a downside – is that the HTML files don’t display in some browsers.
To that end I have done a bit of work setting up a way of displaying either a flash file or an HTML file depending on which browser you, the viewer, are using.
In the animation below you should see, first of all, the name of the browser that you are using, under that it will say either HTML 5 if you are using Google Chrome or Safari or Flash if you are using anything else.

Below that should be the animation.
Please could you let me know via comments if this is working. (Preferably with browser name and operating system, Windows, Linux, Mac etc) Fingers crossed that this might be the solution that I have been looking for!

No iFrame ‘;
print ‘
Using HTML 5 ‘;
}
else{
print’

‘;
print ‘
Using Flash’;
}
?>

Text

  To receive new blog posts by email

Comments (15)

  • machina eX July 3, 2011 at 5:38 pm

    works fine on macos 10.5 in

    works fine on macos 10.5 in firefox 5.0

     

    although i would like to see more people just say no to apple as long as they block flash on their Ipads and pods…

    • robives July 3, 2011 at 5:41 pm

      Indeed – that would be much

      Indeed – that would be much easier in the long run!

      • clintfern July 3, 2011 at 9:25 pm

        WinXP using –
        Chrome

        WinXP using –

        Chrome 12.0.742 etc – HTML5

        Safari – HTML 5

        Firefox 5.0 – Flash 🙁

        Opera 11.5 – Flash 🙁

        Are you using http://www.modernizr.com/ for the browser sniffing?

        • Darren Griffin July 4, 2011 at 6:03 am

          Working fine here under OS X

          Working fine here under OS X Lion and Safari.

        • robives July 4, 2011 at 10:08 am

          @clintfern: What do you see

          @clintfern: What do you see in Firefox and Opera? I've written a small Drupal module for Browser sniffing – thanks for pointing out modernizr though – looks good!

          • clintfern July 4, 2011 at 9:16 pm

            Firefox 5.0 gives –
            Mozilla

            Firefox 5.0 gives –

            Mozilla Firefox
            Using Flash

            Opera 11.50 gives

            Opera
            Using Flash

             

            The animation works fine for both, although have to say the HTML5 looks nicer than the flash one.

            Have just tested it in IE6 which I keep for testing purposes and it fails, but as IE6 is almost dead, thankfully, I wouldn't worry about it.

  • Smelter July 4, 2011 at 12:14 pm

    Looks fine here Rob
    WinXP Pro

    Looks fine here Rob

    WinXP Pro SP3, IE8, Flash V10,3,181,26.

  • Deal July 4, 2011 at 12:45 pm

    Working fine on my computer.

    Working fine on my computer. Windows 7, Internet Explorer, Flash

    Looksa like maybe you've "got it."

  • JayHavvic July 4, 2011 at 3:24 pm

    Rob:
    Looks like you have

    Rob:

    Looks like you have nailed it. Looks good on:

    Win Vista Service pack 2

    FireFox: 5.0- Flash

    Chrome: 12.0.742.112 – HTML5

    Safari: 5.0.5 – HTML5

    iPhone 3G, 3, Safari, HTML5

    and

    PortableApps (running off an USB drive)

    FireFox portable, :  3.6.18 – Flash

    all working with animation and color.

    The HTML line look way better than the flash. Especially clear on the iPhone. Look like lines no jaggies.

  • maxlrainer July 4, 2011 at 6:03 pm

    Hi Rob,
    works fine on windows

    Hi Rob,

    works fine on windows vista, sp 2 and Firefox 5.0 – Flash and IE 7 – Flash.

    Well done.

  • carole dwinell July 4, 2011 at 9:33 pm

    I’m running Mac OS10.5.8 on

    I'm running Mac OS10.5.8 on my MacBook using Safari. The animation works really good. 

     

    Carole. 

  • Zrowny July 5, 2011 at 4:28 am

    Using Windows XP Home SP3

    Using Windows XP Home SP3 with Opera 11.5 and It works fine with flash! Congratz on finding a solution that works!

    • DaveC July 5, 2011 at 7:07 am

      IE9, Windows7 (service pack

      IE9, Windows7 (service pack 1), Flash – works well

  • Mayer Brenner July 5, 2011 at 5:25 pm

     

    Looks great now. I’m

     

    Looks great now. I'm seeing this message:

    Apple Safari
    Using HTML 5 …

    followed by the animation, on my configuration with:

    Mac OS X 10.6.8

    MacBook Pro with Intel Core i7

    Safari 5.0.5

    Glad you're looking to support non-Flash platforms – no point in getting stranded with a technology heading for marginalization!

  • SFCohen July 5, 2011 at 5:44 pm

    Windows 7 + Firefox 5.0 =

    Windows 7 + Firefox 5.0 = animation is working.  😉

    [=sfc=]

Comments are closed.