MrBiggZ
10-23-2011, 07:07 AM
Greetings!
Short question! Validating CSS3, is this possible? I see that there an option to do so on the W3 validator(s) and I've done so. But there are all these browser platform variants that make the validation fail.
Take this class for instance:
.rbox { background: rgb(201,201,201); /* Old browsers */
background: -moz-linear-gradient(left, rgba(201,201,201,1) 0%, rgba(121,136,203,1) 40%, rgba(75,84,125,1) 90%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(201,201,201,1)), color-stop(40%,rgba(121,136,203,1)), color-stop(90%,rgba(75,84,125,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(201,201,201,1) 0%,rgba(121,136,203,1) 40%,rgba(75,84,125,1) 90%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(201,201,201,1) 0%,rgba(121,136,203,1) 40%,rgba(75,84,125,1) 90%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(201,201,201,1) 0%,rgba(121,136,203,1) 40%,rgba(75,84,125,1) 90%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#4b547d',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(201,201,201,1) 0%,rgba(121,136,203,1) 40%,rgba(75,84,125,1) 90%); /* W3C */
-webkit-box-shadow: 2px 2px 2px #333333; -moz-box-shadow: 2px 2px 2px #333333; box-shadow: 2px 2px 2px #333333; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
height:210px;
color:#363636;
}
The validator throws up on 90% of the CSS. But it's valid in each of the browsers. Any tips/trick/hints? Should I just set it on fire and walk away? =)
Thanks for any help you can give!
Short question! Validating CSS3, is this possible? I see that there an option to do so on the W3 validator(s) and I've done so. But there are all these browser platform variants that make the validation fail.
Take this class for instance:
.rbox { background: rgb(201,201,201); /* Old browsers */
background: -moz-linear-gradient(left, rgba(201,201,201,1) 0%, rgba(121,136,203,1) 40%, rgba(75,84,125,1) 90%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(201,201,201,1)), color-stop(40%,rgba(121,136,203,1)), color-stop(90%,rgba(75,84,125,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(201,201,201,1) 0%,rgba(121,136,203,1) 40%,rgba(75,84,125,1) 90%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(201,201,201,1) 0%,rgba(121,136,203,1) 40%,rgba(75,84,125,1) 90%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(201,201,201,1) 0%,rgba(121,136,203,1) 40%,rgba(75,84,125,1) 90%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#4b547d',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(201,201,201,1) 0%,rgba(121,136,203,1) 40%,rgba(75,84,125,1) 90%); /* W3C */
-webkit-box-shadow: 2px 2px 2px #333333; -moz-box-shadow: 2px 2px 2px #333333; box-shadow: 2px 2px 2px #333333; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
height:210px;
color:#363636;
}
The validator throws up on 90% of the CSS. But it's valid in each of the browsers. Any tips/trick/hints? Should I just set it on fire and walk away? =)
Thanks for any help you can give!