如何验证CSS中的供应商前缀,如-webkit-和-moz-?

a43*_*511 17 css w3c-validation css3 vendor-prefix

我使用webkit/mozilla边框半径和框阴影CSS属性,但我希望CSS验证(它目前没有).有没有办法让它验证?

http://jigsaw.w3.org/css-validator/

Bol*_*ock 12

尽管CSS3语法模块中提到了供应商扩展的语法,并将其引入语法以允许供应商实现其忽略标准的自己的前缀,但实际的供应商扩展本身不会被识别为官方CSS属性.这不会改变,因为它们是专有的并且特定于发明和使用它们的供应商.

但是,最近对Jigsaw W3C CSS Validator进行的增强(2011年初)可以减少供应商对警告的扩展所引发的验证错误.通过展开" 更多选项"部分,查找此新选项,例如要进行验证的CSS级别:

如果样式表仍未验证,则可以更轻松地找到样式表中的实际问题.如果供应商扩展是唯一触发错误的事情,将其转换为警告将允许您的样式表暂时验证.它还消除了在必须从验证器隐藏的单独样式表中维护供应商扩展的需要.

警告是最远的,你可以回避错误,但最终,供应商前缀仍然是非标准的,因此在技术上无效的CSS.


wom*_*omp 11

不,它们是浏览器特定的属性,并且未在标准CSS规范中定义.

话虽如此,他们正确遵循供应商特定的CSS扩展规则.它不在W3C官方CSS规范中.


kam*_*ami 5

部分可行。将所有不受支持的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;
    }
Run Code Online (Sandbox Code Playgroud)

default.css

 .square{
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
    }
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

搜索引擎不会运行客户端脚本,因此W3C不支持的属性不会损坏您的SEO。至于绿色CSS验证,很抱歉,还没有。

  • SEO似乎在这里不合适。 (2认同)
  • 搜寻器是否会尝试验证CSS?当他们主要关注内容时,这似乎是对资源的巨大浪费。 (2认同)