CSS Validator无法识别CSS指针事件和外观属性

前端之家收集整理的这篇文章主要介绍了CSS Validator无法识别CSS指针事件和外观属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是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,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;
    }
}

谢谢你的帮助!

解决方法

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).

07001

上面的摘录是从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外观属性似乎处于相同的情况(MDN).它目前处于Editor’s Draft状态,因此不包含在CSS Validator中.

旁注

在我开发的所有网站中,验证HTML比使用CSS更容易.事实上,虽然大多数时候我可以实现完整的HTML验证,但我认为我没有实现完整的CSS验证.

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

因此,除了一般信息之外,我不会使用CSS验证器.我建议你不要让CSS验证错误阻止你前进.

更多关注caniuse.com网站,以检查浏览器对CSS属性支持.您会发现指针事件属性(尽管不属于当前的CSS规范)已经被大多数主流浏览器支持了一段时间.

原文链接:https://www.f2er.com/css/217497.html

猜你在找的CSS相关文章