Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Why would you want to validated html or css, is this something that is commonly done?

Wouldn't you know its not html or css because its simply not working? Also what are the reasons someone would need to use a service that checks there website on different browsers and devices? doesn't (normalize.css)work out browser compatibility issues?

2 Answers

Code validation can effect SEO (Search Engine Optimization).

Google doesn't directly rank websites or care if your code is W3C valid.. BUT having W3C valid code on your website makes it easier for Google Spiders to understand your pages content, which may in-directly effect your rankings.

It is good to cross browser test your website, especially when using newer CSS3, as quite a lot is not backwards compatible with older browsers, for example "flex-box": http://caniuse.com/#search=flex-box .

As you can see it has very limited compatibility with older browsers and also requires prefixing in many newer versions to work.

Normalize.css is not going to fix these cross browser issues, Normalize CSS is very basic in what it does actually do. Really all it does is pre-set defaults for browsers so you do not need to worry about browser default values effecting the way your website is viewed.

For example the browser default font-size of 16px may not be the same across every user you have browsing your website, this is a setting that can be changed in many browsers, so for example if you were to use font-size: 1em; in most browsers this would equal 16px, but in many it could be a completely different size. This is one of the values that is set in the normalize.css file to avoid default browser settings causing issues in the design of your website.

I personally do not use normalize.css, I find it bloated and a waste of space in my css file.

By having a good understanding of cross browser defaults you can pre-set defaults yourself at the beggining of your CSS to avoid bloating your CSS files with presets you may not even be using.

For example what would be the point in normalize setting figcaption { display:block; } if I am not even using figcaption symantic element in my layout.

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It also helps correct some common bugs. You still want to check and make sure that your tags and css and also versions will work correctly on multiple browsers and multiple different versions of those devices. You wouldn't want to not check, host your page and then some people using an old browser have it viewed all weird.

You should validate your code to make sure it is up to standard and there are no potential problems that could occur that you didn't spot at first glance.