contenteditable属性でページ内のCSSを変更する

Result

実用性はさておき、面白かったので備忘録。
コンテンツを編集できるcontenteditable属性をstyleタグに使用するとページ内のCSSを変更できるようになる、というもの
面白いアイデアですね。思いつきませんでした

※実際に変更内容を保存する場合は別途、さまざまな作業が必要です

html

<style class="style" contenteditable='true'>.style {
  /*ここに自由に直接CSSを書くことができます*/
    display: block;  
    background-color: #aabbcc;
    font-size: 1em;
    padding: 20px;
    white-space: pre;
}
</style>

styleタグにcontenteditable='true'を加えてdisplay: block;にします

can i use

contenteditable属性のブラウザサポート状況です

via

A style tag styling itself.