Favelets

The type of favelet I discuss on this page is a particular brand: these just dynamically write a link element into the head of the document. The link points to a style sheet. This allows for "diagnosis" favelets that are easy to update or change (you just edit the style sheet).

Favelet Creator

Input the URL of the style sheet you want to use in your favelet, and the name of the favelet as you want it to appear in your toolbar. The "Favelet" link should automatically update to use those values; you then simply drag it into your favorites toolbar.

URL:
Name:
Favelet:	favelet_name (drag into your toolbar once you've set the values above)

Sample Style Sheets

Copy any or all of the following to your Web server or hard drive, depending on your preference, and use them as you will. The creator (above) will help you create favelets that point to your local copies. Do not point to the copies on meyerweb! That would defeat the whole point, which is to have local copies that you can change. If I start to see these style sheets appear in my server logs, I will take... steps.

tableshow

Outlines table structure by making table borders solid red, table headers dotted red, and table cells dotted purple. It also throws in some small margins and padding to spread things apart and make the table structure easier to see.

fontpop

Draws attention to any font elements on the page. Trust me, you'll know when it happens. Also selects elements that descend from font elements in case you have one of those pages where a font is wrapped around three paragraphs or something.

style-attr

Draws a dashed red border around any element that has a style attribute. This can help work out which elements are likely to be trouble if you try to style them from a style sheet.

no-alt

Adds a green "border" (actually padding and a background) and a red border to any image that has no alt attribute. A validator will tell you the same thing, but this is visual.

aggregate

A style sheet that imports all the other ones listed here. This allows easy diagnosis of page problems all at once.

For more excellent favelets/bookmarklets, please see favelets.com and Jesse's Bookmarklets.