Cross-Browser Scripting

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Somewhere, I picked up a little code snippet
to branch the CSS choice to two seperate files,
depending on whether the browser was IE or

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

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

I have found this particularly helpful for design
considerations where seperate tweaks are needed
for IE vs non-IE code rendering.

However, the W3C validator doesn't like the code;
in fact, I'm not even sure what language the code
is written in, but it does work admirably.

Can anyone suggest a better (hopefully simple)
way of branching CSS for different browsers?
Or is this script ok to use, despite W3C's apparent
disdain for it?

thanks for any comments ...


Re: Cross-Browser Scripting

Star Dot Star wrote:
Quoted text here. Click to load it

Google "Internet Explorer Conditional Comments".

Done right, the W3C validator has no problems with them.

Re: Cross-Browser Scripting

Quoted text here. Click to load it

An example of this? The first construction is in *a comment* and most
modern browsers except IE simply do not see these. The <!-- ... --> is
for the purpose of authors making comments to remind them and others of
things about the document, like for example that such and such section
should not be changed (or to remember to put the dog out for a few
minutes before retiring to bed... whatever).

The second construction you have is not a comment and I would be
surprised if any browser found it any sort of cause to do anything
reasonable. At best it would simply ignore it. At worst, it might
complain or cause trouble.

The idea of the conditional IE comment, your first one above, is to give
something for IE eyes only (it is some proprietary construction allowed
by IE on Windows). And the usual good way to make a web site is to make
it for good browsers. Thus you might have in the head a link to the

 <link rel="stylesheet" type="text/css" href="main.css">

Notice how I have changed the name of the sheet to "main" because it is
not usually wanted that IE take *no notice at all* of it. Far from it.
The last few IE's are not so bad that they stuff every possible thing
up. They just stuff up 99% of things. Only kidding. Why repeat
everything that does work in IE yet again in a separate sheet?

So, the idea is you make a sheet for all and you override *a few things*
in the sheet for IE eyes only. To take an example, it is nice to have
max-width and min-width sometimes. But IE 6 does not know this one. So
you might do something else for IE6 like width: 35em. Or you might have
width: 35em in the main sheet but want different for IE6. You do this by

<link rel="stylesheet" type="text/css" href="main.css">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="style_IE.css" />


Re: Cross-Browser Scripting

Quoted text here. Click to load it


.css" /> vs .css">

Quoted text here. Click to load it

Yup, I find myself using it for IE6 not liking pngs.

Quoted text here. Click to load it

The first link element is using XHTML, the second HTML.  If your doctype
is XHTML, the validator will complain about the HTML, and if it's HTML,
the validator will complain about XHTML.

Quoted text here. Click to load it

Since we don't have the entire document, we don't know if you are using
XHTML or HTML.  Better to use HTML and get rid of the trailing slash.

Adrienne Boswell at Home
Arbpen Web Site Design Services
Please respond to the group so others can share

Re: Cross-Browser Scripting

On Tue, 11 Aug 2009 18:47:22 -0700, Star Dot Star wrote:

Quoted text here. Click to load it
The "works admirably" part is apparently due primarily to a typo.

In addition to the other comments posted, I would like to point out that
the second conditional comment, when *correctly* delimited with <!-- at the
beginning and > or /> at the end, will not do anything useful.

It's supposed to indicate a style sheet to be used by browsers which are
not some version of Internet Explorer ("!IE"). But only IE reads these
comments, so (only) IE knows not to use the style sheet for itself. Other,
non-IE browsers won't read the comment in the first place, so they won't
use the style sheet either. Therefore, the declaration is useless and you
can just delete all three lines.

Or: do it the way dorayme recommended.


Re: Cross-Browser Scripting

Star Dot Star wrote:

Quoted text here. Click to load it

That has been a common way of getting into troubles from about year 1995. Of
course, it was common before that too, but much fewer people played with

Quoted text here. Click to load it

It's particularly helpful if you want to write pages that depends on minor
versions and modes of browsers. The usual way to get into such a trouble is
to try to achieve something pixel-exact.

Quoted text here. Click to load it

It has nothing to do with scripting. If you don't know the different between
stylesheets and scripting, you should probably refrain from trying either of
them before you have read some nice, friendly, but factually correct and
accurate tutorial on web authoring. Well, maybe just _any_ tutorial.


Re: Cross-Browser Scripting

Quoted text here. Click to load it

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

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

Neredbojias / /

Re: Cross-Browser Scripting

On Wed, 12 Aug 2009 16:15:03 +0000, Neredbojias writ:

Quoted text here. Click to load it

Why not just:

<link rel="stylesheet" href="styles/cea8.css" type="text/css">

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

Why two conditionals? The above works fine.

"Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯

Site Timeline