By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,807 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

Including CSS Stylesheets - <link> or @import?

P: n/a
I have so far seen two methods for including external resources as CSS
stylesheets in a document. The first is this:

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

And the second is this:

<style type="text/css">
@import "/stylesheets/style.css";
</style>

What is the difference? And which should I use, given that I am trying
to make the (application/xhtml+xml) page as standard-conforming and
accessible as possible?

Jan 17 '07 #1
Share this Question
Share on Google+
9 Replies


P: n/a
Arancaytar wrote:
I have so far seen two methods for including external resources as
CSS stylesheets in a document. The first is this:

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

And the second is this:

<style type="text/css">
@import "/stylesheets/style.css";
</style>

What is the difference?
In common use, the import method is used to hide stylesheets from
browsers which don't understand the import method as well as much of
their CSS implementation. The main culprit is Netscape 4, but there are
other browsers in this category.

It's common practice to use the import method to style the page, and
thereby present a style-free layout to non-CSS-compliant browsers.
However, there's nothing wrong with using the link method, if your code
works satisfactorily in older or less CSS-compliant browsers.

--
K A Nuttall
www.yammer.co.uk
Re-type the e-mail address how it sounds, remove .invalid
Jan 17 '07 #2

P: n/a
On Wed, 17 Jan 2007, Arancaytar wrote:
And which should I use, given that I am trying
to make the (application/xhtml+xml) page as standard-conforming and
accessible as possible?
"Accessible as possible"? Try Internet Exploder 6 with
http://www.unics.uni-hannover.de/nht...with-dir.xhtml
and
http://www.unics.uni-hannover.de/nht...ith-dir.x.html
Jan 17 '07 #3

P: n/a

Arancaytar wrote:
I have so far seen two methods for including external resources as CSS
stylesheets in a document.
There's also this, but it's obscure and unsupported.
http://www.w3.org/TR/html4/present/styles.html#h-14.6

What is the difference?
They're both valid ways of doing something that arise from completely
different parts of the spec. It's just duplication.

I use <link rel="stylesheet" and I suggest that you do the same. It
works.
It's also impossible to construct a strong argument against the other,
so I won't even bother.

I don't use media attributes to control the stylesheets because it's
ages since I needed to do this. All I ever is some trival print-only /
no-print control and I can do this by embedding a few CSS rules inside
@media print { ...}
inside the stylesheet itself.

I do assemble stylesheets from modules and I do this with @import
rather than multiple <link>s

Again, both of these work, but there's simply no strong argument that
you can't do them another way if you wish.

And which should I use, given that I am trying
to make the (application/xhtml+xml) page as standard-conforming and
accessible as possible?
It's an interesting question as to just how "conformant" and
"accessible" you should make something. There's also the choice of just
which standard to conform to. Not to mention the added time and money
in authoring costs that these goals can add.

If you're trying to find any compromise here, then XHTML clearly isn't
the standard to be aiming at, nor is Appendix C. Go for HTML 4.01
Strict all the way.

I'd also suggest limiting accessibility. Netscape 4 just doesn't matter
any more, so forget the CSS hiding malarkey (either bogus comments or
sneaky @imports). Besides which, simply hiding a good layout from NS4
doesn't make it work well itself. The idea of simultaneously supporting
a 10 year old compatibility layout version is hideous.

Put the effort where it matters and its useful. Make your design fluid
and valid. Make sure that it works on phones and the $100 laptop.

Jan 17 '07 #4

P: n/a

Andreas Prilop wrote:
On Wed, 17 Jan 2007, Arancaytar wrote:
And which should I use, given that I am trying
to make the (application/xhtml+xml) page as standard-conforming and
accessible as possible?

"Accessible as possible"? Try Internet Exploder 6 with
http://www.unics.uni-hannover.de/nht...with-dir.xhtml
and
http://www.unics.uni-hannover.de/nht...ith-dir.x.html
What is that illustrating - that IE can't accept application/xhtml+xml?

No worries; I do check the Accept header and fall back to text/html for
browsers that don't have application/xhtml+xml in their list. After
all, there are more of those around than just IE - lynx, and possible a
lot of older Netscape variants as well.

