Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 762
  • Last Modified:

Conditional CSS Media Queries

I have this code in my head of a page.

<!-- [if gte IE 9]>
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic_small.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- [if lt IE 9]>
<link href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<! [endif]-->

Open in new window


The problem I am running into is that while it works for IE, how do I state my media query condition links for all the other browsers since the above technically is a commented out statement and ignored by other browsers?

I want to just display the CSS doc links, but if I put the media query link in the head outside the IE conditional statement, IE 6,7,8 read that as though it should be included in the page render to the browser and ends up breaking my page.

Seems like I need a IF / ELSE type condition so I can say "If you are IE9, then do this, ELSEIF you are LT IE 9, then do this, ELSE do this for every other browser"

That's what I would like.
0
day6
Asked:
day6
  • 4
  • 3
  • 2
  • +1
1 Solution
 
Maximus5684Commented:
I believe the statement you're looking for is:

<!--[if !IE]>-->
...
<!--<[endif]-->

Open in new window


Anything inside will be ignored by IE but should be read by all other browsers.
0
 
day6Author Commented:
welllll... i can't tell if this works or not because when I put the code in the head of my page, NOTHING renders in IE at all. Arghh.
<!-- [if gte IE 9]>
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic_small.css" rel="stylesheet" type="text/css" />
<! [endif]-->
<!-- [if lt IE 9]>
<link href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<! [endif]-->
<!-- [if !IE]-->
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic_small.css" rel="stylesheet" type="text/css" />
<!-- [endif]-->
<!-- SITE CSS FOR DIFF SCREEN SIZES -->
<!--[if gte IE 9]>-->
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.org/includes/css/rl1.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.org/includes/css/rl1S.css" rel="stylesheet" type="text/css" />
<!<[endif]-->
<!-- [if lt IE 9]-->
<link href="http://www.restorationlutheran.org/includes/css/rl1.css" rel="stylesheet" type="text/css" />
<! [endif]-->
<!-- [if !IE]-->
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.org/includes/css/rl1.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.org/includes/css/rl1S.css" rel="stylesheet" type="text/css" />
<!-- [endif]-->

Open in new window

0
 
Julian HansenCommented:
Except not all browsers accept that convention.

Unfortunately you have gone about the problem in reverse. Most of us ignore IE (because of the issues with it) and then "fix" after the site is working in other browsers.

The convention is to include your styling for FF, Chrome, Opera, Safari etc first and then put the conditional IE statements after this to modify specifically for IE.

<!-- [if lt IE9]>

Is treated as a comment in most other browsers so only IE should pick this up - hence the need to define styling for mainstream first and then to customise for IE by placing IE conditionals after the inclusion of your main stylesheets to override the relevant styles for ie.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
day6Author Commented:
Julian,

You're right, which is what I did to begin with and only after 4 hours of debugging did I learn that the MEDIA QUERY condition in the <link statement was being read by IE 6,7, & 8... which then caused me to have to remove that condition in the link in order for IE 6, 7 & 8 to even render the page.

So the issue isn't that I haven't figured out how to make the site functional in all other browsers, it's that since I made it functional in all other browsers, but it is breaking in IE 6,7 & 8, I need to have some type of condition where I can have it only read the MEDIA condition in IE9 and ALL OTHER BROWSERS and then a css document call without the MEDIA condition for lt IE 9.

Make sense?
0
 
Maximus5684Commented:
day6: I'm guessing that older browsers simply aren't seeing the content of the media attribute as valid and are disregarding the entire <link>. This might be solvable by just putting the @media condition inside the CSS file instead which, theoretically, the older browsers' CSS parsers should skip over.
0
 
Maximus5684Commented:
Nevermind. I found what is considered a "bulletproof" solution:

http://www.vcarrer.com/2010/07/bulletproof-css3-media-queries.html

However, since the older browsers do not support @media queries, you cannot differentiate between different screen sizes in these older browsers.
0
 
day6Author Commented:
Humphh!  I actually got it to render correctly now by changing the syntax of the conditional statements. I searched the web for a few working sites which used the conditional statements since I had already seen two sites where the syntax was different in their posted examples. It basically required a little different markup to make the conditional statements readable.  The key change was that after the first conditional statement I added "<!-->" and then added "<!--" before the final endif statement. I have no idea why this works, but it does.

Here's my final code that worked and allows the site to still be rendered in IE 6,7,8 as well as all other browsers.

<!-- [if gte IE 9]><!-->
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic_small.css" rel="stylesheet" type="text/css" />
<!--<! [endif]-->
<!-- [if lt IE 9]><!-->
<link href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<!--<! [endif]-->
<!-- [if !IE]><!-->
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.com/includes/css/Menu/basic/SpryMenuBasic_small.css" rel="stylesheet" type="text/css" />
<!--<!-- [endif]-->
<!-- SITE CSS FOR DIFF SCREEN SIZES -->
<!--[if gte IE 9]><!-->
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.org/includes/css/rl1.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.org/includes/css/rl1S.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!-- [if lt IE 9]><!-->
<link href="http://www.restorationlutheran.org/includes/css/rl1.css" rel="stylesheet" type="text/css" />
<!--<! [endif]-->
<!-- [if !IE]><!-->
<link media="screen and (min-width:800px)" href="http://www.restorationlutheran.org/includes/css/rl1.css" rel="stylesheet" type="text/css" />
<link media="screen and (max-width:799px)" href="http://www.restorationlutheran.org/includes/css/rl1S.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->

Open in new window

0
 
day6Author Commented:
I wouldn't mind seeing an example of how to put the conditional statement inside a CSS style sheet on a particular line since the main reason I'm using two different style sheets is to change the font sizes from MEDIUM to SMALL and from SMALL to X-SMALL.  It would be much easier to put a condition in the CSS style sheet right on that line instead of having to have duplicate style sheets with only one or two lines in the entire sheet being different.
0
 
Julian HansenCommented:
Don't put the conditional inside the css - keep your css clean.

Also I recommend drop support for IE6 - noone else supports it is really a waste of time

With the <!-- remember these are actually html comments that IE browsers recognise but in all other respects they must behave like a comment
0
 
Kyle HamiltonData ScientistCommented:
Use the Paul Irish technique and use conditionals to give classes to the HTML tag.
then you can use ie specific rules right inside your one CSS file.
Google Paul Irish - you'll find straight away
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now