W3C CSS validation query

I have been striving to make my site compliant with W3C but the CSS validator throws up one error: “unrecognized media only screen and (max-device-width: 480px)” This is to do with my style sheet for iPhone.

The mark up is as follows: <link media=“only screen and (max-device-width: 480px)” href=“./css/iPhone.css” type=“text/css” rel=“stylesheet” />

The stylesheet code is: max-device-width: 480px@charset “UTF-8”;div{margin:0;padding:0;}

Is there any reason why W3C won’t validate this? And is there a fix for it?

Many thanks in advance if you can help with this.


No as far as I understand you can’t import a stylesheet from within the media query as the point was to keep the rules in one sheet I believe .:slight_smile:

I also think you need the media type to be valid css3 (if there is such a thing - and I may be mistaken).

@media screen and  (max-device-width: 480px) and (min-device-width: 320px) {
/* CSS Document */
 /* Remove default margins and padding */
 div {	margin:0; padding:0;}
 body {margin:0;padding:0;height:100&#37;;}
 #header {text-align: center;padding-right: 2px;padding-left:  2px;margin-top: 3px;margin-right: 1px;margin-bottom: 3px;margin-left:  1px;} 
 /* Remove unwanted columns */
 #sidebar1 {display:none;}	
 #sidebar2 {display:none;}
 /* Display on handheld only */	
 #sidebar3 {float: left;width: 115px;margin-right: 10px;margin-left:  0px;padding-top: 0px;padding-right: 0px;padding-bottom:  0px;padding-left: 0px;}
 #listings {background-color: #ffffcc;text-align: left;padding-right:  0px;padding-left: 0px;margin-left: 2px;margin-right: 2px;height: auto;}
 #mainContent {background-image: none; background-repeat:  no-repeat;margin-left: 0;padding-top: 0;padding-right:  2px;padding-bottom: 0;padding-left: 2px;}
 .foo{color:#000000;font-size:18px;font-family: Arial;}

Interesting article here.

Some more information on media queries.


  1. Might be my bad, not sure @import can go inside @media after all… Not something I normally use. :frowning:

  2. @import has to be the first thing in your stylesheet, not the last. This may mean you have to put a bit of extra thought into your specificity. You could move everything else into another stylesheet and @import it first, or toss an ID on body and prefix that ID for everything you want to be ignored in the normal screen.css – which is the cleaner approach IMHO to handling those types of specificicicicityty issues. For all my ranting about language, I still can’t pronounce that word :smiley:

  3. lose the @charset nonsense, you shouldn’t be using non-ASCII7 characters in the first place in a CSS file. Even having this preceed the @import could in fact be screwing things up.

  4. the DIV and BODY declarations look redundant to me… and the rest of those could probably be condensed down smaller.

  5. Also the ‘swap’ of sidebar1 and sidebar2 for sidebar3 means you are sending the same information TWICE in your markup, does it not?

That’s just a wild guess – I’d have to see the markup that’s being applied to as well – and some formatting wouldn’t kill ya :wink: (I hate single line CSS, it just leads to mistakes)

Here is my “screen.css” code:

@charset “UTF-8”;
body{margin:0;padding:0;text-align:center;color:#000000;font-family:“Lucida Grande”, Verdana, sans-serif;font-size:62.5%;background-image:url(…/images/grey.gif)}
#container{width:950px;text-align:left;font-family:“Lucida Grande”, Verdana, sans-serif;margin-right:auto;margin-bottom:0;margin-left:auto;background-color:#FFFFcc;border-top-width:0px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;font-weight:bold;}
#mainContent{background-image:url(…/images/Rugby3-2nobg.jpg);background-repeat:no-repeat;margin:0 0 0 150px;padding-top:0;padding-right:20px;padding-bottom:0;padding-left:20px;}
#footer{background-color:#ffffcc;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;font-family:Georgia,“Times New Roman”, Times, serif;text-align:center;}
#belowbox{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;font-family:Georgia,“Times New Roman”, Times, serif;text-align:center;}
.copyright{margin-top:10px;font-family:Georgia,“Times New Roman”, Times, serif;font-size:10px;color:#666666;background-color:#FFFFcc;width:950px;float:none;text-align:center;}
table{width:90%;margin:0 auto;font-family:“Lucida Grande”, Verdana, sans-serif;font-size:1.4em;line-height:1.4em;border-collapse:collapse;}
tr{border:1px solid #666;}
th{text-align:center;border-left:1px solid #333;border-right:1px solid #333;border-bottom:3px double #333;padding:0 .5em;}
td{color:#333;border:1px dotted #666;padding:0 .5em}
@media (max-device-width: 480px) and (min-device-width: 320px) {

…and this is “mobile.css”:

@charset “UTF-8”;
/* CSS Document /
Remove default margins and padding /
div { margin:0; padding:0;}
body {margin:0;padding:0;height:100%;}
#header {text-align: center;padding-right: 2px;padding-left: 2px;margin-top: 3px;margin-right: 1px;margin-bottom: 3px;margin-left: 1px;}
Remove unwanted columns /
#sidebar1 {display:none;}
#sidebar2 {display:none;}
Display on handheld only */
#sidebar3 {float: left;width: 115px;margin-right: 10px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}
#listings {background-color: #ffffcc;text-align: left;padding-right: 0px;padding-left: 0px;margin-left: 2px;margin-right: 2px;height: auto;}
#mainContent {background-image: none; background-repeat: no-repeat;margin-left: 0;padding-top: 0;padding-right: 2px;padding-bottom: 0;padding-left: 2px;}
.foo{color:#000000;font-size:18px;font-family: Arial;}

We’d need to see what your whole file is looking like now and what doesn’t seem to be working exactly.:slight_smile:

Thanks for all that and no need to be sorry - I very much appreciate your time and knowledge.

I’ve stripped out the html <link media="only screen and (max-device-width: 480px) and (min-device-width: 320px) etc. from the <head> of my index page and added your code to my screen.css style sheet, changing “narrow.css” to my “mobile.css”. It doesn’t work I’m afraid, so I must be missing something somewhere.

Am I really thick? (Tick box :slight_smile: )

Sorry there, got back and had something major plunked down on my desk that took priority.

The reason I would avoid media queries is you end up targeting just one or two DEVICES; I have no issues with targeting by TYPE of device, but really targeting JUST the iPhone for example isn’t exactly my idea of good web design practices. Let them have the desktop version – or get a browser that can reformat the desktop version into something useful like Opera mini. or that can throw away the excess automatically like Opera Mobile.

It’s all about drawing the line – Ok, so you customized for the iPhone… but now it looks like crap on droid, so you fix that but now blackberry users are *****ing… you’ve got to draw the line somewhere; It’s bad enough we have to target seven different desktop browsers without having to specifically target every concievable handheld manufacturer… netfront, uzard, obigo, netsailor… the list goes on and on as do the screen sizes.

Though as I said before if you REALLY want to do the media queries stuff, do it in the CSS. If you’ve thought out your DIV and source order properly it’s unlikely to take more than 200-300 bytes of CSS to make the differences between 800+ and narrow, especially if you are used to designing fluid or semi-fluid layouts. Turn off floats, remove restricted width from sidebar… and, uhm… that’s probably it – not even worth the extra handshake for the separate file; That most browsers will still download even if they aren’t using it and the media query failed… and if you REALLY want it in that separate file, that’s where @import comes in handy.

@media (max-device-width: 480px) and (min-device-width: 320px) {

Just toss that in your normal screen.css… Oh, and it occurred to me that IE ignores media queries ANYWAYS if they are in the CSS, so this would mean you don’t even need the conditional comment! I’d also consider just testing if max-device-width is less than 800 and to hell with the rest; you do it right with a semi-fluid layout and you should be able to support everyone regardless of screen size. (1st gen netbook owners would love you for that)…

Generally the only thing I use IE CC’s for is javascript, and then I use the @cc_on version – and usually the ONLY thing I do that for is subtracting that pesky 10ms overhead from a setTimeout.

Of course, this too would be listed as invalid CSS on the 2.1 validator – but at least you can use the CSS3 validator without changing the markup’s doctype…

I really just loathe the idea of media queries in the markup just as I do conditional comments; Drilldown logic would work far better – device type for the general CSS, then cascade the target in the CSS so it’s cached. Cleaner and leaner.

Another approach that I used in the past – and this was a very specific case was to feed the ‘narrow’ version to all users, then use javascript to do a class swap based on width… scripting off users got the ‘narrow’ version, scripting on if larger than my min-width got the full. Basically do it as a close-cousin to mcSwitchy. (or how I handle it, which I call ‘quickswitchy’ since swapping one class and inheriting is WAY smoother than the normal “let’s target every element by hand” crap.)

Has the advantage that it works on handhelds that have scripting disabled, and works in IE… only people that get screwed are the people with scripting disabled/blocked on large screens, and you could always toss a NOSCRIPT tag in there to tell them “Hey, enable JS for widescreen version”… toss a max-width of like 512px on there, then strip it for the wide one and the scripting off is less of an issue.

NOT a great solution, but no worse than media queries really.

My version is the valid version of the conditional comments.:slight_smile:

<!--[if !IE]>-->
<style type="text/css">

(BTW the answer you received at digital point was wrong ;))

You’ll have to wait for Jason to finish his Pizza for his take on this :slight_smile:

My head is spinning!

@ Paul - I found another example on the web somewhere when trawling around which was the same as your’s except there was an additional ! thus: <!–[!endif]–> (My highlighting). Thanks for the link to that part of the W3C site.

@deathshadow60: I’d be very interested to see how you would approach this so that a site displays in a readable format on an iPhone (and others). Not least because I like to learn stuff like this. When you’ve digested that pizza, of course :slight_smile:

Apparently so.:rolleyes:

You’ll have to wait for Jason to finish his Pizza for his take on this :slight_smile:

Must be the family sized one. :slight_smile:

Yes I looked too hastily and the OP’s original rule as you said is not applied to anyone because of the not ie rule.

The rule below though is read by all browsers except IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--[if !IE]>-->
<style type="text/css">

<p>Background is red in all but IE</p>

The conditional comment is now valid which is what I was talking about and not the fact that the CSS validator chokes on the media query in the link element as it is a work in progress.

ALMOST what I was saying – the comment placement does in fact send it only to IE, but look at the if statement, which says “!IE” – which means “Not IE”… That sends it to IE, and then says don’t do it in IE; so it’s not done in any browser.

Is still invalid markup… and I think even the HTML 5 validator *****es about it. It’s why he’s here; that’s identical to his original markup, and it’s invalid HTML4 (no if’s and’s or buts) and I don’t think the validator for 5 recognizes it either… and you quoted the wrong one.

<!--[if !IE]>-->
  <p>This is shown in downlevel browsers.</p>

Is the one from the SP article you meant to quote… but if you use that, the media query in the link is still invalid markup.

… and if you are going to do media queries, that’s where it belongs – in the CSS, not in the markup. Notice nowhere in that article do they use it in the MEDIA attribute. I’ve got to look at that harder because can you even use it in the Attribute in the markup? (I assumed that was a 5 construct, but I don’t remember seeing it…)

@canalboatman - That last link of Paul’s covers why media queries are still not a territory I’d even attempt to use in it’s last two paragraphs… Much like conditional comments.

When I’m back at my workstation later today I’ll explain my reasoning on using (or more specifically not using) those coding methods. (answering this post from the local pizza joint)

Off Topic:

Generally speaking I would not use the ‘@charset’ either but I didn’t write that CSS (I was just pointing out it was positioned wrong). As we know, it can depend upon which major Human Language the Markup and CSS is using, for example Greek, etc.

Jason was saying that you have the code the wrong way around now :slight_smile:

You were trying to hide the media query from all versions of IE but instead you have now given it to only IE versions which is the opposite of what you were trying to do.

The valid way to do this is like this:

[B]<!--[if !IE]>-->[/B]
<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="./css/mobile.css" type="text/css" rel="stylesheet" />

That stylesheet will now only be passed to non IE browsers.

See here for more info on media queries.

It now validates because as far as the validator is concerned it is nothing but a comment and so doesn’t need to be validated.

Problem solved!

<!–[if !IE]>–>
<link media=“only screen and (max-device-width: 480px) and (min-device-width: 320px)” href=“./css/mobile.css” type=“text/css” rel=“stylesheet” />

It was this mark up that caused the trouble.

Should have been:

<!–[if !IE]>
<link media=“only screen and (max-device-width: 480px) and (min-device-width: 320px)” href=“./css/mobile.css” type=“text/css” rel=“stylesheet” />

The tags around the IE comment were incorrect, and now it validates.

So, for the record, <link media=“only screen and (max-device-width: 480px) and (min-device-width: 320px)” is perfectly acceptable to W3C. It was the ******** I surrounded it with that made it fail. :slight_smile:

Thanks to all for having a look.


I’m actually validating for CSS 3. My problem is that this makes my site work on iPhone (and on Palm as well and doubtless other mobile devices). If it is not acceptable as a standard to WC3 then is there an alternative that both works and will validate?

I have taken the code straight off a web site - several sites, if you type in the search term “iphone css” suggest this code for mobile devices.

The style sheet itself validates, so the problem is in the HTML mark up that links to the style sheet. You could say, “It works, so why worry about W3C?” but having got so far and with just this one “error”, it is annoying.

Thanks for the input, BTW.

PS: Not sure what you mean about the formatting, but if you minify CSS then that is what you get as a style sheet, and it works perfectly on my “screen” and “print” style sheets. Or am I getting the wrong end of the stick?

It also will now no longer work I don’t think… You now have the IE only commented out version set for non-IE; That condition should never resolve in any browser making that CSS never load.

<!–[if !IE]>

Will NEVER fire. Non-IE browsers will ignore it because they see the whole thing as a comment; IE will ignore it because you said ‘not IE’. The “–>” version ends the comment for all browsers except IE, removing that breaks what you want it to do.

Just part of why I usually consider resorting to that conditional comment stuff for CSS to be “failure by design”… also why I’m none too wild about the conditional media stuff either. You want a ‘mobile’ trap, that’s what handheld is supposed to be for… so do we make handheld work properly? No, let’s make it MORE complicated to break even more sites :frowning:

I keep seeing people saying that, and every time I go “Good god WHY?!?”

Since valid CSS is supposed to be 7-bit ASCII only anyways why would character encoding even be an issue? Why even waste the characters on it?!?

As to the actual problem, I’d have to see a hell of a lot more code to even try and figure out what’s going wrong… Though the formatting of what’s presented (or lack therin) could be as much of your problem with the CSS as the code itself, letting you make mastakes you shouldn’t…

Though this:
media=“only screen and (max-device-width: 480px) and (min-device-width: 320px)”

Is NOT a valid MEDIA declaration in CSS 2.1/earlier. That’s a buggy HTML5/CSS3 “Not even out of draft you shouldn’t even be looking at it for production code” value… I’d be surprised if the validator (even the HTML5 version) can make the least bit of sense out of it. Again, stuff one shouldn’t even be thinking on using for a production site – that’s what “draft” means!

The first line in the CSS must be: @charset “UTF-8”; it must appear at the very start of the document, not preceded by any characters.

Also it looks like you are using proprietary code… I suspect you were trying to deploy Microsoft Specific “Conditional Comments”, for example:

<!–[if !IE]>–>
<link media=“only screen and (max-width: 480px)”
rel=“stylesheet” type=“text/css” href=“iphone.css”/>

That would explain why you were using completely weird syntax and the Validator choking.