Search code examples
htmlcssinternet-explorerconditional-comments

IE conditional comments are not working

I have style_desktop.css for all the desktop and another style_mobile.css for mobile device.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" media="screen and (min-device-width:781px)" type="text/css"
      href="style_desktop.css"/>
<link media="only screen and (max-device-width: 780px) and (min-device-width: 320px)"
      href="style_mobile.css" type="text/css" rel="stylesheet"/>

The above code works fine except IE 8 and below. I suppose it is because IE 8 and below does not recognize "(min-device-width:781px)"

So I updated the code as below but it is still not working.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" media="screen and (min-device-width:781px)" type="text/css"
      href="style_desktop.css"/>
<link media="only screen and (max-device-width: 780px) and (min-device-width: 320px)"
      href="style_mobile.css" type="text/css" rel="stylesheet"/>
 <!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="style_desktop.css"/>
 <![endif]-->

If it is any desktop browser than I want style_desktop.css to be linked.
If it is any mobile browser than I want style_mobile.css to be linked.

By testing I found that the conditional comments are not working.

Edit:
I am using wordpress if it makes any difference. I have removed the get_template_directory_uri(); from the href just for the sake of clarity.

Solution

  • You can try to enabling HTML5 and CSS3 for older IE:

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->