Quickstyle

Quickstyle is a Safari extension with which you can change the appearance of any web page by adding your own CSS rules to it. Quickstyle features a convenient “selector helper” that eases the task of constructing an appropriate CSS selector for the rule you want to create, and a built-in stylesheet editor so you can create and edit your rules right on the page.

Quickstyle also has keyboard shortcuts to quickly apply one of two favorite fonts to an element or set of elements, or to change its font size, without even opening the style editor. You can use these abilities of Quickstyle even if you don’t know anything about CSS.

Important note for Rightsizer users!

Quickstyle is the next generation of Rightsizer. If you use Rightsizer, please note that installing Quickstyle will overwrite your copy of Rightsizer. Don’t worry—all your saved sizes and other settings from Rightsizer will carry over to Quickstyle, and you can keep using the same click-and-keystroke actions you’re used to from the older extension.

How to use Quickstyle

The basic steps in using Quickstyle are:

  1. Activate the selector helper by clicking Quickstyle’s toolbar icon. (You can also use the context menu command, “Activate Quickstyle Selector Helper”, or press Command-Option-Y. You can change this keyboard shortcut in the extension manager.)
  2. Move the mouse around the page until the element or set of elements you want to style is highlighted, and then click the mouse or press the space bar to select it. This will open the style editor.
  3. Enter your CSS declarations for the selected element or set, and click Save. (Your declarations will be immediately reflected on the page.)
  4. Close the style editor by pressing Esc or clicking anywhere on the page outside the editor.
Tips and detailed instructions
The selector helper

The selector helper is a tool that automatically constructs an appropriate CSS selector based on what element is under the mouse pointer. After activating it as described above, move the mouse around the page. The element under the mouse will be highlighted with a magenta outline and background. You can see the DOM path of the highlighted element in the status bar (or, if your status bar is hidden, a temporary status bar at the bottom of the page).

Quickstyle's selector helper
The selector helper in action

When you click the mouse button or press the space bar, the currently highlighted element is selected as the basis of the CSS selector to be constructed.

