【小ネタ】style要素にcontenteditableつけるとブラウザでリアルタイムにスタイリングできる

html/css

これ元ネタはTwitterで見たんだけど、いいねもブックマークもしていなかったのでどこかに流れてしまった。 備忘録含めてこちらにメモ。

body要素内にstyle要素を配置して、contenteditable属性を付与。style要素にdisplay: block; white-space: pre;のスタイルをあててあげると不思議とブラウザ上でリアルタイムにスタイリング可能な領域ができあがります。

github.com

上記clone後、index.htmlをブラウザで開くとなんとなく言ってること分かると思う。

仕様的な部分ってどうなの。

body内にstyle要素を含めるのは適切じゃないので、飽くまでお遊びです。
参考：HTML Standard 日本語訳

でもcontenteditable含むグローバル属性は指定可みたい。draggableとかautofucusとか要らなくね？なんとなく雑感。

実務では恐らく役に立たないけど、覚えとくと少しドヤれる…かも

追記

見つけた。これこれ。