Conditional CSS Media Queries
I have this code in my head of a page.
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.
<!-- [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]-->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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER
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?
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?
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.
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.
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.
ASKER
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.
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]-->ASKER
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.
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
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
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
then you can use ie specific rules right inside your one CSS file.
Google Paul Irish - you'll find straight away
ASKER
Open in new window