In-Depth
VSM Goes Responsive, Part 3: Cross-Browser Support for Responsive Design
Rodrigo Munoz walks you through how to fix two of the most challenging Internet Explorer 8 and Internet Explorer 7 responsive design bugs: media queries and box-sizing.
- By Rodrigo Munoz
- 08/05/2013
In Part 1 and Part 2 of "VSM Goes Responsive," I went over how to make the Visual Studio Magazine Web site responsive. Now it's time to look into how to deal with browser-compatibility issues you might encounter when implementing responsive design.
In my redesign of VisualStudioMagazine.com, I ran into the most compatibility issues with Internet Explorer 7 and Internet Explorer 8 (IE 7 doesn't have native support for box-sizing, and neither IE 7 nor IE 8 have native support for media queries). Therefore, I'll focus on those two browsers in this article. (IE 10, IE 9, Firefox and Chrome were generally fine, and we don't design at all for IE 6 -- here's hoping you don't, either.)
Problem 1: Media Queries
To deal with lack of support for media queries, I decided to use a simple polyfill, <a href= "https://github.com/scottjehl/Respond" target="_blank" >Respond.js. This JavaScript file will add media query functionality to browsers missing it. The file was easy to set up because it has no dependencies. I just referenced the file and forgot about it.
Problem 2: IE 7 Box-Sizing
I tried using a polyfill to fix the inability of IE 7 to understand the box-sizing property, but the only polyfills I found were kludgy and unreliable. Instead, I borrowed some code from HTML5 Boilerplate, which let me target IE 7 with CSS to remove borders and change the width of HTML elements. This makes certain that users of IE 7 can still read VSM content in a responsive layout.
Here's the bit of HTML code I used to deal with older browsers:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
This block of code, placed at the very top of the HTML page, is using conditional comments to identify which version of Internet Explorer is running by appending a class to the HTML tag. Because the class identifies which browser is being used, this code will let you manipulate elements on the page with CSS, using the class as a hook.
To demonstrate how useful this code is, Listing 1 shows the HTML code that will display a custom message by identifying a user's browser.
Listing 1. HTML code that displays a custom message by identifying a user's browser.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<body>
<div class="wrapper">
<h2 class="youareusing-ie6">You are using IE6???? :( :(</h2>
<h2 class="youareusing-ie7">You are using IE7. :(</h2>
<h2 class="youareusing-ie8">You are using IE8!</h2>
<h2 class="youareusing-modern">You are using IE9 or a modern browser!!</h2>
</div>
</body>
</html>
The corresponding CSS code looks like this:
body { background: #dedede; }
.wrapper { width: 80%; margin: 0 auto; background: #fff; padding: 20px 0; }
h2 { display: none; text-align: center; }
.youareusing-modern { display: block; }
.ie6 .youareusing-ie6 { display: block; }
.ie7 .youareusing-ie7 { display: block; }
.ie8 .youareusing-ie8 { display: block; }
.ie6 .youareusing-modern, .ie7 .youareusing-modern, .ie8 .youareusing-modern { display: none; }
You can see the HTML code running here. In the Web page, you'll notice a message is displayed letting the user know which browser is being used. I achieved this simply by hiding all the messages using CSS, and then used the generated HTML class to display the appropriate message to the user.
As you can see, this powerful technique provides a simple way to manipulate the page's styling to fix IE bugs. I use this code in all of my projects. I hope it helps you in your next project.
If you have anything to add or have questions, please leave a comment or e-mail me -- and let me know if there's something particular you'd like me to address in my next article.
About the Author
Rodrigo Munoz is a senior front-end Web developer for 1105 Media, Inc. He has been building Web sites for more than 13 years, and can be reached at [email protected] or on Twitter at @pixelfuture.