What are the advantages/disadvantages of each method for distributing a/many stylesheet(s)?
I see (a not-so-random sample): DL and Suho use strictly the <link> method (and, for the record, both your sites look great, except for in NN4, which looks like a random pile of font upon line upon splotch...not that you care.) Zeldman and BlueRobot use the @import method and it is usable in all the browsers I tested. God uses only the <link> method and it is usable in all the browsers I tested.
Currently, I am a fan of the @import tactic.
Is this still in vogue? Are there better ways? Does this @import trick successfully deal with other devices (screen readers, braille browsers, cellular phones, handhelds, web enabled toasters...etc)?
Well, some browsers support @import, others don't -- mainly older browsers.
For a while there was a little rule of thumb that you could use <link> for CSS1 rules/selectors and @import for CSS2 but IE6 kinda shat all over those hopes.
Although, from what I've seen, using @import can sometimes render the page without any styles applied then it will import and apply the stylesheet a split second after the content has loaded, which looks bad IMHO.
Now, one browser that doesn't support @import is NN4, so this can be handy if you want to easily exclude it from your styles however, you can do the same with <link>'s if you specify more than one media type in the media attribute like so:
<link rel="stylesheet" type="text/css" media="screen,projection,tv" href="myStyle.css" /> -- just keep in mind, most TV's that will display a website have a screen size of 640x480 max. So you might want to just leave it at screen and projection to be safe.
Appart form that, I'm not really sure why the @import mehod was created as I see very little use for it when you have <link> elements, but I'm sure it has it's due use.
mobrul: At the GN we use the link but isnide the style sheet we use:
quote:@import url("naughty.css");
to bring in the styles which would really screw up NS 4.x - it depends on how much you care for NS 4.x these days but people just using the link doesn't mean that they aren't also using @import.
To be honest with you, I don't remember why I don't use @import. I started out using it, but along the way I dropped it, I think maybe because it was screwing something up along the way. At any rate, I've had no problems with link (outside of NN4, of course, which I gave up on a long time ago).
OK, I said I had 'more later'...but this kind of 'later' is just ridiculous. Too long.
Emps, I had a look at Eric Meyer's css and he DOES use the @import, just as you suggested he might. Sneaky bastard.
What are the advantages of doing it that way?
Drac,
"For a while there was a little rule of thumb that you could use <link> for CSS1 rules/selectors and @import for CSS2 but IE6 kinda shat all over those hopes."
Why/how did IE 6 shat all over those hopes? I don't understand.
Finally, has anyone had experience serving css styled html to non-PC/Mac based browsers?
How does that work? Is it supported with a lot of devices? How closely? Is there a better solution?
I DO care what NN4 looks like. I care what all web devices look like. That doesn't mean they all need be the same...or even pretty! But certainly they should all be USABLE, no matter what. That's the point, right?
Not that I necessarily need all the answers right here. I don't mind doing the research. Are there any good, reliable web resources for serving HTML to non-browsers?
<link> is used for attaching a style sheet to an HTML page.
@import is used for attaching a style sheet to another style sheet (much like #include in a programming language).
Any other uses for them are nothing more than workarounds for browser bugs (like using @import to cause NN4.x to ignore certain styles). Workarounds are fine, but use them only when necsessary.
quote:Emps, I had a look at Eric Meyer's css and he DOES use the @import, just as you suggested he might. Sneaky bastard.
What are the advantages of doing it that way?
Doing things that way means you can have your basic styles in the LINKed stylesehhet and then @import the naughty styles which break older browsers - like floats within floats.
Ah, right... so that would explain why DL's site and my site break in certain older browsers. I distinctly remember having a problem with import, though, I just can't remember what it was.
Slime: Thank you for that explanation. I never knew the difference. And now, knowing the difference, I stick by my decision not use @import... um, not that I wasn't sticking to it before, of course. But you know what I mean.
Another advantage of <link> is that you can say <link rel="preferred stylesheet"> or <link rel="alternate stylesheet"> and then standards-compliant browsers will allow you to switch freely between the styles without special scripting. Needless to say, IE6 makes this virtually useless (and will continue to for the next seven years, in the worst case).
The main use of @import seems to be hiding heavy styling from older browsers. I use it for that purpose, at least.
Perfect Thunder pointed out that linked stylesheets have the advantage of being able to be switched. They can also be dished out to specific "user agents" (read: browsers).
For example adding the media="screen" tag specifies that only screen browsers read that stylesheet.
I understand that there are provisions to do the same with the @import rule, but seeing as IE6 doesn't even support it, it's pretty useless.
For that matter, even the "media" attribute doesn't work with a lot of browsers. Oh, well.
quote:I understand that there are provisions to do the same with the @import rule, but seeing as IE6 doesn't even support it, it's pretty useless.
Just to clarify for anyone who's reading this for actual information -- IE supports @import just fine, it just doesn't have a native widget for stylesheet switching. You have to use JavaScript -- such as this.
posted 06-24-2003 17:34
