IE8 support for CSS Media Query

Question

Does IE8 not support the following CSS media query    import url  desktop css   screen and  min-width  768px     If not  what is the alternate way of writing  The same works fine in Firefox   Any issues with the code below    import url  desktop css   screen    import url  ipad css   only screen and  device-width 768px

User · Answer

IE8  and lower versions  and Firefox prior to 3 5 do not support media query  Safari 3 2 partially supports it    There are some workarounds that use JavaScript to add media query support to these browsers  Try these   Media Queries jQuery plugin  only deals with max min width   css3-mediaqueries-js     a library that aims to add media query support to non-supporting browsers

User · Answer

Internet Explorer versions before IE9 do not support media queries   If you are looking for a way of degrading the design for IE8 users  you may find IE s conditional commenting helpful  Using this  you can specify an IE 8 7 6 specific style sheet which over writes the previous rules   For example    lt link rel  stylesheet  type  text css  media  all  href  style css   gt   lt  -- if lt IE 9  gt   lt link rel  stylesheet  type  text css  media  all  href  style-ie css   gt   lt   endif -- gt    This won t allow for a responsive design in IE8  but could be a simpler and more accessible solution than using a JS plugin

User · Answer

IE didn t add media query support until IE9   So with IE8 you re out of luck

User · Answer

Prior to Internet Explorer 8 there were no support for Media queries  But depending on your case you can try to use conditional comments to target only Internet Explorer 8 and lower  You just have to use a proper CSS files architecture

User · Answer

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     lt  -- if lt IE 9  gt   lt script     src  respond min js  gt   lt  script gt   lt   endif -- gt    CSS Mediaqueries  is another library that does the same thing  The code for adding that library to your HTML would be identical     lt  -- if lt IE 9  gt   lt script     src  css3-mediaqueries js  gt   lt  script gt   lt   endif -- gt      The alternative  If you don t like a JS based solution  you should also consider adding an IE lt 9 only stylesheet where you adjust your styling specific to IE lt 9  For that  you should add the following HTML to your code    lt  -- if lt IE 9  gt   lt link rel  stylesheet  type  text css  media  all  href  style-ielt9 css   gt   lt   endif -- gt      Note    Technically it s one more alternative  using CSS hacks to target IE lt 9  It has the same impact as an IE lt 9 only stylesheet  but you don t need a seperate 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

User · Answer

Edited answer  IE understands just screen and print as import media  All other CSS supplied along with the import statement causes IE8 to ignore the import statement  Geco browser like safari or mozilla didn t have this problem

User · Answer

Taken from the css3mediaqueries js project page   Note  Doesn t work on  import ed stylesheets  which you shouldn t use anyway for performance reasons   Also won t listen to the media attribute of the  lt link gt  and  lt style gt  elements

User · Answer

An easy way to use the css3-mediaqueries-js is to include the following before the closing body tag    lt  -- css3-mediaqueries js for IE less than 9 -- gt   lt  -- if lt IE 9  gt   lt script     src    css3-mediaqueries-js googlecode com svn trunk css3-mediaqueries js  gt   lt  script gt   lt   endif -- gt

User · Answer

http   blog keithclark co uk wp-content uploads 2012 11 ie-media-block-tests php  I used  media  0screen    and it works fine for me in REAL IE8

User · Answer

css3-mediaqueries-js is probably what you are looking for  this script emulates media queries  However  from the script s site  it  doesn t work on  imported stylesheets  which you shouldn t use anyway for performance reasons   Also won t listen to the media attribute of the  lt link gt  and  lt style gt  elements    In the same vein you have the simpler Respond js  which enables only min-width and max-width media queries

User · Answer

The best solution I ve found is Respond js especially if your main concern is making sure your responsive design works in IE8  It s pretty lightweight at 1kb when min gzipped and you can make sure only IE8 clients load it    lt  -- if lt IE 9  gt   lt script src  respond min js  gt  lt  script gt   lt   endif -- gt    It s also the recommended method if you re using bootstrap  http   getbootstrap com getting-started  support-ie8-ie9

[html] IE8 support for CSS Media Query

Examples related to html

Examples related to css

Examples related to responsive-design

Examples related to internet-explorer-8

Examples related to media-queries