link or @import

Which one is better:

<link rel="stylesheet" href="style.css" type="text/css" />

or

<style type="text/css">
@import url("style.css");
</style>

and why?
TIA

Steven

"steven" <stevenPANTSvh (AT) pandora (DOT) be> wrote

Which one is better:

link rel="stylesheet" href="style.css" type="text/css" /

or

style type="text/css"
@import url("style.css");
/style

and why?

Some browsers don't support the @import method... most notibly NN4. I
recently switched from the link method to the @import method when I decided
I could stop supporting NN4 and let the page degrade gracefully on that
browser. Read this article for more on which browsers support which method
(note, there are variations using the @import method... URL with and without
quotes, etc. See this article:
http://w3development.de/css/hide_css_from_browsers/

Regards,
Peter Foti

steven wrote:

Which one is better:

link rel="stylesheet" href="style.css" type="text/css" /

or

style type="text/css"
@import url("style.css");
/style

and why?
TIA

Neither's better. They're different. "link" is used for multiple
styles and for grouping different files into a single file. For
example, try this in Mozilla or Opera:
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="style1.css" type="text/css" title="Style 1" />
<link rel="alternate stylesheet" href="style2.css" type="text/css"
title="Style 2" />

style.css is persistent (like @import). But style1.css and style2.css
are selectable alternate styles. More info is in the HTML 4 spec.

Note that in certain browsers (such as IE), the distinction is blurred;
but per the spec (and in standards-oriented browsers), the two are very
different.

HTH

steven wrote:

link rel="stylesheet" href="style.css" type="text/css" /

This is the XHTML way (lose the '/' and its the HTML way)

style type="text/css"
@import url("style.css");
/style

This uses more markup, creates a new style sheet, then imports another style
sheet into it. Its rather inefficient IMO.

--
David Dorward <http://dorward.me.uk/>

"David Dorward" <dorward (AT) yahoo (DOT) com> wrote

steven wrote:
link rel="stylesheet" href="style.css" type="text/css" /

This is the XHTML way (lose the '/' and its the HTML way)

style type="text/css"
@import url("style.css");
/style

This uses more markup, creates a new style sheet, then imports another
style
sheet into it. Its rather inefficient IMO.

Uses more markup?! Barely, if at all. Consider this:

<link rel="stylesheet" href="style.css" type="text/css" />

58 characters (not including the new line at the end).

Now consider this:

<style type="text/css">
@import url("style.css");
</style>

61 characters (not including the new line at the end). Note that I could
have removed the 3 spaces before @import to get 58 characters and it would
have been exactly the same as the link method. But indentation aside, they
are practically identical, and a few extra bytes is hardly a reason to not
use this method.

In addition, this method allows for stylesheets to be hidden from browsers
that implement them in a horrendously broken way (NN4 for example). You
can't do that using the link method.

Regards,
Peter Foti

Peter Foti wrote:

In addition, this method allows for stylesheets to be hidden from browsers
that implement them in a horrendously broken way (NN4 for example). You
can't do that using the link method.

Yes you can:
<link ... media="screen,projection">


--
David Dorward <http://dorward.me.uk/>

"David Dorward" <dorward (AT) yahoo (DOT) com> wrote

Peter Foti wrote:

In addition, this method allows for stylesheets to be hidden from
browsers
that implement them in a horrendously broken way (NN4 for example). You
can't do that using the link method.

Yes you can:
link ... media="screen,projection"

Interesting. I thought that because NN4 supports media="screen" that the
above would still work with it. But apparently that's not the case. In
addition, this should ONLY exclude NN4, whereas the @import methods will
always exclude additional browsers (though in some cases, it may be better
to exclude more... namely IE3 and sometimes IE4).

Ok, you've converted me back to link again!

-Peter