21 July 2005

Every web-developer has these moments when the exact values for a CSS property slip away in the nooks of the brain. Instead of wading through some hefty reference book or Googling it, you can now instantly consult the SeeSS Widget for a quick reference on all CSS1 & CSS2 (and some CSS3) properties with their values, examples, descriptions and other valuable info...

Using the SeeSS Widget

Using the SeeSS Widget is very straighforward and intuitive.
Scroll through the list of properties with either the scrollbutton, or your mousewheel. You can also click in the scrollbar itself to quickly move up or down the list. Drag the stretch-handle in the lower-right corner to resize the widget vertically. The smallest possible size is limited to eight properties visible.
Use the pulldown menus to constrain the visible properties to certain sets. The leftmost menu allows you to constrain the property list to categories like "Font & Text", "Background", "Page Layout", etcetera. You can also constrain to "Shorthand Properties" only (they are shown in boldface in the list). Use the righthand menu to constrain the properties alphabetically. Both menus do not work interactively. For example, you cannot use the "View by Category" menu to show only items starting with a "P", as chosen in the "A...Z" menu.

Click on the "SeeSS" title (upper-left corner) to collapse the widget. Click again to expand the widget to its full size (of the previous state).

Initially the collapsed state will show a "pulsing" widget. This can be switched off in the preferences panel. The widget can only be collapsed when you are in "list-mode" (the front panel, as shown above).

Clicking on any of the properties in the list will bring up the Info Panel, as shown below.



This panel gives you all the information about a particular property, including one or more examples, and some concise information. The widget automatically stretches vertically to give room for all the texts (read: do not put the widget too low on the Dashboard layer).

Click anywhere in the panel, or use the pulldown menus to go back to the list-mode.

Click on the property title to (at the top, in bold face) to open up that specific W3.org webpage in your browser (actually, this goes first to an intermediary page on the guyd2.com server, from where you can further navigate to the W3.org pages. This is due to a bug in the Dashboard Widget implementation which prevents going to named-anchor pages).

Note: The info panel does not allow for widget-collapsing, nor invoking the preferences panel.

When you mouse over the front panel of the widget, a small "i" icon will appear in its lower-left corner. Click on this icon to flip the widget over to its preferences side.



The prerences allow you to switch off the pulsing animation of the collapsed state, in case you would find that annoying. As noted, this pulsing animation consumes appr. 0.9% of CPU power, but only when the widget (in its collapsed state) is visible. The animation does not consume any power when the widget sits in the Dasboard layer, and the Dashboard is inactive (invisible).

Click on the copyright notice to go to the guyd2.com/widgets website (where you can check for updates, for instance).

Using the SeeSS Widget outside of the Dashboard Layer

The SeeSS widget might be more useful (as a reference) when it would be accessible all the time, without activating the Dashboard.
In order to do be able to do this, you must first tell the Dashboard that you want to use widgets in the Finder, outside of its own layer. The quickest way to enable "devmode" for Dashboard, is through a simple command in Terminal.

Open Terminal.app (inside the Utilities folder in the Applications folder), and type the following at the prompt:

defaults write com.apple.dashboard devmode YES
killall Dock

[ top ]