CSS3 and HTML5 For the masses: HTML5Shiv and CSS3 PIE make it possible

Thursday, July 29th, 2010 | Business | by

Everywhere I look on the web (the web developer web that is) is CSS3 this, jQuery that, shadows, HTML5.

Such a tease, what about our minimum browser requirements spec?  Damn IE6 is yet again 10% of the target demographic.

Not only is IE6 the problem, but so is the most recent IE8, as well as IE7.  They just don’t support CSS3 and HTML5.

Now we have some solutions…

CSS3 PIE for Internet Explorer

CSS3 PIE is a plugin that enables IE6-8 through the use of the ever useful (yet slightly annoying) .htc file.  We’ve used it before to fix (somewhat) PNG transparencies, and now it lets CSS3 PIE work.

CSS3 PIE enables the following CSS3 properties on IE6, IE7 and IE8 (IE9 will have support out of the box):

  • border-radius
  • box-shadow
  • border-image (still preliminary support)
  • -pie-background (yes, not the default CSS3 name, but it still works)
  • -pie-watch-ancestors (it just means it works like other CSS3 changes)
  • rgba colors – yay alpha!
  • gradients

Load up your favorite IE6 testing environment (you do have one don’t you?   I prefer a windows VM with it installed, go Windows 7) and check out the demos.

HTML5 Shiv

HTML5 has all sorts of great new elements such as <header>, <nav>, etc.  We can finally build pages without having tons of <div class=”header”> etc, and have the terms standardized across websites.

Internet Explorer will not recognize these unofficial elements.  Unlike Chrome, Firefox, Opera, and the rest of the browser world who will gladly assume the element is acceptable, and render / CSS just like any other element — Internet Explorer ignores them.  If you used <header> tags on your site, Internet Explorer (yes, even 8 ) will just ignore the existence of the code.

HTML5 Shiv (by remysharp) takes advantage of the Internet Explorer rendering engine’s ability to handle these elements only after they have been inserted into the DOM via document.createElement — and works well.

Related Posts

Tags: , , , , , , , ,

4 Comments to CSS3 and HTML5 For the masses: HTML5Shiv and CSS3 PIE make it possible

Gran Canaria
August 6, 2010

Well I hope they fix that damn IE soon, and I do not care how. I have a bunch of problems related to IE (who hasn’t?).
Would take down the pressure from a web developer for sure.
I usually test in Firefox and then load the IE and I become “happy” from what I see… hehehe!
Just kidding, I usually fix everything.

Webbie
August 23, 2010

IE will always be a problem. They should just drop anything before version 8 period. Whatever they say they’ll fix will probably cause more problems.

Emiliano
April 1, 2011

IE6 testing environment? STOP developing for that piece of CRAP!

Anyway, PIE and HTML5Shiv are awesome, thank you =)

seangw
April 1, 2011

I wish I could stop developing for IE6.

I make all my clients aware as to exactly how out of date IE6 really is (it’s 10 years old!), but some clients still need IE6 support unfortunately.

Leave a comment

*


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template