MOCKSTACKS
EN
Questions And Answers

More Tutorials









CSS Media queries and IE8

This stylesheet is still downloaded but is applied only on devices with screen width larger than 600px.

Using a link tag

<link rel="stylesheet" media="min-width: 600px" href="example.css" />


Media queries are not supported at all in IE8 and below.

A Javascript based workaround

To add support for IE8, you could use one of several JS solutions. For example, Respond can be added to add media query support for IE8 only with the following code :

<!--[if lt IE 9]>
<script
 src="respond.min.js">
</script>


CSS Mediaqueries is another library that does the same thing. The code for adding that library to your HTML would be identical :

<!--[if lt IE 9]>
<script
src="css3-mediaqueries.js">
</script>


The alternative

If you don't like a JS based solution, you should also consider adding an IE<9 only stylesheet where you adjust your styling specific to IE<9. For that, you should add the following HTML to your code:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Technically it's one more alternative: using CSS hacks to target IE<9. It has the same impact as an IE<9 only stylesheet, but you don't need a separate stylesheet for that. I do not recommend this option, though, as they produce invalid CSS code (which is but one of several reasons why the use of CSS hacks is generally frowned upon today).




Conclusion

In this page (written and validated by ) you learned about CSS Media queries and IE8 . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Floats.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.