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 [email protected] or on Twitter at @pixelfuture.

comments powered by Disqus

Featured

  • C# Slides in Usage Ranking of Programming Languages

    "The fact that C# lost three places in the ranking of language communities during the last three years is mostly explained by its slower growth compared to C/C++ and PHP."

  • Telerik UI for Blazor Updated

    Progress announced an update to its Telerik UI for Blazor components, targeting Microsoft's open source Blazor framework that lets C# coders create web apps without having to rely upon JavaScript.

  • Infragistics Unveils UI Components for Blazor

    Infragistics, specializing in third-party UI/UX controls and tools, unveiled a new offering targeting Blazor, Microsoft's red-hot open source framework that allows for C#-based web development instead of traditional mainstay JavaScript.

  • AWS Open Sources Tool for Porting .NET Framework Apps to .NET Core

    Leading cloud computing platform Amazon Web Services open sourced the it announced in July for helping users port old .NET Framework applications to the new .NET Core framework.

  • Uno Platform Ports Windows Calculator to Linux

    Uno Platform has ported the famed Windows Calculator, open sourced last year, to Linux as part of a continuing "proof point" effort to demonstrate the reach of what it describes as the sole UI offering available to target Windows, WebAssembly, iOS, macOS, Android and Linux with single-codebase applications coded in C# and XAML.

Upcoming Events