External CSS Files and Media Types
6 comments so far | Add yours
I think I might have found a bug in W3C’s CSS validator.
There are two ways to import an external style sheet: either by using the <link> tag and a href attribute, or by using the @import rule in the CSS file. The latter has some advantages because certain older browsers can not parse that specific rule, depending on how you write it.
If you want a certain external style sheet to target a specific medium (or media), there are a couple of ways of doing that. If you are using <link>, just add a media attribute and specify the media type. But if you are using the @import rule, you can specify media in two ways: either by adding a media attribute to your <style> tag, or you can specify media types after the url property. Here are three basic examples:
<link href="styles.css" media="screen" rel="stylesheet" type="text/css"><style type="text/css" media="screen">@import 'styles.css';</style><style type="text/css">@import 'styles.css' screen;</style>
All three ways works in most browsers. There are some differences in compability for older browsers, but that’s another topic. So what if you want to address several media types at once? You can comma separate more than one media for each style sheet, like so:
<style type="text/css">@import 'styles.css' screen, projection;</style>
Nice. So what about this:
<style type="text/css" media="screen, projection">@import 'styles.css';</style>
No. It works, but will through you a validation error using the CSS validator at W3C. I have seen this usage on a lot of sites, but it is actually invalid. Or is it? I have added it in my own header here in the kitchen, so you can see for yourself. I have spent nearly 2 hours looking for an explanation to why, but I couldn’t find any answers. Does anyone else know?
As far as I can see, there can not be a 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?
- Links:
- Style Sheets in HTML Documents (W3C)
- Media Types (W3C)
6 Responses so far. Add yours.
-
At 10:09 pm on May 31st, 2007 , Roger Johansson wrote:
Yup, it’s a bug: Bug 697 - multiple media types unrecognised.
-
At 10:14 pm on May 31st, 2007 , David (author) wrote:
Thank god.
-
At 6:14 pm on November 6th, 2007 , Dave wrote:
Indeed, it’s a stupid and annoying bug that has been present in the Validator for easily a couple of years now. I can’t believe it’s still the case - would have though it easy to fix, like a 10 minute programming job if that!
It seems (from that bug report link posted by Roger above) that it’s been fixed in some newer version of the validator, but that this hasn’t gone live yet.
For now I’ve found that putting things as separate lines seems to work fine for validation purposes, at the small cost of a bit of redundancy in your code.
So instead of:
<style type="text/css" media="screen, projection">@import "styles.css";</style>Try:
<style type="text/css" media="screen">@import "styles.css";</style>
<style type="text/css" media="projection">@import "styles.css";</style>Carry on with multiple lines for multiple media types - “tv” and so on. While this is valid and (as far as I can guess) shouldn’t cause any problems, as it’s correct usage, I’m currently unaware if there’s a better solution out there. Also, the only reason you actually need to do this is if full validation is required (by the client, or by your own nagging sense of incompleteness) - since the comma separated version is totally correct, just the Validator is buggy.
Still researching my options on this since I haven’t looked recently, and it’s always been an annoyance. All the usual suspects seem to be rather quiet about it, but maybe my Google-fu isn’t up to scratch today.
Come on W3C - pleeeeease fix it!!
-
At 9:26 am on April 25th, 2008 , Peter wrote:
Had the same validation error but used @import “styles.css”;
@import “styles.css”;
as recommended on this page
and it valdated without any problemNow getting, (on a different attempted css validation of another unpublished site), this message:
Lexical error at line 164, column2. Encountered: “/” (47), after: “-
At 3:56 pm on May 2nd, 2008 , sezer wrote:
CSS “Cascading Style Sheets” LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html
-
At 4:21 pm on April 2nd, 2009 , dış cephe wrote:
Thanks a lot.