I am starting to work with CSS3 media queries and I am baffled that the W3C CSS validator for CSS level 3 profile offers different results (wrong vs. correct) for the following two notions:
- (media queries in html head)
<link type="text/css" rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="../css/screen/iphone.css" />
- (media queries included in main CSS file)
@media screen and (min-width: 320px) and (max-width: 480px)
If I use version 2, my file is validated as correct, but using version 1, I get the following message (in German):
unbekanntes Medium screen and (min-width: 320px) and (max-width: 480px)
which, in English, means something like
unknown medium screen and (min-width: 320px) and (max-width: 480px)
Can anybody confirm this?
If so, what's wrong with this notion?
I know that, performance-wise, version 2 (including media queries in the main css file) is even better than including them in the html head, but I am still very interested in finding out about the problem just mentioned, since I would like to have both options available, depending on different needs.
AFAICS from this W3C site on CSS3 media queries, both versions should yield the same validation results, shouldn't they?
Thanks a lot for any help!