Internet Explorer 7-9: Choosing Tools for Maximum CSS3, HTML5 Support
Probably, you have already heard about such things as 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 will simply say that they allow you to reduce the layout time (although this is not the only plus).
What we need:
- HTML 5 Boilerplate is just templates for css, html and other things, so that you do not have to start working with an empty file. In these lines of code lies the tremendous work of other web designers: various bugs for IE have been fixed, styles have been registered 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, a .ie7 class will be added to html, which we can then use to customize the display of the html element only in this browser (as 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 choose html elements using such constructions as: nth-child (2) or: nth-last-of-type (1), than to prescribe classes in html, and make an item selection by its class.
- CSS3 media queries - for responsive design (convenient technology that allows you to change the display of elements depending on the screen resolution, and thus we can impose a site for mobile devices)
- CSS3 Pie is 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 specify padding for elements, in the usual situation the width (height) of the element also increases, that is, in addition to the padding, you also have to keep track of the width (height) of the element. With this tool, we can safely specify the 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 of the problems you can expect:
In order to get rid of the headache, use the already proven template, which can be downloaded here and on github . The basis of this template is HTML5 Boilerplate.
Clarifications :
Useful resources:
What we need:
- HTML 5 Boilerplate is just templates for css, html and other things, so that you do not have to start working with an empty file. In these lines of code lies the tremendous work of other web designers: various bugs for IE have been fixed, styles have been registered 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, a .ie7 class will be added to html, which we can then use to customize the display of the html element only in this browser (as 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 choose html elements using such constructions as: nth-child (2) or: nth-last-of-type (1), than to prescribe classes in html, and make an item selection by its class.
- CSS3 media queries - for responsive design (convenient technology that allows you to change the display of elements depending on the screen resolution, and thus we can impose a site for mobile devices)
- CSS3 Pie is 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 specify padding for elements, in the usual situation the width (height) of the element also increases, that is, in addition to the padding, you also have to keep track of the width (height) of the element. With this tool, we can safely specify the 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 of the problems you can expect:
- Selectivizr
- does not work in local directory, but works on server
- does not 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 basis of this template is HTML5 Boilerplate.
Clarifications :
- jQuery is minimized and located in plugins.js to reduce the number of requests to the server (and thus speed up the page load)
- 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 a gradient (perhaps not only that)
- Selectivizr works only on the server (for me this is a mystery), therefore for full work it is recommended to enable your local server (if you type in the local directory)
- In PIE.js, at the very end, a couple of lines are added using jQuery to work with border-radius, box-shadow and -pie-background
- The creators of HTML5 Boilerplate recommend copying all your javascript code into 1 file - script.js (so we reduce the number of server requests if you use several files with scripts)
Useful resources:
- HTML 5 Cross Browser Pollyfills - many different developments for different purposes, 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 which web technologies are supported by browsers
Source: https://habr.com/ru/post/150727/
All Articles