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.
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.
CSS3 Related Interview Questions
|XML Interview Questions||CSS3 Interview Questions|
|HTML Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||CSS Interview Questions|
|CSS Advanced Interview Questions||WordPress Interview Questions|
|Pure.CSS Interview Questions||XHTML Interview Questions|
The Css3 Lowdown
Styling Images 150 And Links By Type
Improving Efficiency Using Pseudo-classes
Different Screen Size, Different Design
Flexing Your Layout Muscles
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.