Jan 18 '07 #5

P: n/a

Andy Dingley wrote:
Put the effort where it matters and its useful. Make your design fluid
and valid. Make sure that it works on phones and the $100 laptop.
Just to make sure then, is this (http://ermarian.net) the right
direction? I've looked at it in a text browser and tried to print it,
and it seemed to work well for me, but I don't surf with my phone so I
don't know what else to watch out for (besides using <divand css
instead of tables).

Jan 18 '07 #6

P: n/a

Arancaytar wrote:
Just to make sure then, is this (http://ermarian.net) the right
direction?
It's not bad, but that's mostly because it's a simple design with big
margins.

Lose the XML prolog.
Lose the <metawith the XHTML content type.
You're serving this as Appendix C XHTML under text/html, so even if you
insist on keeping the docuemnt format as XHTML, you ought to lose these
two factors that are optional anyway and actively contradict Appendix C.

Jan 18 '07 #7

P: n/a
"Andy Dingley" <di*****@codesmiths.comwrites:
Arancaytar wrote:
>Just to make sure then, is this (http://ermarian.net) the right
direction?
Lose the XML prolog.
I literally agree (and have this strange feeling of déj* vu :).
You're serving this as Appendix C XHTML under text/html,
So your suggestion results quite universally in BackCompat mode. I’m so
happy somebody agrees that this is a good thing, and stuff.

(no encoding information by XML declaration or HTTP or even the
META-Ersatz mostly results in cp1252 IRL, another good thing :)

--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011
Jan 19 '07 #8

P: n/a

On 17 Jan, 09:25, "Arancaytar" <arancaytar.ilya...@gmail.comwrote:
I have so far seen two methods for including external resources as CSS
stylesheets in a document. The first is this:

<link href="/stylesheets/style.css" rel="stylesheet" type="text/css" />
This is an XHTML construction that should be served as "application/
xhtml+xml". As simply as that.
And the second is this:

<style type="text/css">
@import "/stylesheets/style.css";
</style>
This is an HTML/CSS construction that works in many current HTML
versions, including HTML 4.01, XHTML 1.0 and XHTML 1.1.
What is the difference?
Not much, but I can't see any reason for you to use the link element.
And which should I use, given that I am trying
to make the (application/xhtml+xml) page as standard-conforming and
accessible as possible?
They both work as XHTML 1.0 and XHTML 1.1. When served as HTML 4.01
you have to drop the last "/" in the link element (to make it
standards-conforming).

Remember that the XML declaration is an instruction to the parser that
this is XML. I wouldn't consider to drop that line in an XHTML
document.

Legacy browsers makes it impossible to serve XHTML as standards-
conforming text/html. To make it as accessible as possible, try to
serve it as HTML 4.01 (if possible), and as application/xhtml+xml to
browsers that accept that MIME type. XHTML syntax served as HTML 4.01
won't validate, but will render on most existing HTML browsers.

Jan 27 '07 #9

P: n/a
On 27 Jan, 21:40, "Roy A." <royarnes...@gmail.comwrote:
<link href="/stylesheets/style.css" rel="stylesheet" type="text/css" />
This is an XHTML construction
This statement is incorrect and highly misleading.

There is nothing "XHTML" about <link>, or the use of <linkto specify
external stylesheets.
http://www.w3.org/TR/html4/struct/links.html#edef-LINK
http://www.w3.org/TR/html4/present/s...style-external

The only "XHTML" characteristic here is the use of an XML-style empty
tag in the cited example. Although this is a correct observation, it's
trivial and irrelevant to the issue being discussed: how best to
specify external stylesheets.

The OP should of course use HTML or XHTML syntax as appropriate,
according to the HTML / XHTML version they're using. We might even
recommend that they use HTML 4.01 Strict. None of this changes the
stylesheet linkage though. There is _no_ implication that "HTML uses
@import, XHTML uses <link>", or anything like it.

Jan 29 '07 #10

This discussion thread is closed

Replies have been disabled for this discussion.