代码之家 › 专栏 › 技术社区 › a432511

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

vendor-prefix w3c-validation css3 css

a432511 · 技术社区 · 15 年前

我使用webkit/mozilla border radius和box shadow css属性,但我想让css进行验证(目前没有验证)。有没有办法让它验证?

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

7 回复 | 直到 11 年前

womp 15 年前

不,它们是特定于浏览器的属性,没有在标准CSS规范中定义。

也就是说,他们正确地遵循了特定于供应商的CSS扩展规则。它不在W3C官方的CSS规范中。

BoltClock 13 年前

尽管供应商扩展的语法是 mentioned in the CSS3 Syntax module 并且在语法中引入了允许供应商实现自己的前缀而忽略了标准,实际的供应商扩展本身不被识别为正式的CSS属性。这不会改变,因为它们是专有的,并且特定于发明和使用它们的供应商。

然而,最近的增强( early 2011 ) Jigsaw W3C CSS Validator 使减少验证成为可能错误由供应商扩展触发警告 .通过扩展 更多选项 章节:

这使得在样式表仍然无法验证的情况下更容易找到真正的问题。如果供应商扩展是触发错误的唯一原因,那么将它们转换为警告将允许样式表暂时验证。它还消除了在单独的样式表中维护供应商扩展的需要,您必须对验证程序进行隐藏。

警告是避免错误的最远方法,但最终,供应商前缀仍然是非标准的,因此技术上是无效的CSS。

kami 14 年前

部分是可能的。在一个文件(css3.css)中收集所有不支持的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;
    }

缺省CSS

 .square{
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
    }

页面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验证,对不起,还没有。

Pekka 15 年前

不,因为它们不是验证程序验证的标准的一部分。唯一想到的解决方案是将不兼容的属性放入单独的样式表中。

Lark 15 年前

Mozilla和WebKit特定的属性将不会验证。你所能做的就是把你的“丰富”的CSS分离成一个单独的样式表。就像你把你的IE黑客风格从你的主样式表中分离出来一样。这样,您的基本样式表将生效。

Kelly 13 年前

如果您对我的“无效”或“特定于浏览器”的CSS使用单独的CSS文件,那么使用一个小PHP从验证器中筛选出该CSS:

<?php
if(preg_match("/jigsaw.w3c.org/i", $_SERVER['HTTP_HOST'])){ 
    echo '<link rel="stylesheet" href="invalid.css" type="text/css" media="screen, projection" />'; 
}
?>

然后以css3作为配置文件链接到验证器(接受边框半径、文本阴影等):

http://jigsaw.w3.org/css-validator/check/referer?profile=css3

$\u server['http\u host']不起作用,但可能会有什么作用?

12—12—2011

卡米确实发布了最好的解决方案。我创建了一个单独的css3.js文件和document.write(“”);CSS逐行:

CSS3.JS

document.write('\
<style type="text/css">\
home_low_mod {zoom: 1;}\
#home_module {-moz-border-radius: 8px;-webkit-border-radius: 8px;-moz-box-shadow: 0px 1px 3px #a5a6a2;-webkit-box-shadow: 0px 1px 3px #a5a6a2;behavior: url(PIE.htc);}\
#page {-moz-border-radius: 8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;behavior: url(PIE.htc);}\
</style>');

Alex Gray 13 年前

@时钟 完全地 就在这个上面…W3C确实添加了 vextwarning 水平 BOOL 搜索条件。它是不是文件化的…但是如果你用他们的 SOAP API validation 您可以向验证的有效负载添加参数 GET 请求…

&vextwarning=true

例如。。。如果您想在textmate中编辑css validator命令…您将“编辑捆绑包…”, 阿卡 艾斯 + 阿英 + â + 乙


   #!/usr/bin/env ruby

print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=0&profile=none&usermedium=all&text='

scope = STDIN.read
â¦

   
    至-
    
     某物
    
    -更像是
   
   #!/usr/bin/env ruby

print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=2&vextwarning=true&profile=css3&usermedium=all&text='

scope = STDIN.read
â¦

   
    注意,我还添加了
    
     level=css3
    
    并改变了
    
     warninglevel
    
    .  根据API修改这些,
    
     根据需要
    
    .
   
   
    如果你想看
    
     
      全部的
     
    
    通过“联机”提交机制提供的参数….打开Firebug或WebKit检查器等。通过提交查询时
    
     their form
    
    然后看看
    
     full request content
    
    为了得到更多的选择,根据需要…