关于CSS3 / @ Import和验证CSS2.1的几个问题

Question

This weekend, I made a template for a ficticious website. I do this every so often to try to build a very cleanly coded website template with minimal markup and very concise CSS.

I want my sites to validate perfectly before I hand them over to the client.

I have two problems ( I was wondering how others make a completely valid website ) using : http://validator.w3.org/check

I use some CSS3 properties (transitions, box-shadows, border-radius, etc) which make the site fail the validation since the validator checks against the CSS 2.1 spec (I guess). Are there any methods you guys use to still pass the validator with these properties in the CSS? Do you seperate them and wrap them in conditional comments?

The second is the @import CSS method. In my header, I have one stylesheet called main.css. In this stylesheet, I have something like this:

/*site structure*/
/*@import url("grid_system_960.css");*/

/*default style rules
@import url("layout.css"); */

/*navigation.css
@import url("navigation.css");*/

I simply do it like this to keep the CSS modular and clean, but the @import also failed the validator.

Has anybody got any suggestions that I could take to improve my structure/method?

Answer 1

I want my sites to validate perfectly before I hand them over to the client..

Stop. Validation is a tool, not a competition. If you understand why the code fails and the consequences of how you deviate from the specification, then it isn't a problem.

as the validator checks using CSS 2.1 spec

The second is the @import CSS method.

Don't use this in production code. It increases the number of HTTP requests and slows the site down. Combine and minify CSS before publication.

@import also failed the validator

Then you are using it wrong (probably by failing to make it the first thing in the stylesheet). "In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present)."