4 solutions to browse HTML5 & CSS3 website with legacy IE
- Wynn Teo
- Jun 2, 2017
- 2 min read
Desktop Browser Version Market Share, Aug 2015- Copyright by NETMARKETSHARE
HTML5 & CSS3 have became the very first choice of web designers to create fanciful modern web layout. However, not all IE version fully support HTML5 and CSS3. Above figure clearly shown that IE 8.0 still being most used as web browser in IE Market Shares. As a web designer/developer, it is better to take care of our website layouts to accommodate for earlier versions of IE in order to give our website visitors better browsing experience.
Below are a few methods that play a trick to make your website run better on a legacy IE browser.
htmlshiv.js
IE prior to version 9 doesn’t allow unknown elements to be styled without JavaScript. Remy’s HTML5shiv creates HTML5 elements (eg. main, header, footer) via JavaScript. It get IE to acknowledge the new elements in HTML5. You can download html5shiv.js and insert in the head element.
selectivizr.js
Selectivizr is a JavaScript used to emulate unsupported CSS selectors and properties in IE 6-8. You can download selectivirz.js and insert in the head element.
respond.js
Respond is a fast and lightweight polyfill for min/max-width CSS3 MediaQueries which support responsive web designs in IE 6-8 that don’t support CSS3 Media Queries. You can download respond.js and insert in the head element.
@media screen and (min-width: 480px){ ...styles for 480px and up go here }
Conditional Comments
IE support conditional comments which allow us to target blocks of HTML toward all IE browsers. It first detect user’s browser version and add the tag class accordingly. Afterwards, we can do a trick by writing
.ie6 xxx {} .ie7 xxx {} This trick doesn’t require to load any JavaScript.
<!– [if lt IE 7 ]> <html class=”ie6″ lang=”en”> <![endif]–> <!– [if IE 7 ]> <html class=”ie7″ lang=”en”> <![endif]–> <!– [if IE 8 ]> <html class=”ie8″ lang=”en”> <![endif]–> <!– [if IE 9 ]> <html class=”ie9″ lang=”en”> <![endif]–> <!– [if (gt IE 9)|!(IE)]><!–> <!–<![endif]–>
Here you go!
Comentarios