Here is the Thing About Validation

Sample Image

I woke up this morning to a rude email from a reader today. “Jeff,” he said, “I’m sorry, but I have no desire to read your articles when your own site’s CSS doesn’t validate. This only exemplifies the fact that you don’t know the correct way to create a website.”

Mr. Emailer was referring to this:

Validation Snapshot

He probably ran a validation test, saw that it didn’t validate, and then proceeded to slam me without thinking twice. If he had taken a second glance – he would have realized that the only errors come from the fact that I’ve used a few advanced stylings which the validator doesn’t recognize – things like “-moz-border-radius”. For those unaware, this is simply a Firefox-only CSS3 implementation that allows for rounded corners. Even though Internet Explorer will only render it as a square, it’s a sacrifice that I’m happily willing to make.

Other than that, and the use of another advanced pseudo class, there are zero issues with my CSS file.

Here’s the Thing About Validation

My guess is that Mr. Emailer read in a book that he should always ensure that his webpages validate. What he failed to realize was that advanced browser-specific CSS properties won’t pass the test.

The idea of validation has been completely misconstrued by those who don’t understand its purpose. Validation should work for you, not against. In my particular situation, I had two options after validating:

  1. Remove the advanced properties that only make the experience better for users viewing on modern browsers – all for the sake of receiving that tacky icon.
  2. Ignore the validator.

Alas, the latter solution is absolutely the correct one.

Having Said That…

Based on the text above, one might assume that validation is a waste of time. On the contrary, this couldn’t be further from the truth. Always, always validate your websites. Many times, you’ll find that a nasty spacing issue is simply the product of a tiny HTML error. In situations like that, the validator can be your best friend. Just make sure, as I said previously, that it works for you, not against.

P.S. Never ever add those cornball HTML/CSS validated icons to your website. Who are they for?

