CodeinWP CodeinWP

How to Validate CSS3

How to Validate CSS3The other day someone on another post asked a question about validating your stylesheets. This person is concerned with the fact that the validator views vendor prefixes as errors.

Here are my thoughts on this subject, with some tips on using the CSS validator, if you decide that you’re still concerned about validation to some degree.

Validation is Just a Guide

This is the most important point here. You should not view validation (even markup validation) as the holy grail of good code. The validator should just be a useful guide that helps you correct any actual errors that you’ve missed.

I rarely validate my stylesheets. I will validate markup when a project is finished, but I’ll almost never validate my stylesheets. I know that CSS hacks and vendor prefixes will cause all sorts of errors and warnings to be spit out, so for that reason, I rarely bother with it.

If my CSS does what I want it to, then to me it’s valid. But occasionally I will check large stylesheets for actual errors. It’s just not something I do as habitually as markup validation.

Use the Validator’s Options

Of course, if you must validate your CSS (because you want to show your client or you have a boss who doesn’t understand that validation is of minimal importance), then you have some ways to get around some of the errors produced by the validator.

Many people don’t seem to realize this but both the HTML and CSS validators on W3C have a “more options” section that can be opened to allow you to tell the validator how to handle certain aspects of your code:

More Options on CSS Validator

When you open this section of options, here’s what you see:

More Options Visible

So using these options you can do three things:

  1. Change the “Profile” to “CSS Level 3”
  2. Change the “Warnings” to “No warnings” or “Most important”
  3. Change the “Vendor extensions” to “Warnings”

Because of those last two options, you’ll see zero warnings or errors for vendor prefixed CSS — because you’ve told the validator not to list any warnings.

As an example, this site shows 100+ errors and about 100 warnings using the default validation options (see what I mean about validation?), but only about 50 errors and zero warnings using custom options.

It’s Still Problematic

Unfortunately, because the validator still doesn’t recognize many CSS3 properties even without the vendor prefixes, you’ll still get many errors (like my site does). And it will never accept hacks as valid, so those too will show up as errors.

I believe if you were to leave out the standard properties that don’t work without prefixes (like transitions, for example), then you could minimize the number of errors even more. But I don’t think that’s good practice, because when those properties do become standards, you’ll want those in there.

Link Directly to the CSS3 Validator

Finally, if you need to do the cheesy “this page is valid” thing using a W3C badge, you can link to the CSS3 validator directly with a URL, like this:

<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">Valid CSS</a>

So the live link would be something like this. Also, as shown with a couple of the links I used above, you can add options to the URL, to ensure the links are minimal. Just choose the options you want, then copy and paste the URL as is.

Conclusion: It’s Just a Means, Not an End

Validation is highly overrated, and many experienced developers understand this. If your boss or client is demanding the green screen for both HTML and CSS validation, then you need to kindly point them to this or other articles that clearly show that validation is not necessarily the desired end result.

If your code works, and is as cross-browser compatible as you desire, then your page is “valid”. Use the validator to track real errors that you might have missed, and don’t expect validation to solve all your development problems.

