Mobile Stylesheet selection compatible with Safari <3, or am I stuck with JS?

Discussion in 'Web Design and Development' started by Makosuke, May 28, 2010.

  1. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #1
    After considerable experimentation, I settled on the best mix of cleanliness and features for serving a mobile stylesheet to iPhones, Android phones, and other small-screen devices, and a full stylesheet to desktop browsers being the following:

    Set this for the full stylesheet:
    Code:
    media="screen and (min-device-width: 6in), projection"
    and this for the mobile one:
    Code:
    media="only screen and (max-device-width: 6in), handheld"
    ... then provide a javascript button to allow the user to override that decision and enable/disable between them to get the preferred one.

    I used min-device-width: 6in because that catches most android devices with resolutions higher than 480px. (Though after experimenting, Android unfortunately isn't even close to accurate on pixel density with the high-res screens, using about 100ppi always--the Eris, for example, thinks it has a 5" screen. Rather disappointing.)

    This works nearly perfectly; FF, IE8 and Safari 3 or greater, iPad all get the full sheet, iPhone and most Android devices get the mobile one, the "only" at the beginning of the mobile media declaration prevents most older browsers from touching it, and anybody can switch cleanly between them.

    Except that, it turns out, Safari 2.0 or older will NOT load stylesheets for media commands with an "and" in them, even if there isn't an "only" at the beginning. Since older Safaris can handle the CSS just fine, I don't want to force them to manually select a stylesheet, but I can't see any decent way to get around my problem without either:

    A) Including an antistyle sheet as part of the mobile style, which is a pain and a mess,
    or
    B) Using a Javascript browser detector to enable the desktop sheet automatically.

    And if I'm using a JS select anyway, I'm back to browser sniffing, which is a can of worms I really hate to open.

    Is there anything I'm missing here, or am I out of luck on this?

    The test site, if anybody wanted to see the specific implementation, is:
    http://tinderbox.animeworld.com/reviews/


    An unrelated aside, after realizing that IE6 has dropped below 5% of my pageviews and is decreasing rapidly, I decided it was more efficient to just say "screw it" and feed it a minimal stylesheet. The first significant site I've done that with--SO liberating.
     
  2. foniks2020 macrumors regular

    Joined:
    Apr 19, 2002
    #2
    It's 2010 drop Safari 2 support!

    Unless you are unlike any other website on the planet, you've got less than 0% traffic coming to the site with Safari 2.0 - that's going back to OS X 10.4 with no Safari updates applied - a base install of Tiger. Highly unlikely.

    So get over it, enjoy your successful solution and for kicks and giggles, install a log parser to let you know when a Safari 2.0 browser does come to the site - if ever it should be quite the surprise when it does happen.
     

Share This Page