liorean Posted…

Having played around with CSS3 a lot recently, I've found the validator has large problems. It doesn't support the @namespace rule yet, nor does it support the namespace|element selectors. It only works as it should for the all media type, not for the screen media type. There are ways to validate an XML/XHTML or SGML/HTML page, but you need to change the url slightly. Validate this page for CSS3, all warnings, the media type all. See an example on my page Experimental.

James Craig Posted…

It just means the display property is not available for all the media you’ve specified. ‘display’ is not available for aural styles just like ‘voice-family’ is not available for screen styles.

Since ‘all’ is the default value assumed for ‘media,’ why not just remove the media declaration from your style element. I believe the validator is less strict about this and will allow it to validate.

James Craig Posted…

If that doesn’t work, you could try adding the @media declaration to the portions of your CSS that are causing problems. That way the entire stylesheet affects all media, but certain portions only affect screen media...

@media screen {
  .foo {display:none;}
  }

Of course, those would then not work in projection media, like Opera 7’s full screen mode, unless you specified them for projection media, too.

andreas Posted…

Liorean, I don't quite get your example...
James, the strange thing is that I get errors like: "Property display doesn't exist for media screen : none." Quite weird, I think, but let's assume this is a mistake. The idea of adding @media rules then makes sense to me, but what about validating stylesheets that use css3 and e.g. the box model hack, which relies on aural media style rules for properly displaying screen content?

James Craig Posted…

Yeah, that’s the main problem with the voice-family hack for different media. You could try a few things to circumvent it. For example, you can include the xml prologue in your XHTML, therefore throwing IE6 into quirks rendering mode and allowing it to render like IE5. Then the folllowing would suffice.

.nav { /* rules for IE */ }
html>body .nav { /* rules for gecko, opera, safari, etc. */ }

Of course, that may not be acceptable for you, so you could try some other techniques for avoiding hacks. Check the ‘margins versus padding’ section.

liorean Posted…

Well, what conclusions I've drawn is that the CSS3 validation is far from finished. Things that should work in screen media doesn't for instance. Only the all media works for hte most part. Several structures that CSS2 allows are not yet fully working in the CSS3 parsing, not to speak of most of the CSS3 that's reached CR yet. The namespace handling is just an example, that :last-child is not allowed is equally strange. (This only happens if you are handing it an xml/xhtml/html document.) In other words, it's an under development validation mode that you can not rely on at the moment.

andreas Posted…

I see. Instead of thinking that the css3 validator does a stricter media type handling job, it seems to be safer to say that the validator is under heavy development (they'd better mention that somewhere). By the way, it seems like we're not the only ones having problems.

James Craig Posted…

I feel silly now. (:p) I started using the the CSS3 validator several months ago (munged the URL and found out you could use the CSS3 profile) and fixed some similar errors to the ones I mentioned above. I assumed it was still working.

But yeah, it’s definately broken.... er... under heavy development. The CSS3 validation link from my site produces a huge list of errors, too. So nevermind what I said... Yours probably aren’t errors either. Doh!

Jordan Moore Posted…

The box model hack doesn't have to rely on the aural media type. I found another way to do it using the content property. Take a look at the following blog post for more information: The Box Model Hack (Revisited).