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).
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.
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.
- 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.
- Draws attention to any
fontelements on the page. Trust me, you'll know when it happens. Also selects elements that descend from
fontelements in case you have one of those pages where a
fontis wrapped around three paragraphs or something.
- Draws a dashed red border around any element that has a
styleattribute. This can help work out which elements are likely to be trouble if you try to style them from a style sheet.
- Adds a green "border" (actually padding and a background) and a red border to any image that has no
altattribute. A validator will tell you the same thing, but this is visual.
- 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.