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.

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 rmunoz@1105media.com or on Twitter at @pixelfuture.

comments powered by Disqus

Reader Comments:

Wed, Feb 12, 2014

http://w DOT ww.allstatesquotes.com http://www.maddonnasnashville.com/c DOT ialis.php http://www.joyofslowcommunication.com/p DOT rednisone.html http://w DOT ww.antidepressioncare.com http://www.msugcf.org/ DOT http://w DOT ww.careforyourhealth.net http://www.rothschildmd.com/c DOT ialis-generic.html

Tue, Feb 4, 2014

http://www.mybestinsurancequotes.net/ DOT http://w DOT ww.ensureyourself.com http://w DOT ww.termlifecoverquote.com http://w DOT ww.homecovercomparison.com http://www.abwheminn.org/ DOT http://www.raisingrama.com/ DOT

Sat, Feb 1, 2014

http://www.unemployedpodcaster.com/ DOT http://www.yeeshkabob.com/ DOT http://www.atoolboxfordad.com/ DOT http://w DOT ww.termlifecoverquote.com http://www.racheltatum.com/ DOT http://www.mybestinsurancequotes.net/ DOT

Tue, Jan 21, 2014

http://www.edmedscosts.com/ DOT http://w DOT ww.healthinsur.net http://w DOT ww.insurplus.net http://w DOT ww.cheaphealthinsurancequotes.net http://w DOT ww.healthinsurancebible.com http://www.forgetyoured.net/ DOT

Fri, Jan 17, 2014 Dotty http://w DOT ww.allhealthinsurers.net http://y DOT ouroptionshere.com http://w DOT ww.cheapautoinsurcover.com http://f DOT orexlikepro.com

http://w DOT ww.allhealthinsurers.net http://y DOT ouroptionshere.com http://w DOT ww.cheapautoinsurcover.com http://f DOT orexlikepro.com http://www.buyfirstmedication.com/ DOT

Sun, Jan 12, 2014 Xandy http://www.locateautoinsur.com/ DOT http://w DOT ww.blackjackspace.net http://w DOT ww.getedtabletsonline.com http://w DOT ww.cheapautoinsurcover.com

http://www.locateautoinsur.com/ DOT http://w DOT ww.blackjackspace.net http://w DOT ww.getedtabletsonline.com http://w DOT ww.cheapautoinsurcover.com http://www.gettinginsurancequotes.net/ DOT

Wed, Dec 4, 2013 Mattie Latest Dys Erectile News http://www.getmedonline.net

http://wwwlevitracom.net/uncategorized/l DOT atest-dys-erectile-news.html http://www.getmedonline.net/uncategorized/t DOT he-top-10-internet-trends-of-2013.html

Fri, Nov 29, 2013 Elric Cheap auto insurance from direct-to-consumer insurers Georgia life insurance rates

http://www.allstatescarinsurance.com/articles/f DOT rom-direct-to-consumer-insurers.html http://www.mylifeinsuranceplace.com/quotes/? DOT statecode=GA

Wed, Oct 30, 2013 Patience website http://www.squidoo.com/car-insurance-62042

http://www.freewebsite-service.com/freecarinsurancequotes/ DOT http://www.squidoo.com/c DOT ar-insurance-62042

Fri, Oct 18, 2013 Davion news http://www.harpiste-estherjansen.com/

http://www.localviper.com/ DOT http://www.harpiste-estherjansen.com/ DOT

Thu, Oct 17, 2013 Bruna In awe of that ansrew! Really cool!

In awe of that http://f DOT cyfdyzlinm.com Really cool!

Tue, Oct 15, 2013 Matilda http://www.cncfmongolia.com/

http://www.cncfmongolia.com/ DOT

Tue, Oct 15, 2013 Marylouise http://www.judithht.com/

http://www.judithht.com/ DOT

Add Your Comments Now:

Your Name:(optional)
Your Email:(optional)
Your Location:(optional)
Comment:
Please type the letters/numbers you see above

.NET Insight

Sign up for our newsletter.

I agree to this site's Privacy Policy.