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:
|
1 2 3 |
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"); |
Then go to http://ted.mielczarek.org/code/mozilla/bookmarklet.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:
https://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-page-tasks