CSS3 and HTML 5 Support for IE6-8

[NickB]

I was wondering what Chris and everyone else uses to force IE to work with CSS3 and HTML 5? I no longer want my designs to be limited by IE suckiness.

[jamygolden]

Yeah, modernizr is awesome. I use HTML5 Boilerplate as a basis for basically every project I work on. (It includes Modernizr, respond.js, etc.) Check it out.
Also you could use CSS3PIE to add support for rounded corners and drop-shadows in IE. I wouldn’t 100% count on it working though, always have a backup plan.

[NickB]

Thanks for the tips…

Either I have no clue what I am doing or modernizr does not work for me…

html:

test

css:

.article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

.audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

.audio:not([controls]) { display: none; }

.[hidden] { display: none; }

.test {background:#444; width:300px; height:300px; border:1px solid #fc2e2e;}

When it comes to JS I am a newbie but I added the script and it doesn’t do anything in IE8 or lower….

[jamygolden]

Modernizr doesn’t add support for anything. Modernizr allows you to detect for the ability or non-ability of a feature.
For example, detect for HTML5 audio, if it doesn’t have the audio, you could load up a flash player.

You should have a look at IE7.js too.

Getting HTML5 and CSS3 to ‘work’ on other browsers isn’t a quick thing. It takes work. There is no ‘Include JS file to fix all problems’. You’ll have to read up on what each ‘fix’ does so you can use it properly.

Also, your HTML is invalid HTML, it should be:

test

And you’ve started off each line of your CSS with a dot. It should be:

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

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

audio:not([controls]) { display: none; }

[hidden] { display: none; }

.test {background:#444; width:300px; height:300px; border:1px solid #fc2e2e;}

[NickB]

Not quite sure why the dots are there they are not in my css…. thanks for the heads up on the html and for explaining modernizr.

[OniLinkCR]

I tried to use CSS3 Pie, but IE 8 just freezes and restarts for no apparent reason, so I desisted. In the end, I figured that a browser not freezing is better than rounded corners and box shadow….

[paul_irish]

@NickB I’m just really curious, why are you using the XHTML doctype on your markup?

[Author]

Posts