CSS Validator 无法识别 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 规范中，但已经被大多数主流浏览器支持一段时间了。