This is how the selector is constructed:

  • If the selected element has a class and no ID, the selector will be the element’s tag name followed by a period and the class name.
  • (Example: DIV.story)

  • If the selected element has an ID and no class, the selector will be the element’s tag name followed by a hash mark and the ID value.
  • (Example: DIV#content)

  • If the selected element has both a class and an ID, the selector will use the class name, unless you had pressed the Tab key while the selector helper was active—in which case it will use the ID.
  • If the selected element has neither a class nor an ID, Quickstyle will go up the chain of its ancestors—starting from the parent element—until it finds the first one that has a class or an ID. It will then construct a compound selector, starting with the ancestor that has the class or ID and chaining the descendants down to the selected element, using “>” as the concatenator.
  • (Example: DIV.story > UL > LI)

The constructed selector is then automatically entered in the selector bar of the style editor.

Interacting with the selector helper

There are a number of things you can do while the selector helper is active (that is, before you select an element). The table below describes them.

You can do this:By doing this:
Broaden the current selection Press the left or up arrow key
Narrow the current selection (after broadening it) Press the right or down arrow key
Switch the selector priority between ID and class Press Tab
Immediately increase the font size of the selection Press A or =
Immediately decrease the font size of the selection Press Z or
Immediately apply your “Favorite font 1” to the selection (You can set this in Safari’s extension manager.) Press F or 1
Immediately apply your “Favorite font 2” to the selection (You can set this in Safari’s extension manager.) Press G or 2
Immediately hide the selection (great for ads) Press D
Make any of the above style changes temporary (not persistent) Hold down Shift while pressing one of the above keys
Immediately restore the default styling of the selection Press R, Q, or 0 (zero)
Show the DOM path of the selection in an alert box (so you can copy it) Press C
Open the style editor with the selector for the current selection Click the mouse or press space or Enter
Exit the selector helper without opening the style editor Press Esc
The style editor

The style editor appears when you click the mouse or press the space bar after activating the selector helper. (You can also open the style editor without activating the selector helper by right-clicking the page and selecting the appropriate context menu command.)

Quickstyle's selector helper
The style editor

The style editor has three main components:

The selector menu  (on the left)
This lists the selectors for all the rules you have defined for the current site. To select a rule, click its selector here.
The selector bar  (at top right)
This shows the currently selected rule’s selector. You can edit the selector here.
The declaration box  (below the selector bar)
This is where you edit the declarations for the currently selected rule.

In addition, there are Save and Revert buttons at the bottom right. Any edits you make to a selector or declarations are not saved until you click Save.

Interacting with the style editor

The table below lists the things you can do in the style editor that are not immediately obvious.

You can do this:By doing this:
Preview the effect of the current rule on the page Hold down the Option key.
Highlight elements on the page that match the current selector Move the mouse over the selector bar (but not while editing it)
Highlight elements on the page that match another selector in the menu Move the mouse over the other selector in the menu
Tell whether a rule has been saved Deselect the rule in the selector menu; unsaved rules are shown in red
Undo unsaved changes to a rule Click the Revert button
Quickly save the current rule Press ⌘-Enter while in the declaration box
Create a new rule Type a new selector in the selector bar and press ⌘-Enter
Delete a rule (or several rules) Select the rule(s) to delete in the selector menu (shift-click for a contiguous selection or Command-click for a non-contiguous one) and press Delete
Move a rule up or down (to change its precedence) Select it in the menu and press ⌘-Up or ⌘-Down
Move between the different parts of the style editor Press Tab
Reposition the style editor relative to the underlying page Click and (slowly) drag the gray border
Resize the style editor Click and (slowly) drag the resize handle in the bottom right corner
Adjust the split between the selector menu and the declaration box Click and drag the border between them
Exit the style editor Press Esc twice or click on the page outside the editor
Shortcuts and miscellaneous things

Quickstyle has another mode of operation that does not involve either the selector helper or the style editor: You can use “click-and-keypress” shortcuts to quickly change the appearance of an element or set of elements. (Users of my older Rightsizer extension will be familiar with this feature.)

Using this mode, you can change an element’s font size or apply one of your favorite fonts (as specified in the extension manager) to it with just a click and a keypress.

Here’s how to use the click-and-keypress shortcuts:

  1. Click a representative sample of the text you want to change and hold down the mouse button. Don’t let it go yet.
  2. Press the key corresponding to the action you want to perform.
  3. Release the mouse button.

The table below lists the keys you can press while the mouse button is down, and what they do. (Note that some actions can be triggered by more than one key.)

Key(s) Action
A, +, = Increase the font size
Z, - Decrease the font size
F, 1, \ Apply Favorite font 1
G, 2, / Apply Favorite font 2
R, Q, 0 (zero)
Restore the default font and size

In addition, there are three special keys that modify the behavior of the actions keys in various ways, and they are explained in the table below. These keys are pressed before any of the action keys.

Key Effect
W Changes will be applied to the whole document.
X Changes will be applied only to the clicked element—not to all similar elements.
T Changes will not be saved. (Applies only if autosaving is enabled.)

For some tips specific to the click-and-keypress mode of operation, please refer to the Rightsizer page.

One more note: Any style changes you make using click-and-keypress shortcuts can be viewed and edited in the style editor, just like other rules you create.

Warning

If you use the Safari command “Remove All Website Data”, either from the Privacy tab of Safari preferences or from the Reset Safari dialog box, all of your Quickstyle data will be deleted. If you don’t want that to happen, before using the aforementioned command, make sure to back up the file safari-extension_com.canisbos.rightsizer-zanvztser6_0.localstorage located in the folder ~/Library/Safari/LocalStorage. After removing all website data, copy the file back to the folder and restart Safari.

FAQ

These are not really Frequently Asked Questions, but they might be someday.

Right after I open the style editor, moving the mouse over the selector menu or selector bar does not highlight matching elements on the page. What’s going on?
It’s a bug I haven’t been able to run to ground. To get the mouseover highlighting feature to work, first click anywhere inside the style editor (except for its gray border).
I made a new rule, but it doesn’t seem to have any effect on the page. Why not?
Probably your rule is being superceded by a higher-precedence rule defined in the site’s own stylesheet or the page source. You may be able to give your rule higher precedence (and thus make it effective) by adding the !important tag at the end of each declaration (just before the semicolon).
What do the strings /*fff*/, /*ffs*/, and /*ffh*/ at the end of a declaration mean?
Quickstyle uses these markers to indicate to itself that a declaration was added as a result of applying a favorite font family, font size, and line height to the selector. If you change the favorite font setting, Quickstyle will be able to change these declarations accordingly, thanks to the markers. (If you remove these markers, Quickstyle will not be able to tell whether a font family, size, or line height declaration was added as a result of applying a favorite font, or was added manually by you.)

2012 Canisbos Computing
Creative Commons License

반응