CSS3 Background Gradients Not Validating, Can Someone Tell Me Why? Code Example Inside

Question

Can someone tell me why the following css is not validating? I've been trying to research this myself with no luck. All of the documentation I've read says this is the proper why to do gradients in css3.

#header {
  color: white;
  font-size: 12px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  background: black;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  width: 100%;
  height: 35px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  position: fixed;
  top: 0px;
  z-index: 1000;
}

These are the validation errors I'm getting:

W3C CSS Validator results for TextArea (CSS level 3)

Sorry! We found the following errors (6)

URI : TextArea

6 #header Value Error : background-color -moz-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -moz-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )

7 #header Value Error : background-color -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.65 ) ),color-stop(100%,rgba(0,0,0,0 ) ) ) is not a background-color value : -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.65 ) ),color-stop(100%,rgba(0,0,0,0 ) ) )

8 #header Value Error : background-color -webkit-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -webkit-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )

9 #header Value Error : background-color -o-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -o-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )

10 #header Value Error : background-color -ms-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -ms-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )

11 #header Value Error : background-color linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )

Cory Dolphin Cory Dolphin · Accepted Answer · 2011-12-27T18:34:51

This is a duplicate of: CSS background gradient validation

A good explanation is:

“Valid” is a very fluid term in regards to CSS3 in modern web design / development.

If you tried to validate 'this' code in W3C’s CSS3 Validator, it will show a bunch of parsing errors. This is due to the nature of CSS3 implementation at the moment, and mainly because of the vendor prefixes required to create CSS3 gradients.

Now on the flip side, we have used correct and “valid” syntax according to the browser vendors for these gradients. The fact that W3C has yet to finalize the CSS3 specifications means until then we will not have a concrete answer as to what is valid or invalid when it comes to CSS3. All we can do right now is follow progressive enhancement techniques, and pay attention to the browser vendors for direction and proper implementation of CSS3.

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/comment-page-1/#comment-243334

CSS3 Background Gradients Not Validating, Can Someone Tell Me Why? Code Example Inside

3 Answers