CSS验证工具报错：justify-content、-webkit-animation及justify-self问题咨询

嘿，我来帮你理清楚这些验证报错的问题，你遇到的情况其实挺常见的，咱们一步步拆解：

一、关于justify-self和justify-content的困惑 #

你说得没错，justify-self确实是标准的CSS Grid属性，但W3C验证工具报错大概率是这两个原因：

• 验证版本选错了：如果验证时默认选了CSS 2.1这类旧标准，那Grid相关的属性自然会被判定为非标准。记得去验证页面调整一下，选CSS Level 3或者最新的规范版本，就能识别这些Grid属性了。
• 用错了地方：justify-self是给Grid项目用的，要是你在Flex容器或者普通块元素上用它，验证工具肯定会报错。再检查下你的代码，确保这些属性是用在正确的Grid上下文里。

至于justify-content，它在Grid和Flex布局里都能用，但取值有细微差别，比如space-evenly是比较新的属性值，有些旧版验证规则可能还没跟上，也会触发错误。

二、-webkit-animation的报错为啥很正常 #

这个其实是验证工具的"标准洁癖"导致的——-webkit-animation是WebKit内核浏览器的私有前缀属性，不属于正式的W3C标准，所以工具会把它标成错误。

• 如果你是为了兼容老版本的Safari或者其他WebKit浏览器，保留这个前缀完全没问题，只是验证工具会提示而已。
• 要是不需要兼容旧版浏览器，直接删掉私有前缀，只用标准的animation属性就好，验证就不会报错了。

三、几个快速排查的小技巧 #

• 调整验证工具设置：在W3C CSS验证页面，选对CSS规范版本，要是想保留私有前缀，记得勾选允许供应商扩展的选项。
• 核对规范细节：确认下justify-self这些属性的使用场景，别在非Grid元素上瞎用。
• 逐步排查代码：要是报错太多，先注释掉部分代码，看看哪段导致的错误，精准修复效率更高。

内容的提问来源于stack exchange，提问作者Fredrik Burmester