Ready Designs

4 8-bit dragons in a line

MIX11: Filling the HTML5 Gaps with Polyfills and Shims


April 14th, 2011

“Filling the HTML5 Gaps with Polyfills and Shims” by Rey Bango.

Filling the HTML5 Gap with Polyfills and Shims

The session video is now posted live on Microsoft’s Channel 9:


Since this is a liveblog, please read from the bottom of the post, upward.

Thu, Apr 14, 11:14:29am PST

Fantastic session with Rey Bango. Great blend of broad and specific information, enthusiasm, and further reading.

Thu, Apr 14, 11:10:41am PST

Recommended books on HTML5: Introducing HTML5 by Lawson & Sharp; HTML5 for Web Designers by Keith; CSS3 for Web Designers by Cederholm #mix11

Thu, Apr 14, 11:08:57am PST integrates with Modernizr to test for features and load the scripts needed on the fly. #html5


Thu, Apr 14, 11:08:08am PST

Take Away: Use feature not browser detection; Use Modernizr; Opt for a polyfill or shim that mimics a standard API.

Filling the HTML5 Gap Take-Away

Thu, Apr 14, 11:01:36am PST

HTML5 Graceful Video DegredationCan define the object tag or an iframe (Silverlight or Flash) as a fallback within the video tag for non-modern browsers. (Or if you don’t have the ability to encode your video in multiple codecs, the browser will fall back to the 3rd party.)


Thu, Apr 14, 11:00:28am PST

Fortunately, multiple video codecs can be defined in as fallback options, solving the codec issue.


Thu, Apr 14, 10:59:30am PST

HTML5 video tag is nice and clean, but the video codec debate rages on, leaving different browsers supporting different features.

HTML5 Video Codec Support Chart

Thu, Apr 14, 10:57:43am PST

Third, load up a shim: start by loading up jQuery then load jquery.corner (or whatever feature is missing) to complete the picture.

Thu, Apr 14, 10:55:34am PST

Next, load up a standard reset defining styles for the new HTML5 semantic tags, including defining the proper ones as Block.

Thu, Apr 14, 10:54:48am PST

Solving the HTML5 semantic tag styling issue: load up the Modernizr library to load up the shim that creates the new elements.

Thu, Apr 14, 10:51:33am PST

Sadly, older browsers don’t recognize the new HTML5 semantic tags. :( You can’t style a non-recognized element.

Thu, Apr 14, 10:50:02am PST

HTML tags have no semantic meaning, hence the new HTML5 layout tags.

Thu, Apr 14, 10:49:04am PST

Be sure you vet the code when relying on polyfills or shims; you may also need to maintain it yourself.

Thu, Apr 14, 10:47:22am PST

Big list of polyfills: http://bit.lyb5HV1x (some good, not so good).

Polyfills vs Shims & Frequently Used Polyfills

Thu, Apr 14, 10:46:33am PST

Polyfill: replicates a standards API. Shim: Provides own API.

Thu, Apr 14, 10:45:01am PST

Awesome. We just got treated to the Hamster Dance in a demo.

Hamster Dance at MIX11

Thu, Apr 14, 10:43:15am PST

Modernizr library is good for feature detection support, prevents insanely long code detection blocks.

Modernizr Demo at MIX11

Thu, Apr 14, 10:39:35am PST

Detect for features, not the browsers themselves. Much more reliable, future-proof method.

Benefits of Feature Detection

Thu, Apr 14, 10:36:24am PST

The issue isn’t just older browsers, but also browser fragmentation. Many obscure ones don’t fit in common user-agent-string.

Browser Fragmentation: Obscure Browsers

Thu, Apr 14, 10:34:21am PST

This speaker is amazingly excited about HTML5/CSS3. Love it. #mix11

Thu, Apr 14, 10:32:34am PST

Now at “Filling the HTML5 Gaps with Polyfills and Shims”. He plugged right off.

Script Junkie

One Response to “MIX11: Filling the HTML5 Gaps with Polyfills and Shims”

  1. @readydesignlive all abt #Modernizr and #yepnope #MIX11

Leave a Reply

CommentLuv badge

» «
Find out about new freebies, guest posts, discounts and other cool stuff:
Privacy Policy
* = required field

powered by MailChimp!

Happy Folks

    • Roxanne is an extremely talented programmer. She is able to take an extremely complex storyboard and turn it into a beautiful website. There is no project too big or too small that she can't handle.

      Rachael Masek, UWF Webspinners

    • [Roxanne] brings along creativity, pro-activeness, enthousiasm, a high level of skill and she will think outside of boxes. She's also a quick learner and a very pleasant person to work with.

      Annelies Draaijer, Raglan Shire

    • Roxanne will grasp the bigger picture of any job and is one of those rare species that combines technical skill, creativity and functionality.

      Annelies Draaijer, Raglan Shire

    • When a concern comes up that she knows about, she's usually suggesting solutions before I even come to her to discuss the problem.

      William Kammer, BDI

    • I would hire Roxanne for another project anytime I have one and feel confident she would do a tremendous job.

      Rachael Masek, UWF Webspinners

    • Roxanne shows her skills in social media everyday by managing numerous accounts and keeping them updated to attract traffic. She's capable of creating an online presence and keeping it within the tone and attitude the company desires.

      William Kammer, BDI

    • Roxanne Rocks! Super quick turnaround, amazing communication and a pleasure to work with. She's the best and I highly recommend her for your website/design needs

      Andrea Morelli, Impetuous Style

Ready Designs on LinkedIn

Flying Green Dragon