How can you give different instructions based on browser in a CSS sheet?

[macseyco]

Any ideas on how I can asign different instructions based on browser with in a style sheet without using JS.

Looking to tidy up a few issues between ff and ie in my style sheets.

[jscheuer1]

There are various css hacks. But, one must be careful! A hack, by definition, isn't supported in any browser. It simply takes advantage of a bug in a given version or versions of a given browser or browsers.

One is the !important hack. In IE 6 and less, it doesn't always mean what it is supposed to. If you have:

width:30px!important;
width:27px;

All browsers are supposed to ignore the second width because it isn't !important. But, IE 6 and less will use 27px, all others (including IE 7) will use 30px.

But, with this and other hacks, one must remember what each does and in which browser(s). There is generally a better way, conditional comments. These are specifically supported in IE 5 and up. With a conditional comment, one may add additional stylesheets for certain or all IE versions, ex:


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_only.css">
<![endif]-->

Now, this should come after the default stylesheet declaration in the head of your document. It doesn't replace it for IE but, anything in it will override the defaults for IE only. To IE, it is simply another stylesheet. To all others, ignored.

Specific versions can be targeted as well as ranges of versions. Google IE conditional comments for details.

[boogyman]

or you can use


@import(path.css);

as IE6 and before doesn't support the import functionality


what you do is create your css file and just comment the "IE specific" areas, then link your "overrides" in the @import file.

[Twey]

That's another example of a hack, yes.

[jscheuer1]

You can use the downlevel conditional (here, literally - if less than IE 5):


<![if lt IE 5]>
<link rel="stylesheet" type="text/css" href="all_others.css">
<![endif]>

To target all browsers except those IE versions that support conditionals. This is not a hack. The important difference in a downlevel conditional is the absence of dashes. Without those, other browsers do not see it as a comment. IE 5 and up see it as not a comment either but the condition excludes them.

[Twey]

That's not valid HTML though. Instead, you need to do something like:
<!--[if !IE]><!-- -->
<link rel="stylesheet" type="text/css" href="all_others.css">
<!--<![endif]--><!-- -->

[mwinter]

That's not valid HTML though. Instead, you need to do something like:
<!--[if !IE]><!-- -->
<link rel="stylesheet" type="text/css" href="all_others.css">
<!--<![endif]--><!-- -->

That isn't either. A comment declaration begins with "<!" (MDO) and ends with ">" (MDC). Comments within it are delimited by pairs of "--" (COM). Only white space can separate comments, therefore the text "<![endif]" is invalid, as is the end because the final COM is unpaired.

Mike

[jscheuer1]

That's not valid HTML though. Instead, you need to do something like:
<!--[if !IE]><!-- -->
<link rel="stylesheet" type="text/css" href="all_others.css">
<!--<![endif]--><!-- -->

That creates an unwanted text node:

<!--[if !IE]>

in FF. This is simpler, avoids that and validates while still doing the job:


<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="all_others.css">
<!--<![endif]-->

[Twey]

Oh! Stupid me. I was thinking that would cause the first --> and the final <!-- to go unpaired in IE.
A comment declaration begins with "<!" (MDO) and ends with ">" (MDC). Comments within it are delimited by pairs of "--" (COM). Only white space can separate comments, therefore the text "<![endif]" is invalid, as is the end because the final COM is unpaired.Ah. Is there any way around that (to hide text only from certain IE versions, for example)?

[jscheuer1]

Is there any way around that (to hide text only from certain IE versions, for example)?

If I understand your question, the easiest way is to break it out and duplicate:


<div>
<!--[if !IE 7]>
This Isn't IE 7<br>
<![endif]-->
<!--[if !IE]>-->
This Isn't IE 7<br>
<!--<![endif]-->
This is all browsers
<!--[if IE]>
<br>IE Only
<![endif]-->
</div>

The first "This Isn't IE 7<br>" will be seen only by IE versions less than 7, the second one only by non-IE browsers. IE 7 is the only browser that won't see either of them and no browser will see more than one of them.

[mdcloud]

you can use javascript to call different css files based on browser. i use that for resolution like this


<script language="JavaScript1.2">

if (screen.width==640||screen.height==480)
document.write('<link rel="stylesheet" type="text/css" href="mainsm.css">')

else if (screen.width==800||screen.height==600)
document.write('<link rel="stylesheet" type="text/css" href="mainsm.css">')

else if (screen.width==1024||screen.height==768)
document.write('<link rel="stylesheet" type="text/css" href="main.css">')

else
document.write('<link rel="stylesheet" type="text/css" href="main.css">')

</script>
you can change that to look for browser instead i think

[Twey]

That's not based on browser, it's based on screen resolution. It's also a really stupid idea. Firstly, the simple fact that you need to do that means that there's something very wrong with your CSS; secondly, browsers without Javascript enabled will get no stylesheet at all; thirdly, users whose screen resolution is something other than those (say, 320&#215;240) will get the default stylesheet, even if it's not appropriate; fourthly, there's absolutely no guarantee that the screen resolution will have any bearing on window size whatsoever (remember not everyone browses full-screen, and some people have more than one monitor, which would make having the browser window maximised over both a nightmare).

[mdcloud]

my bad dude. i was just trying to help.

[Twey]

I know, don't be put off :) Obviously you didn't know it was a stupid idea, which is why you posted it. Now you do, and you can sleep more easily knowing that your knowledge of the Web is somewhat bettered :) Well, that's the idea anyway.