<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Credit for that to Remy Sharp, Jon Neal, John Resig and anybody else who contributed to that idea. Also for the benefit of those non-hip browsers, it’s best to reset many of the HTML5 elements to block-level as they should be:

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

Now we’re all set to use and style HTML5 elements. But wait! What happens if we dynamically add HTML5 to the page via JavaScript.

var s = document.createElement('div');
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);

Or in jQuery:

$("body").append("<section>Hi!</section>");

Hip browsers do fine, but Internet Explorer will once again not recognize the new element and not apply CSS to it.

Joe Bartlett has written a great work-around to the problem called HTML5 innerShiv and I thought more people should be aware of it.

Using it

Please note that this script does not require jQuery. It’s just vanilla JavaScript and will work with any library or library at all.

1. Download

Download the script and insert it onto your page. Or copy and paste the script into other JavaScript you are already loading if you want to avoid an extra HTTP Request.

2. Wrap all HTML content in innerShiv function before inserting

Here is the same jQuery example as above, made to work using innerShiv:

$("body").append(innerShiv("<section>Hi!</section>"));

Quick demo.

Remember to check out Joe’s page, which does a better job of explaining things.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Most of us web folk are hybrids of one sort or another, but Todd Dominey was one of the first web designers to combine exceptional graphic design talent with serious mastery of code.

Being so good at both design and development that you could easily earn a fine living doing just one of them is still rare, although it looks like the future of our profession. One of the first serious designers to embrace web standards, Todd was also one of the few who did so while continuing to achieve recognition for his work in Flash. (Daniel Mall, who came later, is another.)

Finally, Todd was one of the firstalong with 37signals and Coudal Partnersto abandon an enviably successful client services career in favor of full-time product development, inspiring a generation to do likewise, and helping bring us to our current world of web apps and startups.

A personal project that became an empire

In Todd’s case, the product was SlideShowPro, a project he designed for himself, which has grown to become the web’s most popular photo and video slideshow and gallery viewer. When you visit a photographer’s portfolio website, there’s an excellent chance that SlideShowPro powers its dynamic photo viewing experience. The same is true for the photo and video gallery features of many major newspaper and magazine sites, quite possibly including your favorites.

But deliberate lack of Flash support in the iPad and iPhone, while lauded here on February 1, 2010 as a win for accessible, standards-based design (“Not because Flash is bad, but because the increasing popularity of devices that dont support Flash is going to force recalcitrant web developers to build the semantic HTML layer first”), presented a serious problem for developers who use SlideShowPro and readers who enjoy browsing dynamic photo and video galleries.

Mr Dominey has now solved that problem:

SlideShowPro Mobile is an entirely new media player built using HTML5 that doesnt require the Flash Player plugin and can serve as a fallback for users accessing your web sites using these devices. But its not just any fallback its specially designed for touch interfaces and smaller screen sizes. So it looks nothing like the SlideShowPro player and more like a native application thats intuitive, easy to use, and just feels right.

The best part though is that because SlideShowPro Director (which will be required) publishes the mobile content, youll be able to provide the mobile alternative by simply updating the Flash Player embed code in your HTML documents. And just like when using the SlideShowPro player, because Director is behind the scenes, all your photos will be published for the target dimensions of these devices which gives your users top quality, first generation images. The mobile player will automatically load whatever content is assigned to the Flash version, so the same content will be accessible to any browser accessing your web site.

A public beta will be released in the next weeks. Meanwhile, there is a video demo. There’s also an excellent Question and Answer page that answers questions you may have, whether you’re a SlideShow Pro customer or not. For instance:

Why mobile? Why not desktop?

We believe that (on the desktop) Flash is still the best delivery method for photo/video galleries and slideshows for it provides the most consistent user experience across all browsers and the broadest range of playback and customization options. As HTML5 support matures across all desktop browsers, well continue to look into alternate presentation options.

Into the future!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Now online for your listening and viewing pleasure: in Episode 2 of The Big Web Show, Dan and I chat with Jeremy Keithdesigner, developer, content creator, agency co-founder, speaker extraordinaire, and author of HTML5 for Web Designers (A Book Apart, 2010). In this hour-long video podcast, we explore the goals, process, and inspiration behind the book, and discuss what HTML5 means for web creators and consumersfrom semantics to strategy, accessibility to implementation.

• The Big Web Show Episode 2: HTML5 For Web Designers
• The Big Web Show Episode 1: Web Fonts
• HTML5 For Web Designers by Jeremy Keith (A Book Apart, June, 2010)
• Bulletproof Ajax by Jeremy Keith (New Riders)
• DOM Scripting by Jeremy Keith (Friends of Ed)
• Jeremy Keith’s Huffduffer (“Create your own podcast”)
• Adactio: Journal Jeremy Keith’s blog
• Jeremy Keith on Twitter

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

When Mandy Brown, Jason Santa Maria and I formed
A Book Apart, one topic burned uppermost in our minds, and there was only one author for the job.

Nothing else, not even real fonts or CSS3, has stirred the standards-based design community like the imminent arrival of HTML5. Born out of dissatisfaction with the pacing and politics of the W3C, and conceived for a web of applications (not just documents), this new edition of the webs lingua franca has in equal measure excited, angered, and confused the web design community.

Win free copies of HTML5 For Web Designers on Gowalla!

Just as he did with the DOM and JavaScript, Jeremy Keith has a unique ability to illuminate HTML5 and cut straight to what matters to accessible, standards-based designer-developers. And he does it in this book, using only as many words and pictures as are needed.

Watch Jeremy Keith discuss HTML5 with Dan Benjamin and me live on The Big Web Show this Thursday at 1:00 PM Eastern.

There are other books about HTML5, and there will be many more. There will be 500 page technical books for application developers, whose needs drove much of HTML5s development. There will be even longer secret books for browser makers, addressing technical challenges that you and I are blessed never to need to think about.

But this is a book for youyou who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences. Call it your user guide to HTML5. Its goalone it will share with every title in the forthcoming A Book Apart catalogis to shed clear light on a tricky subject, and do it fast, so you can get back to work.

4 May 2010
Jeffrey Zeldman, Publisher
A Book Apart “for people who make websites”
In Association with A List Apart
An imprint of Happy Cog

The present-day content producer refuses to die.

And don’t miss…

• Read Chapter One free in today’s issue of A List Apart!
• The author, Mr Jeremy Keith himself, shares his thoughts!
• Creative director Jason Santa Maria discusses the design of A Book Apart!
• Editor Mandy Brown discusses the business side of A Book Apart!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.