Best cross browser, sheet import method.

windows

Guest
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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"" attribute I would assume?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 (<!-- m --><a class="postlink" href="http://centricle.com/ref/css/filters/">http://centricle.com/ref/css/filters/</a><!-- m -->) for more info.Ah nice one man. That's rather a handy page. :D 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?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. :p

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.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.Nice one man, yer a zooper star. :D

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. :DOriginally posted by Mr Herer
I'm just doing a full re-installation of the OS and servers.Er, have fun. :S

:D
 
Back
Top