Tidiest way to hide all stylesheets from IE5?

Discussion in 'Web Design and Development' started by Makosuke, Jan 29, 2010.

  1. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #1
    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.)
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    If you even care and if you're still fishing for ideas, use PHP to generate all the relevant HTML, i.e run a script like this one to check browser type/version and load the IE5 stylesheet by generating the link to a stylesheet named msie5.css for example. Use a switch or if/elseif/else to handle which stylesheet(s) will be loaded.


    -jim
     
  3. savar macrumors 68000

    savar

    Joined:
    Jun 6, 2003
    Location:
    District of Columbia
    #3
    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
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    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
     
  5. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #5
    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.
     
  6. Makosuke thread starter macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #6
    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.

    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.
     

Share This Page