when i try to validate my Gradient css via CSS3 W3.org Validator it's shown error
Sorry! We found the following errors (5)
My code is
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
5 Answers
Well Rizwan, First of All the site you are using http://jigsaw.w3.org/css-validator/#validate_by_input is not supporting CSS3 completely.
From: About the CSS Validator
So, this is the authority on what is correct CSS and what isn't?
No. It is a helpful and reliable tool, but a software tool, and like every software, it has some bugs and issues. The actual reference on Cascading Style Sheets are the CSS Specifications.
By default, this validator checks style sheets against the grammar, properties and values defined in the CSS 2.1 specification, but other CSS profiles can be checked against by using the options.
If you look into bugs and issues you will find a bug for: linear-gradient as a background-image, it does not recognize linear-gradient.
-webkit-gradient is browser specific and w3.org validator will not recognize it.
Final advice, don't rely too much on validators, they may help you spotting an error but they are not 100% correct. For CSS3 its better if you test these properties in browser and see if they are working.
Comments
W3 gradient gives you error on -webkit-gradient because its only support by Google chrome w3.org only validate those style that are validated in all browser like font, width, height
1 Comment
CSS Guy
i am not using webkit gradient my code is... background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
What you have is fine. The only reason it is pulling up these errors is because it hasn't been finalised yet and so therefore the validator thinks this doesn't exist. You could either try something from impressivewebse.com where you try different browser support. If you do this, it will work on the website it just won't think it's right in the validator because that command thing hasn't been finalised yet. Hope this helped! Ethan Brouwer
2 Comments
CSS Guy
gradient work fine in all browser but i want to know why w3c Validator showing this error.
Ethan Brouwer
The W3c convention hasn't yet finalised the linear-gradient property. That's why it sees it as pretty much, not a real css property and rather text that it doesn't understand. W3c is just slow.
Listen to what people are telling you; linear-gradient isn't yet part of the CSS3 specification, therefore it is correctly marked as invalid code.
Multiple browsers have implemented their own versions of the tag (moz-, webkit- etc) so they can offer those features early. Once linear-gradient is fully designed and accepted into the CSS3 specification those vendor specific prefixes will go away and linear-gradient will no longer be invalid within the W3C validation tool.
Until then all you can do is provide vendor specific tags, a CSS3 standard tag and an old browser fallback. Also, at your discretion, a friendly chat with your client can go a long way. Try explaining that the bleeding edge code you're using does provide a graceful fallback (it does right?) for users with older browsers.
Comments
It shows an error because -webkit-gradient is not defined by CSS3. It is specific to WebKit based browsers like Chrome.
Try using linear-gradient instead. However, no browsers that I know of support it at this time.
Anything that start with -webkit-, -moz-, -o-, or -ms- is specific to a browser. They do this in order to support a new feature or specification that has not been finalized.
http://www.colorzilla.com/gradient-editor/ is a wonderful tool for creating cross-broswer gradients.
1 Comment
CSS Guy
Same Problem. i have checked this colorzilla code background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ Check this code in w3.org website jigsaw.w3.org/css-validator/#validate_by_input
body{background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);}it says thatlinear-gradientis not abackground-colorvalue...