dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Best cross browser, sheet import method.

  1. #1
    Join Date
    Mar 2004
    Posts
    3,081

    Best cross browser, sheet import method.

    Ok so I've decided to split up each media type into its own seperate stylesheet and use a <link> for each, that way I don't end up with a single gargantuan sheet that everyone must download in full when most people would only end up using a fraction of it.

    I've seen a few ways like <link media ="">@import url</link>, or an empty element style <link /> with a href like <link href="url" media="" /> and a bunch of other methods I can't remember. But I don't know which methods IE does and does not understand.

    What's the best ones for cross browser compatability and can be manipulated via DOM javascripting with the minimum of scripting?

    One using the href="" attribute I would assume?
    Last edited by Mr Herer; 11-06-2004 at 11:47 AM.
    I'm thuper, thanks for asking.

    It lives! http://www.stephenphilbin.com/ (Well it kinda' does anyway).
    My portable colour selection tool

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    The one I use is this one:

    @import "";

    It works for IE5+, Moz, NN 6+, Opera 5+. I could use others that would allow for older browsers but I choose not to. Older browsers are not as good with CSS (I'm thinking particularly of NN4 here) therefore it is better to hide all of the styles from them than let them try their best. So long as the content is delivered that's all that matters.

    Check out this for more info.
    Last edited by David Harrison; 11-06-2004 at 01:21 PM.
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Mar 2004
    Posts
    3,081
    Ah nice one man. That's rather a handy page. That method easy for manipulating via DOM so I can throw in a style switcher though? Or am I gonna have to have a wedge of javascript dedicated to mere substring manipulation?
    I'm thuper, thanks for asking.

    It lives! http://www.stephenphilbin.com/ (Well it kinda' does anyway).
    My portable colour selection tool

  4. #4
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Here's a style-switcher that uses the DOM. It imports the styles as normal to begin with but when the script comes into play it removes the style element and puts in a link element. This is for two reasons, firstly IE won't let me append ANYTHING to a style element (v. sucky) and secondly a link element is just easier to work with.

    Don't worry about using link elements by the way, if a browser understands the DOM then it will also understand the import rule, so even though I'm using <link>, NN4 and IE4 will be cut out the loop and you won't have any half-rendered styles.

    OK, here's the code, I've commented it so you shouldn't have much trouble working out what bits do. If you do have a spot of bother though I'll be happy to help.
    Attached Files Attached Files
    Every fight is a food fight when you’re a cannibal.

  5. #5
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    I forgot to mention, the id attribute on the style tag is invalid. It's not an accessibility issue or anything but if it bothers you I could adapt the script to work around it.
    Every fight is a food fight when you’re a cannibal.

  6. #6
    Join Date
    Mar 2004
    Posts
    3,081
    Nice one man, yer a zooper star.

    I'll have a look at it soon. I'm just doing a full re-installation of the OS and servers. I'll check it out tomorrow.
    I'm thuper, thanks for asking.

    It lives! http://www.stephenphilbin.com/ (Well it kinda' does anyway).
    My portable colour selection tool

  7. #7
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Originally posted by Mr Herer
    I'm just doing a full re-installation of the OS and servers.
    Er, have fun. :S

    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles