140 Colors FoundというCSSで使える色キーワードをランダムにちょっとかっこよく表示するツールを作った。CSS Color Keywordsのアレンジ。実用性はまったくない。本当にない。
リロードごとにランダムに色が変わる。body要素にtransition-durationを付けているので、対応ブラウザではフェードインされる。フォントはGeorgiaでも良かったけど、マイブーム中のVollkornにした。tの頭とか一部のグリフの端が斜めにカットされてるとこがお気に入り。
色のフォーマットの変換で手抜きをしてハマった話
色キーワードからrgb(R, G, B)か#RRGGBBに変換するために、その色キーワードを指定した要素の計算済みスタイルを拾おうとした。どんな色のフォーマットでも計算済みスタイルでは統一されている記憶があった(Operaは#RRGGBBで返ってきてしまうけど)ので利用したが、あえなく失敗。
document.body.style.backgroundColor = "Red";
var c = window.getComputedStyle(document.body, null).getPropertyValue("background-color");
// rgba(0, 0, 0, 0) or transparentこのコード自体にはあまり問題はない。rgba(0, 0, 0, 0)等が返ってきてしまう理由はbody要素のスタイルにtransitionプロパティがあったことで、色を変更した直後だとアニメーション中なため正確な値が拾えなかった。当たり前ですよねー。transitionプロパティがなければ意図した通りに変換される。
transitionが原因なので、そういった余計なスタイルが付かないダミーの要素を作ってそこから拾えばいいんじゃないかとやってみたら、今度は一部ブラウザで空文字列が返された。
var span = document.createElement("span");
span.style.backgroundColor = "Red";
var c = window.getComputedStyle(span, null).getPropertyValue("background-color");
// Chrome, Safari and Opera: empty string
// Internet Explorer and Firefox: rgb(255, 0, 0)ChromeやSafari・OperaではappendChild()等をしていない要素の計算済みスタイルを参照できないようだ。パフォーマンス上の理由でこうなってるんだろうか。
色々ゴニョゴニョすれば変換できることはわかったのだけど、それだとコードが読みづらくなるので、データとして色キーワードとその色のrgb(R, G, B)を持たせることにしました……。最初からそうしていればよかったですね！
URLのハッシュで色キーワードを指定すると、その色で必ず表示する機能とか付けようかな。