treehouse : what would you like to learn today?
Web Design Web Development iOS Development

W3C is outputting errors in my CSS3

  • if you guys take a look at my wordpress website,
    http://www.nintensity.net/revscene

    you can see that W3C Validator is detecting CSS3-valid codes as errors. Things such as

    "Property -moz-opacity doesn't exist : 0"
    "Property -khtml-opacity doesn't exist : 0"
    "Property -x-system-font doesn't exist : none"

    And other valid CSS3 codes are outputting it as a bunch of errors. Can anybody help? I'm still trying to figure this out.

    Regards,

    Nintensity
  • Don't worry about them. I don't believe CSS3 is considered valid yet in the WC3 validator, so it will show an error even if they are perfectly valid.
  • Ahh thanks falken!

    I'm also getting an opacity error.

    "Parse Error opacity=70)"

    whenever I use an IE Opacity hack, for example, " filter:alpha(opacity=100); "

    It comes up as an error during my validation. You can even check it for yourselves.
    Is this a known problem that is unfixable?
  • Any css hack will error thru w3c...

    Validation is great or catching errors like typos or syntax errors... but if you are using -moz targeting or any other "tricks" you will see an error

    doesnt mean its wrong or bad or "invalid" its just not the standard...
  • Properties that start with a hyphen (like -moz-opacity) are browser-specific extensions. Each browser has their own:

    -moz- is Mozilla/Firefox
    -webkit- is WebKit/Safari
    -ms- is IE8
    -o- is Opera
    etc.

    These are basically put in place by the browser vendor to test a new property out before it becomes official. So, they're not valid (-moz-opacity is not a real property), but they're not incorrect either - the hyphen prefix is what the W3C recommends for experimental/unofficial properties.

    FYI, -moz-opacity was only used I think for Firefox 1. FF2 and 3 support the finalized opacity property, which is just "opacity."

    As for filter...that's a proprietary IE extension. It's not a standard property which is why it generates errors. If you want, you can move it into an IE-only stylesheet and wrap that in a conditional comment for IE6 users; that way, other browsers will see only the valid code.