43 Responses

  1. I almost never validate anything I build lately, be it HTML or CSS – as against to the past. Back then I also considered validation and a 100% valid code as the holy grail, but as you state rightly, as long as everything looks and acts the way I want – and especially in every browser – the code mustn’t be too bad. But maybe I will use this post as an opportunity to at least validate my HTML in the future.

  2. Great article. And like you mentioned, I just validate my style sheets to figure out general errors if any.

  3. Kevin Mist says:

    There is something satisfying about seeing your code “Validated” though.. I will ignore the stylesheet validation but I still love to get that pat on the back for getting the HTML right. I am a bit OCD so for me I get an even bigger kick out of getting validation on a “strict” XHTML than I do “transitional”… I know I am a bit strange but.. it takes all types I suppose.

  4. I once had a boss (supposedly the “webmaster”) who would never allow anything to go live unless it 100% validated. No amount of explanation about vendor prefixes and the like would sway him. In the end, I resorted to letting him check with a validator and then updating it later. Needless to say I no longer work there.

  5. Brent says:

    Validators are there to make sure you don’t have any errors in your code, just because your code looks right in a browser doesn’t mean it’s going to look good on all devices and one of the main ways to ensure it will is valid code…

    brent

  6. Hugo says:

    Validators mean absolutely nothing to be honest. Sure if you need them as a tool to check for errors then use them but that’s not their objective, the objective of validators is to validate so in theory if your code doesn’t validate then its wrong BUT since the validators are VERY FAR from being realistic they’re worthless, I should also point out that in order to have a validator actually mean something it has to be built by an entity which has some authority and W3C WANTS to have the authority but in reality browser devs still do whatever the hell they want so people developing websites are always f***ed and have to come up with tons of fixes and vendor prefixes in their CSS in order to have things work. So all in all, people making websites are the only ones doing things right (the good ones anyway) because browser devs keep messing up and W3C is slow has no authority.

  7. Great article, Thanks Again. I just validate my stylesheets to figure out general errors!

  8. Abe says:

    It is i nice article.
    I always do validate both the HTML and CSS.
    I believe that it is a necessary step that should be done.
    It is important to find out if your markup is correct and fulfill the required standards.
    If it is cross-browser compatible or not, looks good or not; is another history.

  9. Chris says:

    This is an interesting article in that it sheds light on one perspective of validation. I’m in college right now studying web design. Currently the class I’m taking insists on valid code using the W3C validator tool. Now, and this is important I believe, is that CSS 3 code such as the border-radius and text-shadow properties do not yet validate. So if I were to follow the example set forth by my school, I may as well disregard using CSS 3

  10. Fredricksw says:

    Thank you so much, I finally validated my css3 and it was valid xD so was my xhtml ;)

  11. Tiffany John says:

    I never use validity before reading this article because I don’t had the idea why it does necessary. I need change the menu day by day so I’ve to change all my pages, it is hard. Is it possible that I make change in one place and all pages menu updated.

  12. AntoxaGray says:

    Never really bothered validating my CSS.

    All works fine.

  13. Henry says:

    This article clears my doubtful mind ..thank you!

  14. M. Ridho says:

    I always never 100% valid, there are some options I do not know why. for example like this:
    Property -moz-border-radius is an unknown vendor extension
    Property -webkit-border-radius is an unknown vendor extension
    Property -moz-border-radius is an unknown vendor extension

    • Follow the instructions in this article and those won’t be flagged as errors, just warnings.

      Also, the reason those aren’t valid is because they’re ‘vendor’ CSS, which is not valid CSS. Kind of like Microsoft’s “filters”, except these are previews of future CSS standards, not IE-only features that will never be standards.

  15. Ollie says:

    Agree 100%. I mean, I still work hard to validate HTML, but for CSS it’s pointless imo and I rarely bother.

    Now if only all clients could be made to see the light :) I’ll be sure to link this page the next time someone wants me to validate my CSS.

  16. cgvector says:

    When i use this css3 Validator shows 5 error i don’t no what error in this code could you please explain.
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #98c4e2), color-stop(0.90, #ddecf6) );

    • It’s the old webkit gradient code. And also, it uses a vendor prefix in the value, which maybe isn’t allowed when validating,

      Also, don’t worry about validation. It means almost nothing. If your code works, that’s all that matters.

  17. martin yan says:

    during development, I am not important in this matter, just display the same on the web browser is ok

  18. Hi, can anyone help me with my website pronájem fotoateliéru v Praze (there is W3C CSS check icon). Problem is with a linear gradient for IE. Firefox and Chrome is ok, but CSS style for IE is not valid:

    
    background: linear-gradient(top,  #004799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004799', endColorstr='#7db9e8',GradientType=0 );
    

    Exists some valid solution for IE without using background image?

    • First, I would recommend you use an HTML5 doctype instead of XHTML. It won’t make a huge difference, but you’ll save in code, and it will be easier to validate when you add stuff.

      Second, that IE gradient is non-standard. It’s not recognized by the W3C as a valid way to create a gradient. That’s why it doesn’t validate.

      Third, validation is not important. What’s important is that the website looks and functions the way you want. Don’t worry if you have a few errors or warnings in the validators. Those are usually pretty meaningless.

      • Thank you for the quick reply.
        Yes, I think that in this case the CSS validation will be ignored.
        W3C html validator detects that my site is HTML5 – I think it’s alright

  19. alice says:

    Thanks for this article. I am the dreaded “client” in this scenario, and we are having some issues with our new website. It is a WordPress site. We’re at a point now where stuff is breaking, or stuff can’t be fixed, and our designer is saying it’s out of his hands. We are having some communication problems, so I’ve been researching stuff on my own.

    WordPress recommended the CSS validation, which i ran, and it returned about 1000 errors (our site is small too).

    I found this article because I wanted to see if “CSS validation” even meant anything. Mixed results!

    I’ve reset the validation options to reflect the ones you listed, and our site is still coming back with 1000 errors.

    Could some of these be evidence of a LEGITIMATE problem with the coding on our site? I’m looking for help because, as I said, our developer is not assisting us with this too much, because he believes it’s our problem now.

  20. Millstream says:

    For most sites, you are probably right. If you work for the government or a like agency however this could prove to be a very costly decision. The Canadian governement has been taken to court and lost over such short sighted decisions and lost. As someone stated, just because it looks good in the browser you happen to be using means very little. Does it comply with the browsers used by people with accessibility issues? Can people who can’t use a mouse still navigate your menus? Do you have hidden links that let them skip repetive information? As such, are you unknowingly blocking a specific group from accessing essential services.

    There are laws that require certain buildings to have things like access ramps, accessible toilets ect, Accessible websites are the same thing. I think it’s just a good habit to have, once you’re familiar with what is acceptable and what is not, it’s easy to keep abreast of new tags as they come out.

  21. King says:

    Is there any thing that I need to worry about the following errors?

    ::-moz-selection is an unknown vendor extended pseudo-element
    Property -moz-box-shadow is an unknown vendor extension
    Property -webkit-box-shadow is an unknown vendor extension
    Property -moz-box-shadow is an unknown vendor extension
    Property -webkit-box-shadow is an unknown vendor extension

    If so please let me know the probable fix for this.

    • Don’t worry about those. CSS errors (mostly) aren’t really errors. As I mention in the article, you should be able to cause the vendor stuff like “-moz-” to be ignored by the validator. But even if that still doesn’t validate, then don’t worry. As long as your page works as you want it, that’s what’s important.

  22. Bess says:

    I use the Twitter Bootstrap Framework lot and if I had to worry about valid CSS code that would be impossible! Here are the stats from their main page.

    W3C CSS Validator results for http://twitter.github.io/bootstrap/ (CSS level 3)
    Sorry! We found the following errors (807)

  23. vimes says:

    Allot of you commenters seem to think that validators are useless, and brag about not needing them. Sure you can code without them, and sure you code will run…probably. But have you ever heard of WCAG? if not google it. Code running great in chrome might be a nightmare to a blind user needing his browser to read, or do you want to exclude someone without the ability to use a mouse?

    HTML was meant to be a strict language but due to poor developers and coding ethics browsers learned and adapted to interpreting bad code.

    If you instead treat HTML as a strict language, don’t let the chrome (or whatever browser you are using) interpreter be the standard you make your websites by, you exclude more people by doing so then you think. A HTML5 website passing the W3C-validator follows WCAG, and is as such usable not only for us ‘normal’ people, but also for those with debilitates and weird devices.

    Also if you ever make a website for a EU nation or the U.S government you better follow WCAG, or you’ll be told to re-do the website.

  24. What a great and reassuring read! I spend hours trying to get errors and warnings removed from my websites, and my clients but it’s almost impossible these days with all the vendor specific css options. I worry though that SEO suffers if there are too many errors and warnings and how much Google and other search engines put weight on validated code?

  25. kol7sry says:

    I always never 100% valid, there are some options I do not know why. for example like this:
    Property -moz-border-radius is an unknown vendor extension
    Property -webkit-border-radius is an unknown vendor extension
    Property -moz-border-radius is an unknown vendor extension

  26. during development, I am not important in this matter, just display the same on the web browser is ok, so thanks man

  27. alwatan says:

    Is there any thing that I need to worry about the following errors?

    ::-moz-selection is an unknown vendor extended pseudo-element
    Property -moz-box-shadow is an unknown vendor extension
    Property -webkit-box-shadow is an unknown vendor extension

  28. sex girl says:

    Howdy! This post couldn’t be written any better!
    Looking at this post reminds me of my previous roommate!
    He continually kept preaching about this. I am going to send this post to
    him. Fairly certain he will have a great read. I appreciate you for sharing!

  29. 3rbi says:

    Validators are there to make sure you don’t have any errors in your code, just because your code looks right in a browser doesn’t mean it’s going to look good on all devices and one of the main ways to ensure it will is valid code…

  30. almasdar says:

    What a great and reassuring read! I spend hours trying to get errors and warnings removed from my websites, and my clients but it’s almost impossible these days with all the vendor specific css options. I worry though that SEO suffers if there are too many errors and warnings and how much Google and other search engines put weight on validated code?

  31. Payal Dixit says:

    Hey, I have two or three sites. When I validate these site I always get same kind of errors and warnings.
    Can you help me what should I do to remove these errors.
    error is following.

    -webkit-animation is an unknown vendor extension

    1. .ns_nerveSlider .ns_slideContainer Value Error : letter-spacing auto is not a letter-spacing value : auto
    2. 49 .ns_nerveSlider .ns_slideContainer Value Error : word-spacing auto is not a word-spacing value : auto
    3. 233 .ns_nerveSlider .ns_dummyImage div Value Error : background tranparent is not a background-color value :
    4. tranparent url(“icons/dummy.png”) 50% 50% no-
    5. Unrecognized at-rule @-webkit-keyframes
    6. progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) is an unknown vendor extension

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).