我使用 webkit/mozilla 边框半径和框阴影 CSS 属性,但我希望 CSS 能够验证(它目前没有)。有没有办法让它验证?
7 回答
尽管CSS3 语法模块中提到了供应商扩展的语法并将其引入语法中以允许供应商实现自己的前缀而忽略标准,但实际的供应商扩展本身并不被识别为官方 CSS 属性。这不会改变,因为它们是专有的并且特定于发明和使用它们的供应商。
然而,Jigsaw W3C CSS 验证器的最新增强( 2011 年初)可以减少供应商对警告的扩展触发的验证错误。通过展开“更多选项”部分,在其他选项中找到这个新选项,例如要验证的 CSS 级别:
如果样式表仍未验证,这将更容易找到样式表的真正问题。如果供应商扩展是触发错误的唯一因素,那么将它们变成警告将使您的样式表能够暂时验证。它还消除了在必须对验证器隐藏的单独样式表中维护供应商扩展的需要。
警告是您可以避免错误的最远距离,尽管最终供应商前缀仍然是非标准的,因此在技术上是无效的 CSS。
不,它们是特定于浏览器的属性,并且没有在标准 CSS 规范中定义。
话虽如此,他们正确地遵循了 CSS 供应商特定扩展的规则。它只是不在 W3C 官方 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;
}
默认.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 验证,对不起,还没有。
不,因为它们不是验证器验证的标准的一部分。想到的唯一解决方案是将不兼容的属性放入单独的样式表中。
Mozilla 和 WebKit 特定属性将不会验证。您可以做的是将“丰富”的 css 分离到单独的样式表中。就像您将 ie hack 样式从主样式表中分离出来一样。这样您的基本样式表将被验证。
如果您对我的“无效”或“特定于浏览器”的 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
$_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>');