How Can I Clean Up My CSS?

I have a ton of css validation errors because of css3 and开发者_运维百科 a ton of warnings. What is the best way to deal with this? Here is the validation:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fbrainbuzzmedia.com%2Fthemes%2Famplify%2Fwordpress%2F&profile=css21&usermedium=all&warning=1&lang=en

Since you are validating your CSS against the CSS2.1 specification, you can expect to get a series of errors for any CSS3 properties you've included in your styles (e.g. your rounded corners). You should validate against the highest spec you're writing against: CSS3 in your case.

If we run the validator again with CSS3, you straight away halve the number of errors you see. Again, you can discount the errors given for vendor-specific attributes such as -moz-border-radius since the CSS specifications do not discriminate based on the type of browser, its only concern is the standard border-radius declaration. Browser vendors have adopted their own prefixes as a hedge against an as-yet unratified standard (although border radius should really be supported by all browsers by now IMHO).

Once you've taken out these issues your error list is actually looking pretty manageable, with only a few star hacks that the validator doesn't like. If you can fiddle your CSS better to achieve the same results in IE without as many hacks (or perhaps include a separate IE stylesheet with a conditional comment in your Wordpress template) your styles should all be looking good.

The bottom line is essentially, if you're using CSS3 and vendor-specific prefixes, you can expect the W3C Validator to call you out on what it considers to be non-standard declarations.

If your CSS is CSS 3, you can set the validator to evaluate it as such. It is evaluating it as CSS 2.1 at that link.

Use actual css comments instead of simply putting an asterix in front of the rule. You can always use lazy commenting if your working something back and forth.

This parses the rule:

/* */
.body { display: none; }
/* */

This doesn't, once you add the space after the second asterix

/* * /
.body { display: none; }
/* */

If you must use the method you did of "turning off" a rule by putting a false character in front of it, at least don't expect that your page will validate well.