Web development, coding & SEO

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, sample:

  <!--[if IE]><style type="text/css">.myClass{behavior:url(border-radius.htc);}</style><![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.

<style type="text/css" media="handheld,print">@import "styles/handheld-and-print.css";</style>

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:

<style type="text/css" media="handheld">@import ("foo.css") handheld;</style> <style type="text/css" media="print">@import ("foo.css") print;</style>

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

2008.

---