css include media external

Linking to CSS and adding styles by different media

After all the voodoo, there is only one scenario that seems to work for adding external CSS in real life.

Provide styles for exceptions, like handheld, print etc. in separate external CSS files.
Link to the external CSS as follows:

<link href="foo-1.css" rel="stylesheet" type="text/css" />
<link href="foo-2.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="foo-2.css" media="print" rel="stylesheet" type="text/css" />

IE conditional CSS, in HEAD section, sample:

<!--[if IE]>
	<style type="text/css">.myClass{behavior:url(border-radius.htc);}</style>
<![endif]-->
<!--[if IE 6]>Special instructions for IE 6 here<![endif]-->
<!--[if lte IE 7]>Internet Explorer 7 and lower<![endif]-->

For styling HTML e-mail do not use external CSS, everything has to sit together in one file.

Following material below is not worth even to read. It's about other ways of adding external CSS that do not work.

Adding stylesheets.

It is said that older browsers does not understand @import. How old browsers? Older than IE6? Today, on year 2008, it is time to forget about Netscape and versions of IE older than IE6. So, using @import should be practically all right.

include media external css

Samples:

@media print{
	body{font-size:10pt}
}
@media screen{
	body{font-size:12px;}
}
@media screen, print{
	body{line-height:1.4em; }
}

http://w3development.de/css/assigning_external_css/at_media.html

Assigning external CSS - @media

Test cases: assigning external media-specific CSS to an HTML document with the @media rule. An extensive table shows that the rule for handhelds (and print media) does not work on most of browsers.

Syntax to include external style sheet @import url("") screen, handheld; works on more cases and browsers than other syntaxes.

Other browsers and cases are covered by <style type="text/css" media="all">

Can the both methods be combined? Like this: <style type="text/css" media="handheld,print">@import ("foo.css") handheld,print;</style>

As far as I can see, there can not be any logical explanation to why more than one media type is allowed for the media atrribute in the <link> tag, but not in the <style> tag. Is it merely a bug in the CSS validator? The workaround is to include the same CSS file for each media type separately:

Anyway, @import does not obey in practical tests... steer clear.

2008.

Web Development - XHTML CSS JavaScript jQuery.

www.tuljo.com

Linking to CSS and adding styles by different media

2008.