Topic: link vs @import Pages that link to <a href="https://ozoneasylum.com/backlink?for=10996" title="Pages that link to Topic: link vs @import" rel="nofollow" >Topic: link vs @import\

 
Author Thread
mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 06-24-2003 17:34 Edit Quote

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)?

discuss

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

IP logged posted posted 06-24-2003 18:17 Edit Quote

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.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 06-24-2003 18:18 Edit Quote

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.

___________________
Emps

FAQs: Emperor

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-24-2003 18:22 Edit Quote

The main reason I haven't used the @import is quite truthfully that I've been too lazy to add it.

I read in an article, though I can't remember where....glish, maybe? Or the noodle incident...?

Anyway, if you include a <script> tag in the head of your HTML document, the 'flash of unstyled content' problem will go away.

You don't necessarily have to have an actual script...as long as there is a <script> tag....

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 06-24-2003 18:54 Edit Quote

The BlueRobot article you were looking for, Mr. DL.

More later

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-24-2003 20:11 Edit Quote

Ah, there ya go. I rarely go there, so I thought it must've been one of the other two....

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 06-25-2003 04:16 Edit Quote

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).

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 07-02-2003 20:32 Edit Quote

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?

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 07-02-2003 21:10 Edit Quote

<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.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 07-02-2003 21:58 Edit Quote

mobrul: You asked:

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.

___________________
Emps

FAQs: Emperor

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 07-03-2003 12:24 Edit Quote

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.

Perfect Thunder
Paranoid (IV) Inmate

From: Milwaukee
Insane since: Oct 2001

IP logged posted posted 07-03-2003 21:59 Edit Quote

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).

Cell 1250 :: alanmacdougall.com :: Illustrator tips

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 07-03-2003 23:05 Edit Quote

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.


Perfect Thunder
Paranoid (IV) Inmate

From: Milwaukee
Insane since: Oct 2001

IP logged posted posted 07-04-2003 03:30 Edit Quote
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.

Cell 1250 :: alanmacdougall.com :: Illustrator tips

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 07-04-2003 04:13 Edit Quote

Hehe. Sorry about that. I wasn't making myself clear.

IE supports the @import rule, alright.
What it *doesn't* support is specifying media types for the @import rule.

For example, for linked stylesheets this is done like:
<link rel="stylesheet" type="text/css" media="print" href="style.css">

IE can do that. No problem.

Now, the @import rule:
@import url("style.css");

IE can handle that too.

But how about:
@import url("style.css") print;

THAT is where IE breaks.
According to CSS spec, this should tell the browser to import "style.css" only for the "print" media type. IE doesn't.


Hope that helped.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu