Live CSS editing on page

So, I just stumbled across something really cool!

It is possible to edit CSS live on page!

If you have some <style/> tag, you can add some style attribute to itself. First use display: block, so it shows up on page.

And then the second trick: Add the contenteditable attribute, to make it changeable.

<style style="display: block;" contenteditable>
    /* ... */
</style>

That’s it - new styles get applied immediately.

Demo

So, go on and change some of the CSS below:

I think this is awesome! Please don’t ask me, where it could be useful – still, awesome!

You could also do that for <script/> tags, but to trigger the Javascript again you’ll have to reload the page and then all the changes are gone.

So long!