Hi guys, I have 2 CSS files for my site, one for all normal browsers and other for the retarded Internet Explorer. I am including either of the CSS file depending on a JavaScript which checks the browser capabilities. What would be the best option in case the user has disabled JavaScript! I should be including some CSS without which all the pages look ... well... naked. Any comments appreciated.
+6
A:
you mean
<!--[if IE 6]>
and
<![endif]-->
don't work without javascript?
BTW, here are the first two google search results for "browser specific css":
- http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks
- http://www.sitepoint.com/article/browser-specific-css-hacks/
cheers!
Here Be Wolves
2009-06-09 05:40:17
A:
Try this hack:
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
< ![endif]-->
artemb
2009-06-09 05:41:45
For some reason this hack does not work for me for disabled JavaScript. This is what I have.<noscript> <!--[if IE]><link rel="stylesheet" href="/global/mse/en /us/RenderingAssets/stuHome-IE.css" type="text/css" media="screen, projection"><![endif]--> </noscript>
theraneman
2009-06-09 06:12:19
Why do you put it inside <noscript /> ? Put it straight in the head and use it instead of javascript browser detection
artemb
2009-06-09 06:19:49
Disclaimer: I am not a designer!You caught me napping on that one. Thanks dude! Although I am not sure if this hack works best in my scenario since I might be needing to hack out for other browsers too :(. Rather I was thinking of this, include the IE.css regardless of Javascript is enabled or disabled. If disabled, then all browsers would have IE css, if enabled, my script would add browser specific CSS and remove the IE css tag from head. I might sound wierd here, but honestly users would not have same experience if Scripting is disabled.
theraneman
2009-06-09 06:31:42
I am not sure about removing link tag from head - you should test that. But this kind of hack ([if IE]) works nice for IE without any javascript. There are other css hacks for different browsers, you should google it
artemb
2009-06-09 07:03:37
A:
<noscript>
<link rel="stylesheet" href="/global/mse/en/us/RenderingAssets/stuHome-IE.css"
type="text/css" media="screen, projection">
</noscript>
Alexander Corotchi
2009-06-09 06:21:02
A:
Using Javascript for browser detection is an extremely bad idea. There's no reliable way to do this. I presume you are using the navigator object - note that this is very unreliable, as various browsers send the 'wrong' information or allow users to customise the information they send. Plus, as you note, there's the issue with non-Javascript enabled users.
The way to include browser-specific CSS, as everyone else has pointed out, is via IE's conditional comments.
Daniel Roseman
2009-06-09 06:46:59
+2
A:
What you need is conditional CSS statements. These are specially formatted HTML comments that only IE recognizes, they allow you to target different versions of IE with different CSS files.
There is a simple if statement that that is put in the comment that IE is programmed to recognize
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="css/ie.css" />
<![endif]-->
The above code will target every version of IE. You can specify which version by adding the version number
<!--[if IE 5.5]>
<link type="text/css" rel="stylesheet" media="all" href="css/ie.css" />
<![endif]-->
You can also make it apply to versions below or equal to a certain version number
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" media="all" href="css/ie.css" />
<![endif]-->
The lte is less then or equal to; you can also use gte for greater than or equal to.
Using conditional comments is normally used to add CSS files but you can also add links to JS files that you may only need for certain IE versions.
Another thing if you end up using multiple stylesheets for different versions of IE is remember to name the file so it includes the version number you're targeting (IE-6.css for example).
Paul Sheldrake
2009-06-09 07:07:42
A:
<noscript> cannot be used inside <head> Also <noscript> only detects if javascript was disabled by the browser (could be blocked by a firewall) so it cannot be guaranteed to work.
As for your two CSS files, the better strategy would be to have a base file that is always included and then an CSS file that has the changes/hacks needed for IE. Use conditional comments to load the ie CSS when the browser is IE.
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
< ![endif]-->
Emily
2009-06-09 12:00:21
A:
Adding the <link> within the <noscript> tags won't work either I'm afraid, well it will, but any pages it is on will not validate.
Unfortunately the conundrum is this: -
The <noscript> tag is not valid when used within the <head> section of a page........ However, a <link> tag is not valid when within the <body> section of a page.
This has been bugging me for ages, and I thought I had found the answer on this page....
If anyone does know the answer I would be very grateful :)
Chris
2010-08-18 22:55:40