Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Makosuke

macrumors 604
Original poster
Aug 15, 2001
6,661
1,242
The Cool Part of CA, USA
Working on a moderately complex layout for a site, and I'm trying to figure out the logically and conceptually tidiest way to have IE5 (and lower) completely ignore all the stylesheets.

My goal is to have the "good" stylesheet with the works in it, to be used by any decent browser plus IE8, for IE6 & 7 to get a second stylesheet that overrides some of the stuff they don't support properly, and have anything older completely ignore the stylesheets and get a bare page.

The IE6&7 is accomplished easily enough with a conditional comment (loathe as I am to use those, they do validate), and it shouldn't be too much of a hassle to override some of the fancier directives for those browsers in an anti-sheet.

The problem is that I want to have <IE6 ignore the stylesheet entirely without having to do a whole huge anti-stylesheet. (Also Netscape 4 and older, but that's easy by just using a media declaration.)

Google is thus far failing me--the best solution I've managed to Google up is the old highpass filter, which I don't want to use both for the fact that it's visually and conceptually nasty, and that it requires at best a completely unnecessary HTTP call to fetch the empty stylesheet--I'd rather have the 0.4% of users with IE5 get an unreadable mess than add that overhead to every page request.

Is there some nice, tidy, valid way to do this that my weak Google-fu is failing to find?

(On an unrelated side note, I am so happy to see IE6 drop below 5% in my statistics--the day it hits 1% will be the day I throw a party.)
 

savar

macrumors 68000
Jun 6, 2003
1,950
0
District of Columbia
Oops, I didn't read your question carefully enough.

Why won't conditional comments work?

HTML:
<!--[if !(IE 5)]-->
    <style for good browsers or ie8>
<!--[endif]-->

<!--[if IE >5 && IE <8]>
    <extra styles for Ie 6 and 7>
<[endif]-->

(This isn't tested. I forget the actual syntax, but this should convey the idea.)

The basic idea is to exploit the difference between 'downlevel-hidden' and 'downlevel-revealed' comments.

source: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
 

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
Well the OP mentioned he wanted to "hide" it so that's why I suggested a server side method - one would never know a browser version specific style sheet was processed this way.

But your method is of course the traditional approach.

-jim
 

Dunmail

macrumors regular
Mar 27, 2009
224
4
Skipton, UK
You mention IE5 and lower - conditional comments were only introduced in IE5 so won't work for IE4 etc.

In this instance your only option if you wish to go this route is to use PHP/ASP to browser sniff and serve up a specific stylesheet.

I'd tend to go the other way - get the html correct, i.e. (sic) semantic, well structured code with the necessary ids and classes. This should look OK, if plain, in all browsers. Then add CSS rules so that more modern browsers render closer to what you are after - progressive enhancement. Take care for things like the box model and the like. You do have to accept that your pages will look different in various browsers.
 

Makosuke

macrumors 604
Original poster
Aug 15, 2001
6,661
1,242
The Cool Part of CA, USA
Ahh, thank you, savar--there's what I was missing in MS's documentation and the stuff I was reading. Downlevel reveal, despite its name, basically does what I want. The default syntax isn't valid (X)HTML, but according to this, a slight adjustment will have it validating while still working properly for IE.

Also thanks for the suggestion, SrWebDeveloper, but I'd rather have my site display "GET A NEW BROWSER, MORON" in giant red letters than use server-side browser sniffing. I am nothing if not a blind ideologue when it comes to standards support and how far I'm wiling to go to placate luddite MS users on my own projects.

I'd tend to go the other way - get the html correct, i.e. (sic) semantic, well structured code with the necessary ids and classes. This should look OK, if plain, in all browsers. Then add CSS rules so that more modern browsers render closer to what you are after - progressive enhancement.
That's exactly what I'm trying to do.

I'm trying to give IE5.5 and below (plus NS4 and earlier) the raw HTML with no CSS at all--the code is simple, semantically correct, and plenty well structured to work fine with no styling. I'm also entirely willing to use CSS properties that don't work in various versions of IE and other older browsers so long as the page still looks acceptable and is usable without them (I've got corner-radius all over the place). My issue is that IE5's CSS support exists but is so buggy it will render the content of the page unreadable unless I hide the main stylesheet from it entirely rather than just fail gracefully.

I'm aware of IE4's lack of conditional comment support, but its marketshare is, thankfully, functionally zero. That said, if there's a tidy, valid way to prevent it from seeing any stylesheet at all I would prefer to use it as a kindness to anyone still using it.

I like NS4's buggy CSS handling--so painless to have it not read a stylesheet at all with a simple media declaration.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.