-webkit and -moz error

Question

My .css file (in Sharepoint Designer 2010) give me this error for -moz,-webkit and border : The property is marked invalid because it's not supported by the current schema.

.ms-WPHeader td.ms-wpTdSpace { 
    -moz-border-radius-topright: 5px; 
    -webkit-border-top-right-radius: 5px; 
    border-top-right-radius: 5px; 
}  

What should I do?

Answer 1

The simplest way is just to ignore the warnings. SPD2010's CSS editor doesn't support those vendor-prefixes or indeed anything newer than CSS2.1. Rely instead on better validators, such as http://jigsaw.w3.org/css-validator/.

(They will probably still throw errors on vendor-prefixed CSS, though.)

Personally, I use another text editor for CSS files. SPD's "Open as CSS" has an occasional habit of stripping out things it doesn't understand (e.g. the occasional vendor-prefixed bit of code, like -pie-background) which makes it downright dangerous.

Aside: As far as I can tell (from looking at http://caniuse.com/border-radius), current versions of all the major browsers support border-radius without a prefix, so you might not need the other two any longer (depending on your audience, of course).

Answer 2

try this instead:

.ms-WPHeader td, 
.ms-WPHeader td.ms-wpTdSpace, 
.ms-WPHeader td:first-child.ms-wpTdSpace 
{ 
    position: relative; 
    -pie-lazy-init:true; 
    -pie-poll:true; 
    behavior: url("/_layouts/styles/pie.htc"); 
} 

taken from here and explained why :)

Rounded corners in WebPart headers SP2010

EDIT

SPD uses 2.1 css by default and your using css3 ;) hence why your getting that error.

So you need to do the following to stop the error:

In SPD, look at the menu and select the "Tools" and then go down and select "Page Editor Options"

A new box should appear for you that you can set, what you need to do now is select "Authoring" tab at the top left.

You can now change the css validation to the correct version for the schema, yours being css3.

You will note that you dont have css3 in the list as its only 1.0 to 2.1 :) thats because css3 is not supported yet! you can have this is vs2010 http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210 but that is as far as it goes atm! Even tho it throws an error it should still work :)

hope it helps!

Answer 3

Download and install CSS3 for VS2010 - http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210

Also note that border-radius on td might not work in any browser.