如何防止 W3C Validator 解析内部 CSS？答案

【问题标题】：How to prevent W3C Validator from parsing internal CSS?如何防止 W3C Validator 解析内部 CSS？
【发布时间】：2018-06-04 16:41:41
【问题描述】：

W3C Validator 并不总是解析内部 CSS。我知道这一点是因为，过去没有错误或警告的最近页面现在新发现 CSS 错误。

因此，我的问题是：W3C Validator 是否存在任何忽略代码，类似于

对于 Google，防止 W3C 解析内部 CSS？

“内部”CSS 代码示例：

<style> 

@-ms-viewport
    {
        width:device-width;
    }

button, input[type="button"], input[type="submit"], input[type="reset"]
    {
        padding-top:8px !important;
        padding-right:14px !important;
        padding-bottom:9px !important;
        padding-left:14px !important;

        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;

        -moz-box-shadow:0px 1px 2px rgba(159,159,159,0.5);
        -webkit-box-shadow:0px 1px 2px rgba(159,159,159,0.5);
        -khtml-box-shadow:0px 1px 2px rgba(159,159,159,0.5);
        box-shadow:0px 1px 2px rgba(159,159,159,0.5);

        -webkit-border-radius:2px;
        -moz-border-radius:2px;
        -khtml-border-radius:2px;
        border-radius:2px;

        border-width:1px;
        border-style:solid;
        border-color:#BCBCBC;

        background:#f0f0f0;
        background:-moz-linear-gradient(top, #f0f0f0 0%, #E0E0E0 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#E0E0E0));
        background:-webkit-linear-gradient(top, #f0f0f0 0%,#E0E0E0 100%);
        background:-o-linear-gradient(top, #f0f0f0 0%,#E0E0E0 100%);
        background:-ms-linear-gradient(top, #f0f0f0 0%,#E0E0E0 100%);
        background:linear-gradient(to bottom, #f0f0f0 0%,#E0E0E0 100%);
        filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#E0E0E0',GradientType=0 );

        color:#535353 !important;
        font-size:0.928em !important;
        font-weight:normal !important;
        line-height:normal !important;
    }

button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus
    {
        background:#f8f8f8;
        background:-moz-linear-gradient(top, #f8f8f8 0%, #E1E1E1 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#E1E1E1));
        background:-webkit-linear-gradient(top, #f8f8f8 0%,#E1E1E1 100%);
        background:-o-linear-gradient(top, #f8f8f8 0%,#E1E1E1 100%);
        background:-ms-linear-gradient(top, #f8f8f8 0%,#E1E1E1 100%);
        background:linear-gradient(to bottom, #f8f8f8 0%,#E1E1E1 100%);
        filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#E1E1E1',GradientType=0 );
    }

button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active
    {
        -moz-box-shadow:inset 0px 1px 2px rgba(205,205,205,1);
        -webkit-box-shadow:inset 0px 1px 2px rgba(205,205,205,1);
        -khtml-box-shadow:inset 0px 1px 2px rgba(205,205,205,1);
        box-shadow:inset 0px 1px 2px rgba(205,205,205,1);

        background:#E0E0E0;

        text-decoration:none !important;
    }

</style>

【问题讨论】：

您能否提供一个给出此类错误的最小示例？我尝试了几件事，但无法重现。
@unor 我刚刚添加了它。抱歉久等了，最近工作比较忙。所以我有一段时间没有回来检查了。感谢您的提问！
谢谢，我可以用validator.w3.org/nu 复制它，但不能用validator.w3.org 复制它。你在使用 Nu 验证器（即检查 HTML5）吗？
@unor 我不确定，因为我通常会在网页本身包含一个自动检查有效性的链接（例如 <a href="https://validator.w3.org/check?uri=https://card.jamesandersonjr.com" target="_blank">Valid HTML 5 code</a> ）。我通常不直接去 w3 验证器站点手动检查页面。我可以将用于验证的链接前缀更改为其他内容吗？

标签： html css validation w3c-validation

【解决方案1】：

使用 https://validator.w3.org/ 检查 HTML5 文档时，您将被重定向到 https://validator.w3.org/nu/，因此后者很可能是您正在使用的验证器。

WHATWG 的 HTML 规范 introduced 要求 style element 的内容：

style 元素的child text content 必须是conformant style sheet 的conformant style sheet。

这意味着：如果您想要一个有效的 WHATWG-HTML 文档，您在 style 元素中的 CSS 也必须是有效的。以前不是这样。 p>

但是，截至 2017 年 12 月 26 日，W3C 的 HTML 规范对 style element 没有此要求。除非他们也添加该要求，否则即使 W3C-HTML 文档在 style 元素中包含无效的 CSS，它们仍然是有效的。那么可能由 W3C 托管的验证器实例将禁用此 CSS 检查功能。

（几天前，一位用户asked for a switch in the validator to disable checking the CSS。维护者“将对此进行调查”。）

【讨论】：