CSS CSS 验证器无法识别指针事件和外观属性

Question

我是 CSS 的新人，刚刚构建了一个应用程序。问题是，在验证 CSS 时，我收到以下错误和警告：

有人可以解释这些错误和警告的含义以及如何修复它以便验证 CSS 吗？

尽管有这些错误，我的应用程序仍能正常运行。

这是我的 CSS 代码：

/*----------------------------CSS reset------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*-----------App wrapper-----------*/
#wrapper {
  padding-left: 1em;
  padding-right: 1em;
}

/*-----------App description-----------*/

h1 {
  font-size: 24px;
  font-family: helvetica;
  font-weight: bold;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
}

p {
  font-size: 16px;
  font-family: helvetica;
  text-align:justify;
  line-height: 1.2;
}
/*-----------Select menu-----------*/

#input {
  padding-top: 1em;
  padding-bottom: 1em;
}

#search_button, label select {
  padding: 10px 10px 10px 10px;
    background: #f8f8f8;
    color: #444;
    border: 1px solid black;
    border-radius: 0;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
  font-family: helvetica;
  font-size: 13px;
}

#search_button, label select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #444;
}

#search_button, label select::-ms-expand {
    display: none;
}

label:before {
    content: '';
    right: 5px;
    top: -7px;
    width: 30px;
    height: 33px;
    background: #f8f8f8;
    position: absolute;
    pointer-events: none;
    display: block;
}

label { position: relative; }

label:after {
    content: '>';
    font: 16px helvetica, monospace;
    color: #444;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 2px;
    top: -3px;
    border-bottom: 1px solid #aaa;
    position: absolute;
    pointer-events: none;
    width: 35px;
    padding: 0 0 5px 0;
    text-indent: 14px;
}

/*-----------Crest, Name-----------*/
#output {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display:flex;
  max-height: 70px;
}

#crest {
  max-height: 70px;
  max-width: 70px;
}

img {
  max-height: 100%;
  float: left;
}

#team-name {
  width: 100%;
}

h2 {
  font-size: 17px;
  font-family: helvetica;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 70px;
}

/*-----------Geochart container-----------*/


/*-----------Pie chart container-----------*/
  #pie-container {
      display: block;
  }
/*----------------------------Tablet responsive----------------------------*/
@media all and (min-width: 700px) {



  /*-----------App decription-----------*/
  h1 {
    font-size: 50px;
  }

  p {
    font-size: 16px;
  }

  /*-----------Crest, Name-----------*/
  #output {
    max-height: 120px;
  }

  #crest {
    max-height: 120px;
    max-width: 120px;
  }


  h2 {
    font-size: 38px;
    line-height: 120px;
  }
}
/*----------------------------Desktop responsive----------------------------*/

@media all and (min-width: 900px) {

  /*-----------App wrapper-----------*/
  #wrapper {
    padding-left: 5em;
    padding-right: 5em;
  }

  /*-----------App decription-----------*/

  h1 {
    font-size: 60px;
  }

  p {
    font-size: 18px;

  }

  /*-----------Crest, Name-----------*/
  #output {
    max-height: 160px;
  }

  #crest {
    max-height: 160px;
    max-width: 160px;
  }


  h2 {
    font-size: 40px;
    line-height: 160px;
  }

  /*-----------Pie chart container-----------*/
    #pie-container {
      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display:flex;
    }
    #countryPie {
        flex: 1;
    }
    #playerPie {
        flex: 1;
    }
}

感谢您的帮助！

Answer 1

TL;DR：更多地关注 caniuse.com 中的数据，它告诉您浏览器实际在做什么，而不是 W3C 验证器，后者需要属性和在被包括在内之前获得高官方地位的价值观。您经常会发现太新或未开发的属性和值无法包含在验证器中，但仍然受到主要浏览器的支持。

来自CSS 工作组档案：

I just checked my page redseen.3owl.com with the css validator.

I got this error:

Property pointer-events doesn't exist : none

Why is this shown as an error?

Because no CSS specifications currently define the pointer-events property. It is defined in SVG 1.1, but the use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.

The W3C CSS Validator generally checks, in CSS3 mode, against a vague collection of documents, consisting of CSS 2.1 and selected "CSS3 specifications", excluding many that are still at Working Draft level - and pointer-events isn't currently defined even at WD level (or even in an Editor's Draft, as far as I can see).

http://lists.w3.org/Archives/Public/www-validator-css/2012Nov/0033.html

以上摘录自 2012 年。但在 2017 年仍然有效。

来自MDN pointer-events：

[The pointer-events] extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

CSS appearance 属性似乎处于相同的情况 (MDN)。它目前处于编辑草稿状态，因此未包含在 CSS 验证程序中。

旁注

在我开发的所有网站中，验证 HTML 总是比 CSS 更容易。事实上，虽然大多数时候我可以实现完全 HTML 验证，但我认为我从未实现完全 CSS 验证。

这是因为我使用了大多数浏览器都支持的属性，但在标准化过程中并不总是处于验证器阈值状态。

因此，我不使用 CSS 验证器来获取一般信息。我建议您不要让 CSS 验证错误阻止您前进。

更多地关注 caniuse.com 网站以检查浏览器对 CSS 属性的支持。您会发现 pointer-events 属性尽管不在当前的 CSS 规范中，但已经被大多数主流浏览器支持一段时间了。

CSS CSS 验证器无法识别指针事件和外观属性

CSS pointer-events and appearance properties not recognized by CSS Validator

css

w3c

css-validator

旁注