Qiitaのぐるぐるまわるコメントテスト会場が面白い

とにかくはっちゃけてて面白いので未読の方はぜひ一読を。

qiita.com

ぐるぐるぐるー

●●●●●●●●●●●●

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-spin" style="color:#ff7f7f">●<span class="fa fa-spin" style="color:#ff7fbf">●<span class="fa fa-spin" style="color:="#ff7fff"">●<span class="fa fa-spin" style="color:#bf7fff">●<span class="fa fa-spin" style="color:#7f7fff">●<span class="fa fa-spin" style="color:#7fbfff">●<span class="fa fa-spin" style="color:#7fffff">●<span class="fa fa-spin" style="#7fffbf">●<span class="fa fa-spin" style="color:#7fff7f">●<span class="fa fa-spin"style="color:#bfff7f">●<span class="fa fa-spin" style="color:#ffff7f">●<span class="fa fa-spin" style="color:#ffbf7f">●</span></span></span></span></span></span></span></span></span></span></span></span>

2017/6/16 追記

元の記事が盛り上がりすぎて重たくなっていますね。自分のスマートフォンからはもう見れなくなってしまいました。
もしかすると元の記事を見れずにこちらの記事を見ていただいてる方もいらっしゃるかもしれないので、とりあえず概要的なものを追記しておきます。

Font Awesomeという、とても有名なWebアイコンフォントがありまして、アイコンに対して表示効果(アニメーションとか)を付与するクラスなんかも提供されてたりします。

fontawesome.io

それで今回、Font Awesomeの効果をアイコン以外に使う遊びが流行っているのです。

発端となった記事

qiita.com

入力にHTMLタグを許容するタイプの入力フォームは対応大変そうですね。

技術的には

 .markdown-form * { animation: none !important; } 

とか指定しておけばアニメーションを止められると思うのですが、要件的にそれやっていいのかどうかとか色々とあると思うので。

おわり

2017/6/20 追記

QiitaでHTML要素の属性指定ができなくなったそうです(一部の外部サービスの貼り付けを除く)

http://blog.qiita.com/post/162037299989/disable-html-class

blog.qiita.com

過去にはbootstrapの属性を利用したXSSの脆弱性もあったようですし、こういうのって色々としょうがないのかなと思う今日この頃です。

ただWebフォントを使えなくなるのはちょっと残念だなと思いました。
emojiじゃなくてシンプルなアイコンフォントを好んで使っていた方もいたのではないかと思うので。 これを機にemojiが拡張されたりとか…厳しいかなあ。