Valid CSS with new properties

Question

I am using a few CSS tricks to boost up the usability/appearance of my site in Webkit browsers. The two main ones are text-shadow and resize:none (on textareas - to stop that annoying page-breaking resize option in Safari and others).

The problem is that when I run my page through the W3 validator I get tons of:

Property text-shadow doesn't exist in CSS level 2.1 but exists in : #feb4b4 1px 1px 0 #feb4b4 1px 1px 0

-and-

Property resize doesn't exist in CSS level 2.1 but exists in : none none

Is this really not valid? Should I really not use this, or is it an error to just ignore?

Answer 1

The text-shadow property is a CSS3 property. If you pick CSS Level 3 from the advanced options on the W3 CSS Validtor service, it should come through okay. It was also in CSS Level 2, but dropped for CSS Level 2.1.

Answer 2

Both text-shadow and resize are only valid properties in CSS 3, they were only implemented in previous versions of CSS by the browsers but were never officially supported. If you want to use them, you really should use CSS 3 instead.

Answer 3

I would use the proprietary browser equivs of the prpoerties in question like -webkit-text-shadow and -webkit-resize i think that will allow the css to validate while still letting you use the properties (even on level 2).

The down side is you have to mimic this for Mozilla as well like -moz-text-shadow if you want to use it there... and assuming IE eventually starts to support these then you might go back and clean it up replacing them all with the single property declaration in the spec.