//Monday, 17 December 2007

Toolset (Part 2) - HTML and CSS

W3C Markup Validation Service
Visual Studio will validate your HTML but this won't tell you if your final page is compliant with W3C Standards since server controls may output invalid HTML or you may write out HTML in your code behind.

http://validator.w3.org/

I usually use the Validate by Direct Input tab because often your site won't be publicly accessible during development. I just View Source and copy and paste the HTML in manually.

Having valid (X)HTML is not necessarily a requirement for intranet sites/applications because often a particular platform is being targeted. Internet Explorer (certainly pre v7) tends to be quite forgiving of errors in your markup. However all public websites should be valid to ensure they are accessible to as many users as possible.

Internet Explorer Developer Toolbar
This is a toolbar addin for Internet Explorer that helps you to diagnose HTML/CSS problems. Particularly useful is the function that allows you to select HTML elements on the page. This is good for analyzing layout problems to identify which element is giving you problems. You can also edit the CSS of elements on the fly to allow you to try out attributes like widths and heights which can be a lot quicker than going through lots of cycles of editing the code, refreshing the page, etc.

Internet Explorer Developer Toolbar

Firebug
This is an add-in for Firefox that does basically the same thing as the above add-in for Internet Explorer. Additionally, you can use it to debug Javascript.

Firebug

In combination these two add-ins usually allow me to diagnose my browser-specific CSS or Javascript issues.

No comments:

SyntaxHighlighter