Question

我使用webkit / mozilla边框半径和框阴影CSS属性，但我想要CSS验证（它目前没有）。有没有办法让它验证？

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

Answer 1

虽然供应商扩展的语法是mentioned in the CSS3 Syntax module并且已经引入语法以允许供应商实现他们自己的前缀忽略标准，但实际的供应商扩展本身不被识别为官方CSS属性。这不会改变，因为它们是专有的，并且特定于发明和使用它们的供应商。

但是，最近对early 2011的增强（Jigsaw W3C CSS Validator）可以减少由警告的供应商扩展触发的验证错误。通过展开更多选项部分，在其他方面找到此新选项，例如要验证的CSS级别：

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

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

Answer 2

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

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

Answer 3

部分可能。将所有不受支持的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验证，对不起，还没有。

Answer 4

不，因为它们不是标准的一部分，验证者会对此进行验证。想到的唯一解决方案是将不兼容的属性放入单独的样式表中。

Answer 5

Mozilla和WebKit特定属性不会验证。您可以做的是将“丰富的”CSS分成单独的样式表。就像你将主要样式表中的ie hack样式分开一样。这样您的基本样式表将验证。

Answer 6

如果你为我的“无效”或“浏览器特定的”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链接到验证器作为配置文件（接受border-radius，text-shadow等）：

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

$ _ SERVER ['HTTP_HOST']不起作用，但也许会有一些东西？

2011年12月12日

Kami真的发布了最佳解决方案。我创建了一个单独的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>');

Answer 7

@BoltClock TOTALLY 就在这一个...... W3C确实添加了vextwarning级别BOOL搜索条件。 NOT 已记录...但如果您使用的是SOAP API validation，则可以在验证GET请求的有效负载中添加参数....

&vextwarning=true

例如...如果你想在TextMate中编辑CSS验证器命令...你会＆＃34;编辑套件......＆＃34;，又名 {{1} } ^ ⌥ + + ⌘ B

到 - 某些东西 - 更像是

#!/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。根据API，根据需要更改。。

如果您想查看所有，可以通过＆＃34;在线＆＃34;提交机制....在通过their form提交查询时打开Firebug或Webkit检查器等，并根据需要查看warninglevel以获取更多选项......

webkit inspector of css3 validation

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

7 个答案:

2011年12月12日