Comments

  1. Erwin Heiser said...

    These validation nazis are all over the web, I wouldn’t worry about it.

    I usually move all the CSS3 stuff to a separate “enhance.css” stylesheet so it doesn’t mess with validation but what should really happen is that the W3C update their css validator to allow for the more advanced stuff.

    Nice redesign and thanks for all the great tuts you do on Nettuts+ (I’m a +member myself)!

    posted on September 23, 2009

  2. Shane said...

    This is mind blowing. I guess Mr. Emailer should review your Archives. It is quite clear you know what you are doing. In my opinion, you provide the most valuable tutorials regarding web design/development that are online. Keep up the great work Jeffrey!

    posted on September 23, 2009

  3. Jayman Pandya said...

    This was funny… But I do not completely blame Mr. Emailer as he must be some newbie who was over-smart but your gesture of writing a post over it and enlightening him was very helpful.

    I too am a +member and follow your tutorials regularly and by using advanced CSS selectors in your blog design you have encouraged me also to do the same with my designs…

    Keep up the amazing work of helping the design community…

    posted on September 23, 2009

  4. David Ferguson said...

    Accusations of JW *not* being the Grand Master of web development? Preposterous! Ok maybe Grand Master was a bit excessive but your really close :) Mr emailer sounds like a bit of a fool. “I have no desire to learn from one of the best because this validator sucks”. Haha. His loss. I’ve learned many many things from you sir and will continue to do so as long as you will pass your wisdom down. Much appreciated, please continue.

    posted on September 24, 2009

  5. admin said...

    Thanks, David…but I’m not even close to “grand master.” Not – even – close. :)

    posted on September 24, 2009

  6. Juan C Rois said...

    Jeff, You are a humble person, and that is a sign of grandeur. You might not be the best in the world, but for all intents and purposes you are to me, because you are not like most designers/developers that won’t share a single line of code, forgetting that at some point they were beginners like me. I’ve learned more from you in just a couple months that I’ve been a member of Nettuts, than in 5 years that I’ve been struggling to find decent tutorials online.
    Thank you very much.

    posted on September 24, 2009

  7. Karl said...

    I think you hit it on the head with: “Validation should work for you, not against.”

    The validator is a tool, and it appears Mr Emailer did not recognise the fact that all tools have a specific purpose. In this case, I see the purpose of the validator as validating the code against W3C guidelines. It is not the sole arbiter of whether a page functions/displays as the author intended, whether the page communicates the information contained to the target audience, or whether it is ‘broken’.

    We use the validator to check against HTML/XHTML, and whether we missed tags or allowed other typos to creep in to our code. It is the first step when pages don’t display as intended in a browser, as it finds mismatched or missing tags way faster than we can manually!

    posted on September 24, 2009

  8. Michal Kopanski said...

    Haha! That’s so funny! Do people really do that? I can’t help but wonder if THEIR website validates. I think not. Who’s with me?!

    posted on September 24, 2009

  9. Bretticus said...

    Hey Jeff,

    I just want to say that I absolutely love your tutorials! Thank you so much. I know that you are building your name and driving traffic to your websites, but these tutorials are some of the best out there: Concise, complete, and informative. I learned jquery solely from watching just a few of your tuts. Even though I am primarily coding (and leaving the design to more talented folks at my company) I have learned better design though css which has been very helpful since (since way back in my “design phase” everyone was still using cut-up tables out of fireworks.)

    That someone could give you a hard time for insignificant validation issues where you are teaching design to people who have barely even heard of CSS, proves that he is not only ignorant but an ingrate!

    Thanks again. Looking forward to your next Tut.

    posted on September 24, 2009

  10. admin said...

    @Bretticus – Thanks! I really appreciate that. This posting was less about the emailer – probably just a kid. :) – and more a reason to write about something that often confuses people.

    posted on September 24, 2009

  11. Brett said...

    I found that validation is a good goal to strive for, yet it is not the end of the world if your site is 100% valid. Like you mentioned, you were using code for modern browsers, which caused the validation error. It seems that the validation standards are not as up to date as modern web development practices so if we limit ourselves to stay within outdated standards, we will never make any progress. I also found out that most clients dont give **** about if there site is valid or has 8 errors. It’s only us web people who actually care, probably some sense of pride that our code is up to par with these set standards. Overall, standards seem like a good guideline to try and follow and should not be considered as rules which are set in stone.

    posted on September 25, 2009

  12. Jason said...

    I have always found your tutorials and screencasts very informative, and I hope that this “Mr. Emailer” comes back to read this post to learn a bit more about this topic. With the current (and slow) transition to CSS3 it is impossible to have a truly valid stylesheet while pushing towards the new techniques. Simple issues such as which validation scheme is used can cause issues as well. The W3 validator defaults to CSS2.1, and you have to go on a small hunt to validate a stylesheet against CSS3 standards. My site’s stylesheet generates several errors due to some browser specific styles used for some modern browsers which haven’t yet implemented the full spec properties.

    I’d relate validation to traffic laws in the U.S. – you have to know which laws are hard set, and which are seen as lenient. A red light means you stop… I should hope that most people will follow this(but there are those who don’t – just like issues with web standards) – on the web, don’t place a block element as the child of an inline element, technically you can…. but for the sake of the web… don’t. Then there are the more flexible ones – say speed limits, most traffic officers wont pull you over for speeding by a few MPH, as long as you’re not stupid about it. Likewise, go ahead and use new properties for those that are up to date(and for your audience Jeff, I’d expect most are using up-to-date browsers) we as developers just have to be careful we don’t end up breaking the site for other users(i.e. if you’re going 100MPH in a 30MPH zone, don’t be surprised if you get pulled over)

    Sorry for the ramble there…
    Keep up the great work Jeff

    posted on September 25, 2009

  13. Keith Clark said...

    I wish they would fix the validator to allow ‘-’ prefixed properties. ‘-moz’, ‘-o’, ‘-ms’ are all legitimate style prefixes as defined in CSS 2.1 (4.1.2.1 Vendor-specific extensions)

    http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

    posted on September 29, 2009

  14. Pedro Magalhães said...

    Hello Jeffrey Way, very nice to meet you! I found this blog today and started to read this post first, and just want to say that i think the same way. I use advanced features of CSS3 (who doesn’t?) and i do not bother with validator no more. If it is to correct any bugs that i have, like ;; }} or something like this, it should be good. Otherwise, it’s a waste of time just to have the icons on the webpage… Stay well

    posted on September 29, 2009

  15. leksa said...

    Some people, err.. maybe we can call them -some webdesigner, always proud for them self IF pass the validation, in all way. Means, even in advance technique, they found the solution to solve cross browser problem, and its valid. Its like said, “Hey, i can do this, The hardest part of css stuff. Could you do this too?” Lots of programmer and web designer, get some “ecstasy” with that achivement.

    But, for me, prefer to satisfied the client, visitor and the server. :D

    posted on September 29, 2009

  16. GaVrA said...

    Validator is just an awesome tool. I like it mostly because it helps me learn about web standards, like i really didnt know that every img tag has to have alt applied to it. :)

    posted on September 30, 2009

  17. Marius said...

    You do have an error in your css. Search for ” color: ##0E0E0E; ” in your style.css :)

    Other than that, I agree with you entirely. The validators from w3c are great tools, but you have to make a distinction between errors in your code and advanced properies and pseudo-classes that do not validate.
    I hope that Mr.Emailer reads this post and enlightens himself.

    posted on October 1, 2009

  18. vats thakur said...

    Yes right! Validators don’t show all latest css property correctly.

    posted on October 31, 2009

  19. Paul Chater said...

    Personally, I don’t give two craps about validation. If I code something up and it works, then it works. Most of the time it validates; sometimes it doesn’t when I add all my CSS3 properties but that’s not my problem. Why must it be an offence to other people not using them because they don’t know how to? If the special tags wern’t supposed to be use why would W3C release whitepapers on how to use them and also create special validation options for them?

    God I hate silly Validation nazi’s. ^.^

    posted on November 1, 2009

  20. ev149 said...

    Partly agreeing with Paul here, if I close a tag twice or inconsistently capitalize tags, as long as the end user sees what I want them to see, then that’s fine. However, I do use the Validator to find errors in my code causing problems when viewing the page, even if it’s in a deprecated browser like IE6, or even IE1, because somebody, somewhere, might just be using that browser on my site. Anyway, keep up the great work and keep those posts coming, they’re extremely informative and useful!

    posted on November 2, 2009

  21. Parker said...

    I don’t think `moz` or `webkit` extensions should be valid, it’s not proper CSS, it’s only a hack.
    I personally think that you user who mailed you was correct, it’s not valid CSS, as for his comments about reading your articles BECAUSE of your methods of coding then no don’t agree with the user.

    If it was a global then yeah but since it’s a browser specific hack then it shouldn’t be counted in my opinion.

    posted on November 18, 2009

  22. admin said...

    Parker – Of course they shouldn’t be valid. That’s not the point. There’s absolutely nothing wrong with using those stylings. That’s my point. :)

    posted on November 18, 2009

  23. David said...

    Hmm, those are not actually errors… I guess he was a student who just started learning CSS. I agree with Erwin Heiser.

    posted on December 23, 2009

  24. Evolua seu CSS - Dicas | import Zeh.Design said...

    [...] é tão importante assim. É melhor focar em um código semântico e otimizado para o usuário. Um interesssante relato foi escrito por Jeffrey Way, admistrador do site [...]

    posted on December 30, 2009

  25. Nathan said...

    My website is the same way, but am I going to restrict myself to css 2.1? Hell no.

    posted on February 25, 2010

Leave a Reply