CSS Stopwatch (CSS Programming Advent Calendar 2012)

Category : CSS

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

CSS ストップウォッチのスクリーンショット。9時間59分59秒999までカウントできる。

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 ストップウォッチを作っていて動作がおかしい部分を直す過程で調べたものです。

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


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

Leave a Reply