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:
1. (media queries in html head)
2. (media queries included in main CSS file)
<link type="text/css" rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="../css/screen/iphone.css" />
If I use version 2, my file is validated as correct, but using version 1, I get the following message (in German):
@media screen and (min-width: 320px) and (max-width: 480px)
which, in English, means something like
unbekanntes Medium screen and (min-width: 320px) and (max-width: 480px)
Can anybody confirm this?
unknown medium screen and (min-width: 320px) and (max-width: 480px)
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!