Cross-Browser Scripting

[Star Dot Star]

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
"non-IE".

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

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


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 ...

*.*

 

[C A Upsdell]

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
"non-IE".

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

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


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 ...

Google "Internet Explorer Conditional Comments".

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

 

[dorayme]

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
"non-IE".

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

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


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

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
stylesheet:

<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" />
<![endif]-->

 

[Adrienne Boswell]

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

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

Notice:

..css" /> vs .css">

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

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

However, the W3C validator doesn't like the code;

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.

in fact, I'm not even sure what language the code
is written in, but it does work admirably.

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.

 

[John Hosking]

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
"non-IE".

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

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


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.

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.

 

[Jukka K. Korpela]

Somewhere, I picked up a little code snippet

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
code.

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

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.

Or is this script ok to use, despite W3C's apparent
disdain for 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.

 

[Neredbojias]

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
"non-IE".

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

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


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?

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

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

 

[freemont]

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

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


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?

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

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

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/
css"><![endif]-->

Why two conditionals? The above works fine.