Responsive Design and IE8

Translation of an article in The Guardian Mobile-first Responsive Web Design and IE8 about the development of an adaptive version of the online edition, more precisely about how to implement support for IE 8. I also advise you to look at the interesting Case Study process, this is very informative.

A few days ago, a new, 11th version of the Internet Explorer browser was included in Windows 8.1, but 4.5% of The Guardian readers still use IE 8. And the developers of the new adaptive version of the site could not ignore the preferences of these users.
')
The main problem was the poor support of the old browsers necessary for responsive design features. It was necessary to implement support for IE 8 without affecting the work in other, more modern browsers.

IE 8 bottlenecks

Here is a list of technologies that could not be used:

• rem
• media queries
• rgba (), hsla ()
• : last-child,: nth-child (),: first-of-type, â €
• : empty
• : not ()
• calc ()
• .ttf, .otf, .woff fonts
• multiple backgrounds
• background-size
• vw, vh, vmin, vmax
• : checked,: valid,: invalid,: required
• box-shadow
• transforms (rotate, translate, skew, scale, matrix)
• border-radius
• opacity
• getElementsByClassName
• getComputedStyle
• addEventListener
• geolocation
• canvas
• HTML5 video
• HTML5 audio

This was a big problem because it was planned to use the most modern technologies and develop an easy and convenient website. To support IE 8, you need to additionally prescribe some functionality, which will lead to a deterioration in the overall performance of the site.

It was decided to start with the implementation of Media Queries support in Internet Explorer 8, which is a very important part for large news and information sites.

global.css

File styles for all browsers except IE 8 and below. We use mq () (SASS) instead of the usual Media Queries:

// global.scss @import "mq"; .element { //   @include mq($from: mobile) { color: green; } //  @include mq($from: tablet) { color: blue; } //  @include mq($to: desktop) { color: red; } } 

This goes into the following code:

 // global.css @media all and (min-width: 18.75em) { .element { color: green; } } @media all and (min-width: 37.5em) { .element { color: blue; } } @media all and (max-width: 56.1875em) { .element { color: red; } } 

old-ie.css

To support older user agents, set $ mq-responsive to false:

 // old-ie.scss $mq-responsive: false; @import "mq"; .element { @include mq($from: mobile) { color: green; } @include mq($from: tablet) { color: blue; } @include mq($to: desktop) { color: red; } } 

It turns out:

 // old-ie.css -   IE <= 8 .element { color: green; color: blue; } 

As a result, the media query was " rasterized ", support for IE 8 was implemented. Earlier versions will only be able to support the min-width value.

It remains only to separate old-ie.css and global.css by user-agent:

 <!--[if (gt IE 8) | (IEMobile)]><!--> <link href="global.css" rel="stylesheet" /> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]> <link href="old-ie.css" rel="stylesheet" /> <![endif]--> 

As a result, the described method has several advantages:

• Mobile users do not download extra code intended for older browsers.
• Internet Explorer does not download much more code than it normally does.
• When it comes time to cancel support for IE 8, it will be easy to implement.

You can touch Sass MQ live using Sass MQ online .

GitHub link