CSS Stopwatch (CSS Programming Advent Calendar 2012)

CSS Programming Advent Calendar 2012の2日目です。
まだ2日目ですし、あんまりややこしくないものをやろうと思ってストップウォッチを作ってみました。

CSS Stopwatch

ダウンロード

右上のボタンでスタート、ストップ、リセットです。
上部中央のランプは色なしがリセット状態、青がスタート（カウント中）、赤が停止中を表します。
左のスイッチでは数字部分のカウントスタイルの変更ができます。これはリセット状態でないと変更できません。

• :checked擬似クラス
• 間接兄弟セレクタ
• CSS Counters
• CSS 3D Transforms
• CSS Animations
• CSS Gradients
• Root em
• Viewport percentage length
• pointer-events
• calc()

などを使っています。

IE 10, Firefox（17で確認）, Chrome（25で確認）で動作します。
ビューポートのサイズに応じて大きさが変わります。ただし、Firefox はvminにまだ対応していないので表示サイズは文字サイズ設定依存になります。
Operaはまだ3D Transformsに対応していないのでちゃんと動きません。
Safariは動きますが一部の表示がおかしいです。

3日目の明日はdskdの越智さん（@o_ti）です。
よろしくお願いします！

ついでなので、この手のデモについて少し。

こういうCSSでやってみた系のものは、そのままだとはっきり言って普通のサイトでは実用性ないですし、自分で使う気もありません。
単に「CSSでもやろうと思えばここまでできる」と見せるデモだと考えています。

ただ、そのデモを見て仕組みを調べたり、実際に作ってみてスタイルがどう適用されるのか、ブラウザの対応はどうなっているのかなど、学べる部分もあったりします。
先月末に書いた「CSSの小数点以下の数値を各ブラウザはどのように解釈するか」と「Internet Explorer 10のCSS 3D Transforms」は、このCSSストップウォッチを作っていて動作がおかしい部分を直す過程で調べたものです。

なので、まあ遊びで作ってみる分にはいいんじゃないでしょうか。
何か学べればそれでいいですし、特にトラブルなく作れたらそのときは自分の理解度を確認できたと思えばいいです。

それと、これの作り終わりのころに海外の人が似たようなものを作っていたのを知ったのですが、仕組みは少し違うので被ってないってことで……。