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;
}
}
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:
The excerpt above is from 2012. But it is still valid in 2017.
From MDN
pointer-events
: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.