The Pixy Cascaded Styles Favelet is a very handy tool that allows you to instantly view information about any CSS property in a web page without looking at the code files. Some of my favorite uses for Pixy are viewing font sizes, and padding, margin and container widths.

A 'Favelet' is a little bit of Javascript that is embedded into a normal browser 'bookmark.' All you have to do is bookmark the favelet and you have it! The Pixy Favelet is very easy to obtain and use, and well worth it! Here's how.

Downloading the Pixy Favelet

Navigate your browser to the Pixy Open in a New Window web site. The person who developed this favelet site is Czech so you'll see some interesting text on this page.

Note: Depending on your computer's security software and it's settings, you may see a warning telling you that this is a "Dangerous" site. The security software is reacting appropriately to the fact that this site contains scripts, not necessarily that the content of any given script is worrisome. While I cannot guarantee there are no 'dangerous' scripts anywhere on this site, the chances are slim. I have used this Pixy Favelet for quite some time with no ill effects.

Scroll down the Pixy web page a bit until you see the white Styles and Stylesheets heading. The last item in that category is the List computed (cascaded) styles [NEW] link. Be sure you get the [NEW] rather than the [old] version.

The easiest way to obtain this bookmark is to drag it directly to the Firefox Bookmarks Toolbar (or other-browser toolbar equivalent). To turn on the Bookmarks Toolbar in Firefox, select the menu items View | Toolbars | Bookmarks Toolbar.

Pixy Favelet Firefox Bookmarks Toolbar

Point to the List computed (cascaded) styles [NEW] link and click/drag it to the Bookmarks toolbar. Done!

Alternatively, PC users may right-click on the List computed (cascaded) styles [NEW] link and choose Bookmark This Link... from the popup context menu. This will create a bookmark in the browser's bookmark menu just like bookmarking any web page. From there it can be copied to the Bookmarks Toolbar, if desired.

Pixy Favelet Bookmarking Web Page Link

For a more detailed account of downloading and installing favelets, see the Installing Favelets Open in a New Window page on my personal web site. Among other things, this page discusses how to re-name a favelet.

I have directed you to install the Pixy favelet on the browser's Bookmarks Toolbar only because putting it there provides the most efficient placement for using the tool. It requires only one mouse click. However, you may also use this bookmark favelet from the browser's normal bookmarks menu.

For the purposes of keeping text more streamlined for the remainder of this page, I only mention the Bookmarks Toolbar location.

Using the Pixy Favelet

Pixy Favelet Popup Window View

Pixy Favelet Bookmar on Firefox Bookmarks Toolbar

Once you have the "List computed (cascaded) styles" (a.k.a. "Pixy") favelet on your bookmarks toolbar, navigate to a web page that you wish to examine.

Click the Pixy (List computed (cascaded) styles) bookmark button. A small window opens.

Note: For some reason, the Pixy window opens behind the active browser window in Firefox on a PC. To move it to the front, click the new browser button that has just appeared on the Task Bar at the bottom of the screen to bring the Pixy window to the front.

Move the mouse over the displayed web page contents. The Pixy favelet window will show a series of font-sizes that affect the object over which the mouse is currently positioned. The list reads from top-to-bottom starting with the current element through all of its ancestors. Font-size is Pixy's default property but it can display much more!

At the top of the Pixy popup window is a field which, by default, is set to font-size. You can type any valid CSS property name into this field to obtain the values used in the current web page. Remember, a property is the first half of a rule declaration.

div { padding-top: 25px; }

Note that Pixy returns all measurements in pixels and uses the RGB color values. If you need to know the actual units used in a particular web page, using the Edit CSS Open in a New Window tool will better meet those needs. But because Pixy uses only one unit of measure, it is extremely useful for understanding the size relationships of the various elements.

Each Pixy popup window reports only on the contents of the web page that was open at the time the favelet was launched. To examine a new web page, first use the browser to navigate to the page. Then, again, click the "List computed (cascaded) styles" button on the Bookmarks toolbar to launch a new Pixy window relating to the new web page.

References