如何在CSS中验证供应商前缀-webkit-和-moz-？

3回答

开满天机

不，它们是浏览器特定的属性，没有在标准CSS规范中定义。话虽如此，他们正确地遵循了CSS特定于供应商扩展的规则。它只是不在W3C官方CSS规范中。

一只甜甜圈

尽管在CSS3语法模块中提到了供应商扩展的语法，并将其引入语法中，以使供应商能够忽略该标准而实现自己的前缀，但实际的供应商扩展本身并未被视为官方CSS属性。这不会改变，因为它们是专有的，特定于发明和使用它们的供应商。但是，Jigsaw W3C CSS Validator的最新增强功能（2011年初）使减少由供应商扩展警告引起的验证错误成为可能。在其他选项中找到此新选项，例如通过扩展“ 更多选项”部分来验证的CSS级别：如果样式表仍然没有通过验证，则可以更轻松地查找样式表中的实际问题。如果只有供应商扩展会触发错误，将其转换为警告将使您的样式表能够进行初步验证。它还消除了必须在验证器中隐藏的单独样式表中维护供应商扩展的需求。警告是您可以避免的最大错误，但是，最终，供应商前缀仍然是非标准的，因此在技术上是无效的CSS。

潇潇雨雨

部分可行。将所有不受支持的CSS类收集在一个文件（css3.css）中例：css3.css  .round{        -moz-border-radius-bottomleft: 5px;         -moz-border-radius-topleft: 5px;         -moz-border-radius-topright: 5px;         -moz-border-radius-bottomright: 5px;        border-bottom-left-radius: 5px 5px;        border-bottom-right-radius: 5px 5px;        border-top-left-radius: 5px 5px;        border-top-right-radius: 5px 5px;        -webkit-border-bottom-left-radius: 5px 5px;        -webkit-border-bottom-right-radius: 5px 5px;        -webkit-border-top-left-radius: 5px 5px;        -webkit-border-top-right-radius: 5px 5px;    }default.css .square{        width: 100px;        height: 100px;        border: 1px solid #000000;    }page.html<html>    <head>         <link rel="stylesheet" type="text/css" href="default.css">         <script type="text/javascript">              document.write('<link rel="stylesheet" type="text/css" href="css3.css">');         </script>    </head>    <body>         <div class="square round"></div>    </body></html>搜索引擎不会运行客户端脚本，因此W3C不支持的属性不会损坏您的SEO。至于绿色CSS验证，很抱歉，还没有。