Workarounds for Nonsupporting Browsers - CSS3

Browsers that don’t support media queries, such as IE 8 and earlier and Firefox 3.1 and earlier, will simply display a regular page with the regular styles. Although the design will not look as good at extremely narrow and wide viewport sizes, the large majority of your users won’t be using these sizes. You can add a min-width and max-width to the page to keep these browsers from ever seeing these extreme widths; override them in the media queries for browsers that don’t need them.

This, of course, does nothing to help mobile devices. Luckily, most popular mobile devices support media queries. Many of those that don’t support media queries do support the handheld media type, however, so you could feed them their own mobile-optimized sheet this way.

If these workarounds won’t cut it for your project, you can use JavaScript. The best script available is css3-mediaqueries-js by Wouter van der Graaf. All you have to do is link to the script—it automatically parses the media queries that exist in your CSS and makes them work in older browsers.

This script is included in the exercise files you downloaded, so add a link to it in the head of the page:

<script src=”scripts/css3-mediaqueries.js”></script>

Save the page and view it in a browser that doesn’t support media queries natively, like IE 8. Resize your window and you will see that the layout now changes to use the media queries. It’s as simple as that!

The only downside to using this script is that it adds another HTTP request, plus 16 kilobytes of data for users to download. Because of this, you may want to apply it only to the browsers that need it most— IE 6 through 8—by using conditional comments:
Although browsers such as Firefox 3.1 will now not be able to understand and use the media queries, your user base is not likely to contain many visitors using these browsers. In this case, we think it’s probably better for a few non-IE- and non-media-query-supported visitors to miss out on the media queries than for all browsers to have to download the script.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

CSS3 Topics