Internet Explorer 7-9: Choosing Tools for Maximum CSS3, HTML5 Support

You've probably already heard about things like CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries , etc. It will be about how to use all these tools together: the fact is that conflicts between them have been repeatedly noticed. Well, if you do not quite understand why you need HTML 5 and CSS 3, then I will not impose these technologies; I’ll just say that they can reduce layout time (although this is not the only plus).

What we need:

- HTML 5 Boilerplate - these are just templates for css, html and other things, so that you don’t have to start working with an empty file. The huge work of other typesetters lies in these lines of code: various bugs for IE are fixed, styles are prescribed in case the user wants to print a document, etc.

- Modernizr - allows you to use semantic HTML 5 tags for IE, and also adds convenient classes to tags; for example, for Internet Explorer 7, the .ie7 class will be added to html, which we can then use to configure the display of the html element only in this browser (after all, it is often necessary to tweak some elements only for a specific version of IE).

- Selectivizr and IE9.js for CSS3 selectors - in some cases it is much more convenient and faster to select html elements with the help of constructs such as: nth-child (2) or: nth-last-of-type (1) than register classes in html, and select an element by its class.

- CSS3 media queries- for responsive design (a convenient technology that allows you to change the display of elements depending on the screen resolution, and thus we can make up the site for mobile devices)

- CSS3 Pie - a great thing for creating shadows, rounded corners, gradients, etc.

- boxsizing.htc- use to support the 'border-box' in IE7. Why is this? When we set padding for elements, then in a normal situation the width (height) of an element also increases, that is, in addition to padding, you also have to monitor the width (height) of the element. With this tool, we can safely indicate padding without having to calculate the width (height) each time. A simple example: create an input element and set padding for it - the width (or height) will increase, which often adds extra work.

So, if you plan to use these tools together to support CSS 3 and HTML 5 in IE 7-9 browsers , here are some problems you might expect:

• Selectivizr
  
  • does not work in the local directory, but works on the server
  • doesn't work with jQuery, but works with MooTools
  • constructions of the form: last-child: after without IE9.js do not work
• IE9.js
  • constructions of the form: last-child: after without Selectivizr do not work
• CSS3 Pie
  • PIE.htc does not work with Selectivizr
  • PIE.htc does not work with IE9.js
  • PIE.htc does not work for elements that use boxsizing.htc

In order to get rid of the headache, use the already proven template, which can be downloaded here and on github . The core of this template is the HTML5 Boilerplate.
Clarifications :

• jQuery is minimized and located in plugins.js to reduce the number of requests to the server (and thereby speed up page loading)
• PIE.js is used instead of PIE.htc to avoid the above problems
• PIE.js is also used for the 9th version of IE, so that you can implement the gradient (maybe not only that)
• Selectivizr only works on the server (for me this is a mystery), therefore, to fully work, it is recommended to include your local server (if you are typesetting in a local directory)
• In PIE.js, a couple of lines are added at the very end using jQuery to work with border-radius, box-shadow and -pie-background
• The creators of the HTML5 Boilerplate recommend copying all their javascript code into 1 file - script.js (this way we reduce the number of server requests if you use several script files)

Useful resources:

• HTML 5 Cross Browser Pollyfills - many different designs for different purposes, which have one thing in common: they allow you to work with HTML 5 and CSS 3 already yesterday !, even if browsers do not support them
• caniuse.com - here you can see what web technologies are supported by browsers