Style Adjuster Test Page

Philip Dorrell, 22 August, 2013
Run Style Adjuster on this page:

What is Style Adjuster?

Style Adjuster is a utility for "adjusting" CSS style definitions, and seeing your adjustments immediately in the web page. The underlying Javascript framework allows for easy definition of HTML-based editors to edit different types of CSS values.

Style Adjuster is intended for those situations where you know that you want to define a particular CSS property for your web page (or web application), so you've written a property and value into a CSS rule, but you had to guess the property value, because until you see the result in the web page you don't know which value looks best.

What Style Adjuster does is let you make continuous changes to a CSS property value and see the changing results in real time.

What would have been a process of "Shall I try 0.4em?", "Not quite right, a bit small, maybe 0.7em.", "Now it's too big, I'll try 0.6em", "No, still too big, better try 0.5em", "That looks OK", is replaced by sliding a slider left and right until you get to the value that looks best on the page, i.e. 0.5em.

Style Adjuster is good for anything that is a dimension, and it's also good for colors.

Source Code

For some code, see the GitHub repository at github.com/pdorrell/style-adjuster.

Chrome Browser Extension

To install Style Adjuster as a Chrome (or Chromium) browser extension, go to https://chrome.google.com/webstore/detail/style-adjuster/bmnmiidhocohelghddfcfbhojknfclba.

Some Text To Play With

Here is some text that is highlighted.

Text in a box