Modernizr, html5shiv, ie7.js and CSS3 Pie. What to use and when?

Question

I'm just starting to use HTML5 and CSS3 in my docs. I understand that JavaScript should bring Internet Explorer speed with these new tags and styles, but I don’t know what to use and when!

My plan was to use html5shiv and IE9.js to keep track of HTML5 tags, as well as transparent png (and any other nasty bugs that they fix), but then Modernization and CSS3 Pie were brought to my attention.

My question is: if I use Modernizr, does it take care of my need for html5shiv as well as IE9.js? Or should I include them as well? What is overlap, if any?

And what does CSS3 Pie do that Modernizr or others don't? Or vice versa?

I appreciate your guys to help. Let me know what you do!

Answer 1

I have extensive experience working with all of these, using them for several years each.

Modernizr

Enables functionality HTML5shiv Also does a lot more - if you do not use other functions, then do not use it, it slows down the loading of pages, but is worth it if you need it!

HTML5shiv

Very little, just fix html5 elements in IE, nothing more.

CSS3PIE

Allows the use of border radius, gradients and shadow in older versions of IE. It can also enable PNG in IE 6. Adds a noticeable delay to the page loading.

ie7.js (and ie9.js)

Gives you lots of CSS3 selectors, minimum and maximum widths, multiple classes, and fixed positioning. Also, if you want, png can be fixed. It does not seem to interfere.

Conclusion

My advice is divided into two categories:

If you just use new (two years on the Internet!) Elements and CSS3 selectors, use ie9.js + html5shiv. It is lightweight and simply allows you to do things without forgetting that IE6 does not support anything.

If you use a lot of CSS3 stuff, then CSS3PIE will sort the border radius and shadow box. Gradient support seems a bit flaky, so I always used a backup image. Modernizr allows you to easily provide various properties to browsers with various support. I mainly used this to determine if the browser has CSS transitions and transformations, as they are useful for any image slider or content carousel. It’s worth using the configuration tool to include only those functions that you want - the webforms material displays a text field with 50 in it for a few milliseconds, so it’s worth disconnecting if you do not want to.

Hope this is helpful!

Answer 2

I would recommend that you use only what you need. Create an application in a browser that supports the features you use, and periodically check with other supported browsers. If something does not work correctly, find the appropriate fix, be it html5shiv, IE9.js, Modernizr, or CSS3 Pie. You are not going to use all the new features in HTML5 and CSS3 on the same page, so you do not need to include every polyfill library. Wait until you find problems with the features you are trying to use, then try to find the library you need for this.

Answer 3

I used mainly CSS3Pie ... it works fine. But this afternoon I tested it on my laptop with I.E8, and there was a problem with it ... it turned off some css lines ... when I deleted the css3pie code, my site got double speed ... then I came through columns with people arguing about slowing down css3 ... So, at the moment I'm busy looking for another way for IE7 and IE8 to have border radius and shades.

If you want to use it ... please consult, as these are NOT official corrections.