views:

1345

answers:

5

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?

http://jigsaw.w3.org/css-validator/

+6  A: 

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.

womp
Not even possible with some fancy workaround?
a432511
It's not valid CSS according to the W3C spec. You could try importing it as a separate sheet to your main sheet, and see if the validator ignores imports, but that would just be validator specific logic.
womp
Accepted first answer here. Thanks.
a432511
+1  A: 

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.

Pekka
+1  A: 

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.

Lark
A: 

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");

What a horrible thing to do - adding javascript just to handle it so your non-standard properties can get past a validator? Why is validating that important to you and why can't you just be fine knowing that it is valid except those errors that you are choosing to have in place?
Charles Boyung
A: 

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.