如何验证 CSS 中的供应商前缀，如 -webkit- 和 -moz-？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1889724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate vendor prefixes in CSS like -webkit- and -moz-?
提问by a432511
I use the webkit/mozilla border radius and box shadow CSS properties, but I want the CSS to validate (which it currently does not). Is there a way to get it to validate?
我使用 webkit/mozilla 边框半径和框阴影 CSS 属性，但我希望 CSS 进行验证（目前还没有）。有没有办法让它验证？
采纳答案by womp
No, they are browser specific properties, and not defined in the standard CSS specification.
不，它们是浏览器特定的属性，并未在标准 CSS 规范中定义。
That being said, they correctly follow the rules for vendor specific extension of CSS. It's just not in the W3C official CSS specification.
话虽如此，他们正确地遵循了特定于供应商的 CSS 扩展规则。它只是不在 W3C 官方 CSS 规范中。
回答by BoltClock
Although the syntax for vendor extensions is mentioned in the CSS3 Syntax moduleand introduced into the grammar to allow vendors to implement their own prefixes ignoring the standard, the actual vendor extensions themselves are not recognized as official CSS properties. This is not going to change, as they're proprietary and specific to the vendors that invent and use them.
尽管供应商扩展的语法在 CSS3 语法模块中提到并被引入到语法中以允许供应商实现他们自己的前缀而忽略标准，但实际的供应商扩展本身并没有被识别为官方的 CSS 属性。这不会改变，因为它们是专有的，并且特定于发明和使用它们的供应商。
However, a recent enhancement (early 2011) to the Jigsaw W3C CSS Validatormakes it possible to reduce validation errorstriggered by vendor extensions to warnings. Find this new option among other such as the level of CSS to validate against by expanding the More Optionssection:
然而，最近对Jigsaw W3C CSS Validator 的增强（2011 年初）可以减少由供应商扩展触发的验证错误警告。通过展开更多选项部分，找到这个新选项，例如要验证的 CSS 级别：
This makes it easier to find the real problems with your stylesheet if it still doesn't validate. If vendor extensions are the only things triggering errors, turning them into warnings will allow your stylesheet to validate tentatively. It also eliminates the need to maintain vendor extensions in a separate stylesheet that you have to hide from the validator.
如果样式表仍未通过验证，这可以更轻松地找到样式表的真正问题。如果供应商扩展是触发错误的唯一因素，将它们转换为警告将允许您的样式表暂时验证。它还消除了在单独的样式表中维护供应商扩展的需要，您必须对验证器隐藏该样式表。
Warnings are the furthest you can shy away from errors, though, as ultimately, vendor prefixes are still non-standard and therefore technically invalid CSS.
警告是最远离错误的地方，不过，最终，供应商前缀仍然是非标准的，因此在技术上是无效的 CSS。
回答by kami
It partly possible. Collect all your unsupported css classes in one file (css3.css)
部分可能。将所有不受支持的 css 类收集到一个文件 (css3.css) 中
Example:
例子：
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
默认.css
.square{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
page.html
页面.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>
Search engine don't run client scripts, so your W3C unsupported attributes will not damage your SEO. As for green css validation, sorry, not yet.
搜索引擎不运行客户端脚本，因此您的 W3C 不受支持的属性不会损害您的 SEO。至于绿色 css 验证，抱歉，还没有。
回答by Kelly
If you use a separate CSS file for my "invalid" or "browser-specific" CSS then use a little PHP to filter out that CSS from the validator:
如果您为我的“无效”或“特定于浏览器”的 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" />';
}
?>
Then link to the validator with CSS3 as the profile (accepts border-radius, text-shadow, etc.):
然后以 CSS3 作为配置文件链接到验证器（接受 border-radius、text-shadow 等）：
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
$_SERVER['HTTP_HOST'] doesn't work but perhaps there is something that will?
$_SERVER['HTTP_HOST'] 不起作用，但也许有什么可以的？
12-12-2011
12-12-2011
Kami really posted the best solution. I create a separate css3.js file and document.write(''); the CSS line by line:
Kami 确实发布了最佳解决方案。我创建了一个单独的 css3.js 文件和 document.write(''); CSS 一行一行：
CSS3.js
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>');
回答by Pekka
No, as they are not part of the standard the validator validates against. The only solution that comes to mind is to put the incompatible properties into a separate style sheet.
不，因为它们不是验证器验证所依据的标准的一部分。想到的唯一解决方案是将不兼容的属性放入单独的样式表中。
回答by Lark
The Mozilla and WebKit specific properties will not validate. What you can do is separate your "enriched" css into a separate style sheet. Just like you separate your ie hack styles out of your main style sheet. This way your base style sheets will validate.
Mozilla 和 WebKit 特定属性将不会验证。您可以做的是将“丰富”的 css 分离到一个单独的样式表中。就像您将 ie hack 样式从主样式表中分离出来一样。这样您的基本样式表将被验证。
回答by Alex Gray
@BoltClock is TOTALLYright on this one... W3C has indeed added a vextwarninglevel BOOLsearch criteria. It is NOTdocumented... but if you are using their SOAP API validationyou can add a parameter to the payload of your validation GETrequest....
@BoltClock在这一点上完全正确...... W3C 确实添加了一个vextwarning级别BOOL搜索条件。它没有记录......但是如果您使用他们的SOAP API 验证，您可以向验证GET请求的有效负载添加一个参数......
&vextwarning=true
&vextwarning=true
for example... if you wanted to edit the CSS validator command in TextMate... you would "Edit Bundles...", aka?+?+?+B
例如......如果你想在 TextMate 中编辑 CSS 验证器命令......你会“编辑包......”，又名?+?+?+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
…
to - something- more along the likes of
到 -某事- 更多类似的
#!/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
…
Notice that I also added a level=css3and changed the warninglevel. Alter these, according to the API, as needed.
请注意，我还添加了一个level=css3并更改了warninglevel. 根据 API根据需要更改这些。
If you want to see allthe parameters that are available via the "online" submit mechanism.... open up Firebug, or the Webkit inspector, etc.. while submitting a query via their formand check out the full request contentto get even more options, as needed...
如果您想查看通过“在线”提交机制可用的所有参数....打开 Firebug 或 Webkit 检查器等...同时通过他们的表单提交查询并查看full request content以获得更多选项， 如所须...
