JSを使わずウェブ上でCSSを書き換える斬新な方法ｗ
twitterで流れてきたとあるサイト。
http://codepen.io/jcalifa/full/QwepvY
このサイトにアクセスすると、中央に「CSS」の入力エリアがあり、そこを変更するとリアルタイムにサイトのデザインが変わります。しかし、javascriptは一切つかっていないそうです。一体どうやって？気になって調べてみました。
styleタグにスタイルをつけテキスト入力エリアっぽくする。
|
1 |
<style class="onPage"></style> |
まずbody内にstyleタグを設置します。通常、styleタグを置いただけでは、画面に何も表示されません。そこで、そのstyleタグに下記のスタイルをあて、無理矢理display:blockにして表示します。（styleタグにスタイルを当てるという発想がありませんでした。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
style.onPage { display: block; margin: 40px auto; max-width: 100%; padding: 14px; text-align: left; background: #FFF; color: #444; white-space: pre; font-family: Monaco, monospace; } .onPage:focus { outline: 0; } |
すると、body内にいつも見えないstyleタグが姿をみせ、テキスト入力エリアっぽい感じにに変化します。
styleタグにcontenteditableを追加する
|
1 |
<style class="onPage" contenteditable></style> |
先ほどのstyleタグに「contenteditable」属性を追記します。
「contenteditable」はHTML5からサポートされた新しい属性で、その要素内にあるテキストなどを編集できるようにするものです。
例）これはcontenteditableのテキストです。クリックしてみてください編集できます。
すると、見た目だけでなく挙動もテキストエリアっぽくなります。
・いつもは隠れているstyleを、スタイルで強引にbody内に表示する
・さらに、styleにcontenteditable属性を指定し編集できるようにする
こんな感じにすることで、自分自身のスタイルを編集することが、できるサイトができているようでした。すごい！