Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Validating CSS3

  1. #1
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    336
    Thanks
    44
    Thanked 2 Times in 2 Posts

    Validating CSS3

    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:
    Code:
    .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!
    “No matter how slick the demo is in rehearsal, when you do it in front of a live audience, the probability of a flawless presentation is inversely proportional to the number of people watching, raised to the power of the amount of money involved.” ~ Mark Gibbs

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • #3
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    336
    Thanks
    44
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by SB65 View Post
    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!

    Thank you!
    “No matter how slick the demo is in rehearsal, when you do it in front of a live audience, the probability of a flawless presentation is inversely proportional to the number of people watching, raised to the power of the amount of money involved.” ~ Mark Gibbs

  • #4
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    336
    Thanks
    44
    Thanked 2 Times in 2 Posts
    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!
    “No matter how slick the demo is in rehearsal, when you do it in front of a live audience, the probability of a flawless presentation is inversely proportional to the number of people watching, raised to the power of the amount of money involved.” ~ Mark Gibbs

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,726
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Quote Originally Posted by MrBiggZ View Post
    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.

  • Users who have thanked VIPStephan for this post:

    MrBiggZ (10-30-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •