...

View Full Version : Validating CSS3



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!

SB65
10-23-2011, 08:04 AM
You can't get the browser specific stuff to validate because by its very nature it isn't CSS3 - so you've either got to not use it at all and have valid CSS, or use it and accept that your CSS won't validate.

MrBiggZ
10-23-2011, 07:31 PM
You can't get the browser specific stuff to validate because by its very nature it isn't CSS3 - so you've either got to not use it at all and have valid CSS, or use it and accept that your CSS won't validate.

That's what I was figuring too. It might be my curse of common sense but isn't this why we have standards? So there isn't 4,5 command to do the same thing?! Good grief!

I shall keep scouring the interwebs in search of maybe some idea of how to cheat the system! Bah! :eek:

Thank you!

MrBiggZ
10-30-2011, 07:08 AM
So basically it's up to me whether or not I want the code to 100% validate, correct?

What a conundrum this one is. I like the all the stylizing CSS3 can do but no browsers even recognize w3c gradients. Firefox just blows it off.

What does one do? I mean .. no black vans are going to pull up in front my house to come and get me if my code doesn't validate because of browser specific code.

Thanks!

VIPStephan
10-30-2011, 10:03 AM
That's what I was figuring too. It might be my curse of common sense but isn't this why we have standards? So there isn't 4,5 command to do the same thing?!

MrBiggz, CSS 3 is not an official standard yet, so there is 1) no reason to validate it and 2) no way to have it “valid” (according to latest state of development) and supported in all browsers. These proprietary prefixes like -moz- and -webkit- are there so that browser creators can test the functionality in a temporary implementation (you can see how Webkit and Mozilla have different ways of writing gradients – this is not standardized yet and they will have to agree on a standard syntax first). They are not intended for production environments, and hence, they are not intended to validate. That people use them anyway is at their own risk and discretion. If you want valid code then use the latest standards which are HTML 4.01/XHTML 1.0 (or 1.1 if you dare) and CSS 2.1.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum