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

Question

I'm new in CSS and just built an app. The problem is, when validating CSS I get the following errors and warnings:

Can somebody please explain what these errors and warnings mean and how to fix it so that the CSS could be validated?

My app is functioning normally despite those errors.

This is my CSS code:

/*----------------------------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;
    }
}

Thanks for any help!

Answer 1

TL;DR: Focus more on the data in caniuse.com, which tells you what browsers are actually doing, as opposed to W3C validators, which require properties and values to achieve a high official status before being included. You'll often find properties and values that are too new or undeveloped for inclusion in the validators, but are nonetheless supported by major browsers.

---

From CSS Working Group archives:

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

The excerpt above is from 2012. But it is still valid in 2017.

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

The CSS appearance property appears to be in the same situation (MDN). It's currently in Editor's Draft status and, therefore, not included in the CSS Validator.

---

A Side Note

In all sites I've developed it was always easier to validate HTML than CSS. In fact, while most of the time I can achieve full HTML validation, I don't think I've ever achieved full CSS validation.

This is because I use properties that are supported by most browsers, but are not always at validator threshold status in the standardization process.

For this reason, I don't use the CSS validator for anything more than general information. I would suggest you don't let CSS validation errors stop you from moving forward.

Focus more on the caniuse.com website to check browser support for CSS properties. You'll find that the pointer-events property, despite not being in a current CSS spec, has been supported by most major browsers for some time now.