contenteditable属性で入力したCSSがページにリアルタイムで反映されるフォームをつくる

HTML5で追加された属性にcontenteditableというものがあります。これを付けることで、あらゆる要素のテキストノードの編集が可能になります。ブラウザ版Twitterのツイート入力フォームもこの属性が使われています。

これを<style>タグに追加して、さらにdisplay: blockで可視化すると、入力したCSSがページにリアルタイムで反映されるフォームを簡単につくることができます。

<style>タグは、<head>間または<body>直下の子要素へ配置しないと、W3Cのバリデーションでエラーになるのでご注意ください。

デモ

body{background: #000} など適当なCSSを入力して遊んでみてください。

styleタグ内にdivなどの余計なタグが生成されるのを防ぐため、改行する際はShiftキーを押しながらEnterキーを押してください。

デモで使用しているソース

<style class="stylebox" contenteditable="true" type="text/css">
</style>
.stylebox{
    display: block;
    height: 400px;
    padding: 12px;
    overflow: auto;
    resize: both;
    border: 1px solid #ddd;
    white-space: pre;
    font-family: Monaco, monospace;
}

.stylebox:focus{
    box-shadow: 0 0 5px #ccc inset;
}