As a web coder, part of my work flow is to validate the HTML and CSS code on my pages. In the past I have used the “Web Developer Toolbar” plugin for Firefox. The plugin is a great tool with a lot of good features, but it always bothered me that I had to click so many times to do both validations. I’d click the menu, move down and click the “validate CSS,” which would open a new window and take me off the page I was validating. So I’d click back to the page and click the tool menu again, and then click the “validate HTML” item. Why can’t I just do one click and get both validators running?
Finally I had some spare time, so I whipped up a simple bookmarklet for validating CSS and HTML. You can too; it is very easy.
First copy the following code to your clipboard:
var loc = document.location;
var css = window.open("http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=" + loc, "css");
var html = window.open("http://validator.w3.org/check?verbose=1&uri=" + loc, "html");
Paste the copied code into the form, give the bookmarklet a name, and click the “Crunch” button. Then go to the output form, and drag the generated link to your bookmark bar—you are done. The next time you need to validate a page simply view the page, and then click the bookmarklet.
This is what the bookmarklet generator looks like after clicking the “Crunch” button.
Here are some links about bookmarkets: