I use the webkit/mozilla awesome border radius and box shadow CSS properties, but I want the CSS to validate (which it currently does not). Is there a way to get it to validate?
No, they are browser specific properties, and not defined in the standard CSS specification.
That being said, they correctly follow the rules for vendor specific extension of CSS. It's just not in the W3C official CSS specification.
No, as they are not part of the standard the validator validates against. The only solution that comes to mind is to put the incompatible properties into a separate style sheet.
The Mozilla and WebKit specific properties will not validate. What you can do is separate your "enriched" css into a separate style sheet. Just like you separate your ie hack styles out of your main style sheet. This way your base style sheets will validate.
I just ran into this problem. I ended up solving it by using jQuery to add css properties to the ID that I wanted to add rounded corners to. Like this: $("#sidebar").css("-moz-border-radius","9px"); $("#sidebar").css("-webkit-border-radius","9px");
Not sure it is "horrible" to circumvent a validator. The idea of getting around a validator for a specific thing is so that you can automatically validate all else, and if you make a mistake that is actually a bug/problem, it might find it, and not have to look at the detail of the test failure every time. Clearly, the border-radius stuff is great css, will be a part of css3, and does not generally cause any problems, even in browsers that don't support it.