有人可以解释这些错误和警告的含义以及如何修复它以便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;
}
}
谢谢你的帮助！
解决方法
来自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年仍然有效.
[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规范)已经被大多数主流浏览器支持了一段时间.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。