A stylesheet for IE, another one for web browsers

[Daniel Déchelotte]

Hi,

Once I was happy with my new deezign[1], I noticed how bad it breaks in IE
(all versions I tried). Since IE7[2] didn't give acceptable results, I
wrote a simplified style that I would fetch to IE. How to do it is the
point of my post.

I am using for now conditional comment[3] (clean) to give IE its CSS, and a IE
parsing bug[4] (not clean) to hide the real CSS from IE:

<!--[if IE]>
<link rel="stylesheet " type="text/css" href="site-IE.css">
<script src="navbar.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css"><!-- @import url(site.css) all; --></style>

I am wondering whether a better method exists, especially one that would:
* not rely on a IE bug to hide the CSS file
* not break HTML validation (no <![if !IE]>...<![endif]>)
* provide good browsers with the two alternative stylesheets
* deal with several CSSes: all pages include (by SSI) site.css (or
site-IE.css), but some also include pro.css (resp. pro-IE.css), some
others perso.css (or perso-IE.css) (if I read the specs correctly,
<link rel="alternate stylesheet" ...> cannot fulfill this requirement)

A method that solves just one of the four points above would already be
great!

[1] http://yo.dan.free.fr/
[2] http://dean.edwards.name/IE7/
[3] http://msdn.microsoft.com/workshop/a...omment_ovw.asp
[4] http://www.phoenity.com/newtedge/hide_css_ie/

PS: I take this post as an opportunity to thank those who ansered my newbie
questions a while ago, and to thank everyone who intervenes in this forum:
you are definitely helping more than one person when you answer one
question! (I have been lurking for quite a while, as obviously many others
do.)

--
Daniel Déchelotte
http://yo.dan.free.fr/

[Jón Fairbairn]

Daniel Déchelotte <ma**********@f r.club-internet.invali d> writes:

I am using for now conditional comment[3] (clean) to give
IE its CSS, and a IE parsing bug[4] (not clean) to hide
the real CSS from IE:

<!--[if IE]>
<link rel="stylesheet " type="text/css" href="site-IE.css">
<script src="navbar.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css"><!-- @import url(site.css) all; --></style>

I am wondering whether a better method exists, especially one that would:
* not rely on a IE bug to hide the CSS file
* not break HTML validation (no <![if !IE]>...<![endif]>)
* provide good browsers with the two alternative stylesheets
* deal with several CSSes: all pages include (by SSI) site.css (or
site-IE.css), but some also include pro.css (resp. pro-IE.css), some
others perso.css (or perso-IE.css) (if I read the specs correctly,
<link rel="alternate stylesheet" ...> cannot fulfill this requirement)

I have no idea whether this would work (don't have IE
handy), but what does IE make of something like this:

<!--[IF IE]>
<![IF !IE]>
<![endif]-->
baz
<!--[IF IE]>
<![endif]>
<![endif]-->

-- for everything else it's just baz surrounded by a pair of
comments?

--
Jón Fairbairn Jo***********@c l.cam.ac.uk

[logic_earth]

I suggest making a stylesheet that works in all the latest browsers. So
you don't have to do such hacks. If you can't do it then you should
practice more and change how you layout the elements.

[Daniel Déchelotte]

Jón Fairbairn a écrit :

| Daniel Déchelotte <ma**********@f r.club-internet.invali d> writes:
|
| > I am wondering whether a better method exists, especially one that
| > would:
| > * not rely on a IE bug to hide the CSS file
| > * not break HTML validation (no <![if !IE]>...<![endif]>)
| > * provide good browsers with the two alternative stylesheets
| > * deal with several CSSes: all pages include (by SSI) site.css (or
| > site-IE.css), but some also include pro.css (resp. pro-IE.css), some
| > others perso.css (or perso-IE.css) (if I read the specs correctly,
| > <link rel="alternate stylesheet" ...> cannot fulfill this
| > requirement)
|
| I have no idea whether this would work (don't have IE
| handy), but what does IE make of something like this:
|
| <!--[IF IE]>
| <![IF !IE]>
| <![endif]-->
| baz
| <!--[IF IE]>
| <![endif]>
| <![endif]-->

It does exactly what one would hope! Thanks for the tip.

