Style this page

You can edit the style of this page.

Just click on the style tag below to edit it directly. Changes are applied as soon as the keystrokes leave your fingers.

Editing the style does not require any javascript.

It uses techniques from html-wysiwyg, styles from 58 bytes of css to look great nearly everywhere, and a suggestion from hacker news user 'phelm' about making a style tag contenteditable.

It relies on 4 things:

The style tag is visible thanks to: style { display:block;}
The style tag is laid out in a readable way thanks to: style { white-space: pre-wrap; }
The style tag is editable thanks to the attribute: contenteditable=true
There is no spellchecking inside the editable item because of the attribute spellcheck=false

There is also at least 1 very nasty problem:

Don't press [Enter] while editing! The implementation of contenteditable is such that pressing [Enter] causes a new div element to be injected, and our styles stop being applied after that element.

Source code available at github.

.: secretGeek.net :.