Media Queries are CSS features that allow you to apply different sets of rules depending on the value of a particular media feature. For example, if the browser has minimum width of 500 pixels, you could make all your h1 elements turn red, as shown in the following code:

@media only screen and (min-width: 500px) {
h1 { color: red; }
}

However, IE6, IE7, and IE8 do not understand media queries that are typically used to adjust widths according to different screen widths. As such, they will never render the optimized styles you create for browsers with screen widths that match a certain media query break point (min-width: 500px in the previous snippet). In our Sun and Sand Music Festival website, we have style rules within three different media queries, as shown in the following code snippet:

@media only screen and (max-width: 300px){ /*CSS rules */ }

@media only screen and (max-width: 750px) { /*CSS rules */ }

@media only screen and (max-width: 1150px) { /*CSS rules */ }

This means IE6, IE7, and IE8 will render the styles as though these queries did not exist! If you specify rules for device widths that are smaller at the end, it is likely that those will be overriding the rules for device widths that are larger, leading to less than optimal designs on Internet Explorer 8 and below.

Ideally, in this situation, you simply want IE to render all the styles and have the user scroll, if necessary, so that the style rules for the largest widths always apply. To do this, we can create a separate ie.css file that will render all the rules within main.css except these rules will no longer be contained in media queries.

Doing this manually is hard work, and almost impossible to maintain. However, Nicolas Gallagher writes about an elegant solution he invented, which uses Sass to import separate stylesheets for each media query breakpoint and compile them into two separate stylesheets; one without media queries (ie.css) and the other with media queries (main.css); we will look at this next.

@import "300-up";
@import "750-up";
@import "1150-up" /* Make sure largest is last */

@import "base";
@media (min-width:300px) {
    @import "300-up"; }
@media (min-width:750px) {
    @import "750-up"; }
@media (min-width:1150px) {
    @import "1150-up"; }

<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="/css/style.css">
<!--<![endif]-->

<!--[if (lt IE 9) & (!IEMobile)]>
<linkrel="stylesheet" href="/css/ie.css">
<![endif]-->

IE6 and IE7 do not support the :after pseudo selector that all other browsers support. This means our print stylesheet that provides a feature for all links to be printed alongside the linked text will not work in IE6 and IE7. You can simply use jQuery code to overcome this.

First, we check if window.onbeforeprint exists, because this would indicate this code is being executed on one of the IE browsers. We also want to verify if this browser supports generated content or not, as we only need to use this code when it is not supported. The following code snippet checks for the presence of the window.onbeforeprint event:

if (Modernizr.generatedcontent == false &&window.onbeforeprint !== undefined) {

Then, we set functions to execute when either onbeforeprint or onafterprint occurs, as shown in the following code:

window.onbeforeprint = printLinkURLs;
window.onafterprint = hideLinkURLs;

Then, we write the following functions:

functionprintLinkURLs() {
$("a[href]").each(function() {
$this = $(this);
$this.data("originalText", $this.text());
$this.append(" (" + $this.attr("href") + ")");                
});
}

functionhideLinkURLs() {
  $("a[href]").each (function() {            
     $(this).text($(this).data("originalText"));
  });
}

Internet Explorer up to version 9 has no way to indicate a form field is disabled other than the color of the text used in that field. Sometimes, a field simply has an icon rather than text (or it could be an empty input textbox), in which case it is almost impossible to discern which buttons are disabled and which are not.

For Internet Explorer 7 and above, by just adding the following rules in main.css, you can get the disabled fields to display significantly differently from the enabled ones:

.lt-ie9 input[type='text'][disabled], 
.lt-ie9 textarea[disabled] {
background-color: #EBEBE4;
}

If you have to support Internet Explorer 6, then make sure you add a class called disabled on the form elements that have the disabled attribute set and alter the previous rule to the following:

.lt-ie9 input.disabled, 
.lt-ie9 textarea.disabled {
background-color: #EBEBE4;
}

In IE6, all images, have a toolbar visible when hovered over. You can disable them by adding the following code within the head tag in the index.html file:

<metahttp-equiv="imagetoolbar" content="false">