Hello

While googling for this topic I found lots of advice on how to use
@media rules to _hide_ stuff from Mac IE. Anyway, actually _using_
@media to write media specific CSS for both Win and Mac IE 5 seems to be
less covered. (I know Mac IE is dead, but some of my audiences possibly
still use older computers...)

So this is what I tried so far to apply specific style sheets for screen
and print:

<link rel="stylesheet" type="text/css" href="basic.css">
<style type="text/css" media="screen">
@import url("screen.css");
</style>
<style type="text/css" media="print">
@import url("print.css");
</style>

It turned out that IE 5.x on Windows could not handle these (while Mac
IE 5 had no problem). So I changed it to:

<link rel="stylesheet" type="text/css" href="basic.css">
<style type="text/css">
@import url("screen.css");
@import url("print.css");
</style>

and surrounded the codes in screen.css and print.css with @media
blocks. It works in Win IE 5.x like a charm, but now Mac IE 5 does not
recognize the styles anymore.

I tried versions with conditional comments; they do not work, as I can't
hide something from IE 5 while keeping it visible for non-IE browsers.
Using the link tag instead of @import has the downside to make the
stylesheets available for Netscape 4 and IE 4, that should actually only
see basic.css.

Is there any known way to apply media specific style sheets supporting
IE 5.x on both Windows and Mac?

Thanks for pointing me to the right direction...
Markus

On Thu, 13 Mar 2008, Markus wrote:

> IE 5.x on Windows could not handle these

Internet Explorer 6 is available even for Windows 98.

> (while Mac IE 5 had no problem)

Fine.

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell

Markus wrote:
>
> <style type="text/css">
> @import url("screen.css");
> @import url("print.css");
> </style>
>
> and surrounded the codes in screen.css and print.css with @media
> blocks. It works in Win IE 5.x like a charm, but now Mac IE 5 does not
> recognize the styles anymore.

MacIE does not support @media. You cannot make it do something it has no
understanding of. Even if you got it to recognize the rules at all, it
couldn't distinguish screen from print from any other media type and
would end up jumbling them all together.

> Is there any known way to apply media specific style sheets supporting
> IE 5.x on both Windows and Mac?

Personally, I see this as a huge waste of time and effort. IE 5.x
browsers have been pretty dead for a long time now. I suggest you let
them degrade gracefully and forget about trying to coerce them into
behaving like better browsers. Too frustrating for too little benefit.

My 2p.

--
Berg

Bergamot schrieb:
> Markus wrote:
>> <style type="text/css">
>> @import url("screen.css");
>> @import url("print.css");
>> </style>
>>
>> and surrounded the codes in screen.css and print.css with @media
>> blocks. It works in Win IE 5.x like a charm, but now Mac IE 5 does not
>> recognize the styles anymore.
>
> MacIE does not support @media. You cannot make it do something it has no
> understanding of. Even if you got it to recognize the rules at all, it
> couldn't distinguish screen from print from any other media type and
> would end up jumbling them all together.
>
>> Is there any known way to apply media specific style sheets supporting
>> IE 5.x on both Windows and Mac?
>
> Personally, I see this as a huge waste of time and effort. IE 5.x
> browsers have been pretty dead for a long time now. I suggest you let
> them degrade gracefully and forget about trying to coerce them into
> behaving like better browsers. Too frustrating for too little benefit.

Thank you... I had made the effort 2 years ago and got nice results in
IE 5 on both Windows and Mac (before I added print versions, though...).
I was quite proud of that and it would have been somehow frustrating to
abandon it now :-).

Well, as I usually don't like "ugly" hacks, I had not given them too
much attention so far. Now I found that the Commented Backslash Hack
actually does the trick quite handily:

/*\*/
@media screen {
/**/

[css goes here]

/*\*/
}
/**/

So Mac IE 5 gets the screen css for all media, which is a quite
acceptable behaviour.