CSSで要素数のカウント、要素のクリック状態保持

最近要素を置換することができるCSSプロパティcontentにあるcounterという値を使ってなにか作れないかなぁと思っていたのでその時の備忘録です。

counterは要素の先頭などに連番をつけることができるので、
リストタグで無くても番号をつけたりできます。

今回やったこと

ボタンをクリック→ボタン消す→カウンターが要素の数に応じて変化
今回Jsは一切使ってません。

対応ブラウザ : Webkit系ブラウザ(Chrome,Safariで動作確認,Firefoxだと白枠出ます)

content:counterで取得した値を減算させるには…

要素の数で増えるんだったら減算もできるだろと思ってやってみました。
display:noneで消してあげたところ、リアルタイムでカウンターの値が反映されました。
ちなみに要素のボックスを維持したまま不可視状態にするvisibility: hidden;ではうまくいきませんでした。

activeとかtargetとか使って…
あっ維持できない…

カウンターの値を変更する方法がわかった所で、
次はクリックした時に要素を消してあげようかと思います。

擬似セレクタのactiveで…あっ…
そうです、activeだとクリックした時に消すことは出来ますが、
マウスを離せば状態は元に戻ってしまいます。

同様にtargetを使ってもひとつの要素を消すことは出来ますが、
複数は出来ません。

じゃあどうするかってことです。
選んでいたら消す…
複数の状態維持…チェックボックスとかラジオボタンとか…？

というわけでinput:checkedにdisplay:noneをつけて実行してみました。
checkboxを使えばうまくいきましたが、
これではボタンっぽくはないので、画像に置き換えようと思いました。

でもinputの子要素にimgって出来ない…

そうですよね、子要素にはimgを入れられないんです。
なのでcssのbackground-imageプロパティで指定すればなんとかなるかと思いましたが…
うまくいきませんでした。

詰まったので調べてみたところ、
参考にというかズバリな記事が下記に書かれていました。

javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた

appearanceというプロパティを使うことによってOSプラットフォームのスタイルを割りつけられるそうです。(全く知らなかった…)
これをbuttonと指定してあげることでbackgroundを指定することができるようになります。

iOSでも動いた!!でもFirefoxでは…

うまく動いた!!と喜んでいたのですが、
Firefoxでは問題がいくつか発生してしまいました。

１．カウンターが0、ボタンの要素が消えたまま…

クリックして要素を消した後、リロードすると要素が消えたまま…
つまり、checkboxのチェックの状態が維持されているようです。
Firefox5、6、7で確認したところこのような現象が確認できました。

２．appearanceで消えないスタイル
Firefoxではapperaranceでbuttonを指定しても、
こんな風に白い角丸の枠が表示されてしまいました。
borderにnoneを指定してたりしてもスタイルは消えませんでした…

今後WebkitもFirefoxのように消えないスタイルが適応、仕様の変更が行われればこのDemoの挙動、外見も変わる可能性はなきにしもあらずですが、
スマートフォン向けのコンテンツを作成する際にはこのようなテクニックを知っていてもいいかもしれないですね。

最初に表示させたデモの主要部分のソースコードは下記のようになります。

HTML

CSS

input{
  border:none;
  text-decoration:none;
  counter-increment:counting;
  background-image: url(test.png);
  background-repeat:no-repeat;
  width:143px;height:142px;
  -moz-appearance: button
  -webkit-appearance: button;
}

input:hover{background-image: url(test2.png);}
input:active{background-image: url(test3.png);}
input:checked{display:none;} 

form::after{content:counter(counting);}