As for my 4th wish above, I have just read this article[1] from ALA that
states "[...] these style sheets can also be grouped together by giving
them identical title attributes.". Almost obvious, but I have already
implemented an alternate (and brain-dead) solution, based on many files and
even more @import's. ;-)

[1] http://www.alistapart.com/articles/alternate/

Quick answer to logic_earth, who wrote:

| I suggest making a stylesheet that works in all the latest browsers. So
| you don't have to do such hacks. If you can't do it then you should
| practice more and change how you layout the elements.

I agree all the more that this is a personal website and I don't have to
make it HR-friendly for another two years, so my requirements were:
* perfect in FF/Mozilla (latest version)
* very good in Opera (latest version)
* useable in IE in its latest, patched, version
* don't care about the rest (well, not really)
and I will add an "About this site" page.

Unfortunately, because of the graphical design I had in mind, I ran into
the famous "extend a DIV to 100% of the content or the viewport height,
whichever is taller" problem, and the related bugs (I chose a solution that
uses fixed positioning). Also, pure CSS menus require some specific work
for IE. So I settled for a simplified style for IE, because, as is, it was
a pain to browse my site with IE. And since it is merely a personal
website, I can afford not to change the layout just for IE.

--
Daniel Déchelotte
http://yo.dan.free.fr/

[Michael Fesser]

.oO(logic_earth )

I suggest making a stylesheet that works in all the latest browsers.
Quite hard to do with IE.
So
you don't have to do such hacks.
I don't consider conditional comments as hacks. They are well defined to
work in IE without side effects in other browsers.
If you can't do it then you should
practice more and change how you layout the elements.

There are too many things where IE simply fails or really screws things
up. Using CCs is a rather clean way to provide workarounds if necessary.

Micha

[Martin Bialasinski]

"logic_eart h" <Th****@gd-studio.com> wrote:

I suggest making a stylesheet that works in all the latest
browsers. So you don't have to do such hacks.

You mean stylesheets with CSS-hacks that exploit bugs in IE's CSS
parser to work around IE bugs?

[Jan Roland Eriksson]

On 09 Jan 2005 12:24:39 +0000, "Jón Fairbairn"
<jo***********@ cl.cam.ac.uk> wrote:

Daniel Déchelotte <ma**********@f r.club-internet.invali d> writes:

I am using for now conditional comment[3] (clean) to give
IE its CSS, and a IE parsing bug[4] (not clean) to hide
the real CSS from IE:
[...]
I am wondering whether a better method exists, especially one that would:
* not rely on a IE bug to hide the CSS file

[...]
I have no idea whether this would work (don't have IE
handy), but what does IE make of something like this:

<!--[IF IE]>
<![IF !IE]>
<![endif]-->
baz
<!--[IF IE]>
<![endif]>
<![endif]-->

-- for everything else it's just baz surrounded by a pair of
comments?

As reported, at least by Daniel, this CC attempt is "working" but it
also made me think a bit about what is really happening inside IE in
that case. Let's structure the "code" a bit at first.

1. <!--[IF IE]>
2. <![IF !IE]>
3. <![endif]-->
4. baz
5. <!--[IF IE]>
6. <![endif]>
7. <![endif]-->

I have always assumed that IE's CC evaluation is based on some form of
standard principle, similar to how conditional execution would take
place in any other "programmin g language". In which case I can not see
how that CC "code snip" could hide 'baz' from IE in the first place.

Let's send this to IE under that assumption of mine.

Line 1 will be evaluated to a BOOLEAN TRUE status.

Line 2 will start a new evaluation, which will at first
'push' the TRUE running value from Line 1 on the stack
to make room for a new running value, which will be FALSE
this time.

Line 3 "should" be the 'endif' statement for Line 2 which,
when evaluated, "should" 'pop' the stack to bring back the
original TRUE value from Line 1 as the running value.

/In which case/ Line 4. with its 'baz' lies fully open for
interpretation by IE.

After that, Line 5. and Line 6. becomes "dummies" for IE
and finally Line 7 will close the evaluation started in
Line 1.

I do fully agree with the statement that this "code snip" will present
'baz' fully undisturbed to real browsers, that part is not a problem.

But in order for it to work as expected in IE we need to assume that the
FALSE running value, that comes out of the evaluation in Line 2, will
also prohibit IE from evaluating Line 3?

