473,385 Members | 1,983 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Including CSS Stylesheets - <link> or @import?

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
9 6882
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
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

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

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

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

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

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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/newsgroup-faq Posting-Frequency: twice a week (mondays and thursdays) Last-modified: March 10, 2001 Version: 1.95 URL: http://css.nu/faq/ciwas-mFAQ.html Maintainer:...
7
by: steven | last post by:
Which one is better: <link rel="stylesheet" href="style.css" type="text/css" /> or <style type="text/css"> @import url("style.css"); </style>
2
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/newsgroup-faq Posting-Frequency: once a week Last-modified: 2004-07-26 Version: 2.00 URL: <http://css.nu/faq/ciwas-mFAQ.html> Maintainer: Jan Roland Eriksson...
0
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/newsgroup-faq Posting-Frequency: once a week Last-modified: 2004-07-26 Version: 2.00 URL: <http://css.nu/faq/ciwas-mFAQ.html> Maintainer: Jan Roland Eriksson...
0
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/newsgroup-faq Posting-Frequency: once a week Last-modified: 2004-07-26 Version: 2.00 URL: <http://css.nu/faq/ciwas-mFAQ.html> Maintainer: Jan Roland Eriksson...
8
by: Alan J. Flavell | last post by:
What I was trying to do: to offer a default stylesheet, plus another small stylesheet which can be applied additionally to the default one. Preferably, the optional stylesheet should be initially...
11
by: Connelly Barnes | last post by:
Hi, I wrote the 'autoimp' module , which allows you to import lazy modules: from autoimp import * (Import lazy wrapper objects around all modules; "lazy modules" will turn into normal...
8
by: mscertified | last post by:
I have two stylesheet files, one is a standard file and one a custon file. They have no classnames in common. How do I specify that my page use both stylesheets? I tried Help and as usual could...
3
by: RachH | last post by:
I import tables from one Access 2003 database into another 1x/day (for various reasons, linking tables does not meet the need). The database I am importing from is password protected at the general...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.