11

我是 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;
    }
}

谢谢你的帮助！

4

1 回答 1

19

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

来自 CSS 工作组档案：

我刚刚使用 CSS 验证器检查了我的页面redseen.3owl.com。

我收到了这个错误：

属性指针事件不存在：无

为什么这显示为错误？

因为目前没有 CSS 规范定义指针事件属性。它在 SVG 1.1 中定义，但在 CSS 中对非 SVG 元素使用指针事件是实验性的。该功能曾经是 CSS3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS4。

W3C CSS 验证器通常在 CSS3 模式下检查模糊的文档集合，包括 CSS 2.1 和选定的“CSS3 规范”，不包括仍处于工作草案级别的许多文档 - 并且指针事件目前尚未定义，即使在WD 级别（据我所知，甚至在编辑草稿中）。

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

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

来自MDNpointer-events：

[ pointer-eventsHTML 元素的 ] 扩展虽然出现在 CSS 基本用户界面模块第 3 级的早期草案中，但已被推到第 4 级。

CSSappearance属性似乎处于相同的情况（MDN）。它目前处于编辑草稿状态，因此不包含在 CSS Validator 中。

旁注

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

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

出于这个原因，我不会将 CSS 验证器用于一般信息之外的任何内容。我建议您不要让 CSS 验证错误阻止您前进。

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

于 2016-12-31T15:25:48.037 回答