In which case it will also not evaluate the 'baz' in Line 4 of course.

But then, why should it evaluate Line 5? Line 6? or even Line 7?

It would be really good, from a practical standpoint, to find a reliable
way to exclude some CSS from IE all together, but I can not make the ins
and outs of the presented "code", as seen in the light of a report that
it really does "work" as expected?

What gives?

--
Rex

[Martin Bialasinski]

Jan Roland Eriksson <jr****@newsguy .com> wrote:

As reported, at least by Daniel, this CC attempt is "working" but it
also made me think a bit about what is really happening inside IE in
that case. Let's structure the "code" a bit at first.

1. <!--[IF IE]>
2. <![IF !IE]>
3. <![endif]-->
4. baz
5. <!--[IF IE]>
6. <![endif]>
7. <![endif]-->

A possible sane explanation:

1. Conditional comments are used in a preprocessor way
2. The if/endif matching respects the type of the comment
("downlevel-hidden" vs. "downlevel-revealed")

Line 1 gives true
Look for an endif.
Output everthing inbetween.
Output line 4
Line 5 gives true
Look for an endif.
Output everthing inbetween.

Results in

8. <![IF !IE]>
9. baz
10. <![endif]>

Parse again.

Line 8 gives false
Skip to endif

[Daniel Déchelotte]

Martin Bialasinski a écrit :

| Jan Roland Eriksson <jr****@newsguy .com> wrote:
|
| > As reported, at least by Daniel, this CC attempt is "working" but it
| > also made me think a bit about what is really happening inside IE in
| > that case. Let's structure the "code" a bit at first.
| >
| > 1. <!--[IF IE]>
| > 2. <![IF !IE]>
| > 3. <![endif]-->
| > 4. baz
| > 5. <!--[IF IE]>
| > 6. <![endif]>
| > 7. <![endif]-->
|
| A possible sane explanation:
|
| 1. Conditional comments are used in a preprocessor way
| 2. The if/endif matching respects the type of the comment
| ("downlevel-hidden" vs. "downlevel-revealed")
| [...]
| Parse again.

That bit seems unlikely to me (for efficiency purposes).

I agree with point 2 (if/endif matching), but I think the "preprocess or
way" thing is wrong. This is my guess:

Line 1: enter comment (depth 1) to be evaluated, look for an <![endif]-->
to close it.
2: enter comment (depth 2) to be hidden, look for an <![endif]> to close it.
3-5: hidden
6: close comment of depth 2
7: close comment of depth 1

To make a point for my case, here is some simplified code that still works:

1. <!--[if IE]>
2. <![if !IE]>
3. < -->
4. <p>Read by browsers, ignored by IE
5. <!-- >
6. <![endif]>
7. <![endif]-->

(no need for conditional comment parts at lines 3 and 5)

See it in action at http://yo.dan.free.fr/test_CC.html

Oh, wait, that does *not* invalidate your explanation. ;-) Still, I think
mine is more likely. :-P

--
Daniel Déchelotte
http://yo.dan.free.fr/

[Dave Anderson]

Daniel Déchelotte wrote:

I agree with point 2 (if/endif matching), but I think the "preprocess or
way" thing is wrong. This is my guess:

Line 1: enter comment (depth 1) to be evaluated, look for an <![endif]-->
to close it.
2: enter comment (depth 2) to be hidden, look for an <![endif]> to close it.
3-5: hidden
6: close comment of depth 2
7: close comment of depth 1

To make a point for my case, here is some simplified code that still works:

1. <!--[if IE]>
2. <![if !IE]>
3. < -->
4. <p>Read by browsers, ignored by IE
5. <!-- >
6. <![endif]>
7. <![endif]-->

(no need for conditional comment parts at lines 3 and 5)

I've never seen whatever information Microsoft provides about how
"conditiona l comments" *should* work and I don't have IE here to test
with but, assuming that this was implemented in some vaguely rational
manner (which I admit is a big assumption), shouldn't this simple code work:

<!--[if !IE]-->
<p>read by browsers, ignored by IE
<!--[endif]-->

Real browsers would either ignore the "conditiona l comments" or, if
they're crazy enough to implement this crock, at least realize that
they're not IE; IE would process the "conditiona l comments" and skip the
content because it *is* IE.

Am I confused?

Dave