JavaScriptは使わず、CSS3でコンテンツフィルターを実装する

土曜日なのでちょっとしたネタ。
JavaScript無しで、CSSのみで
コンテンツフィルターを実装する
方法をご紹介。実用性は無いので
こんな事も出来るんだねくらいに
受け止めていただけると。

CSSのみでコンテンツをフィルタリングする、というもの。サンプルどうぞ。

Sample

Chomre、Safari推奨です。JavaScriptは使用してません。

CSS

div[class="pink"] {background:#f7c7de;}
div[class="green"] {background:#b5cb94;}
div[class="blue"] {background:#7bcbc6;}

↑ まず、色分け。これは属性セレクタじゃなくてもいいです。

a {
    -webkit-transition:all .5s linear;
    -moz-transition:all .5s linear;
    -o-transition:all .5s linear;
    -ms-transition:all .5s linear;
    transition:all .5s linear;
}

↑ アニメーションエフェクトはtransitionを使用しています。

a:focus[class] {outline:none;}

↑ フォーカスを利用するので選択中に出る枠を消します。賛否あると思うのでお好みでなんかしてあげてください。

a[class="pink"]:focus ~ div:not([class="pink"]),
a[class="green"]:focus ~ div:not([class="green"]),
a[class="blue"]:focus ~ div:not([class="blue"]){
 height:0px;
 width:0px;
 border:none;
 margin:0;
}

↑ 否定擬似クラスの:notを使って、フォーカス中の要素に該当するdiv以外のdiv要素を見えないようにする。

a[class=”pink”]:focus ~ div:not([class=”pink”])なら、<a class=”pink”>を選択中(:focus)は<div class=”pink”>以外を取得(:not)しますので、その取得したアイテムを表示しない、という形でフィルタリング出来ます。

否定擬似クラスはあまり聞き慣れないかも知れませんが、jQueryでは一般的なDOM操作で使われます。このようなフィルタは以前まとめたので動作の確認もあわせてどうぞ。

ただ、これだけじゃ出来ません。なのでHTMLにもう一工夫します。

<a href="javascript:void(0)" class="all" tabindex="-1">All</a>
  <a href="javascript:void(0)" class="pink" tabindex="-1">pink</a>
  <a href="javascript:void(0)" class="green" tabindex="-1">green</a>
  <a href="javascript:void(0)" class="blue" tabindex="-1">blue</a>

↑ tabindex=”-1″を使うんですね。なるほど・・キーボードアクセス出来なくなるので、アクセシビリティ的な問題もありますけど。仕組みはここが分かりやすいです。

ちょっと一部の方からお叱りも受けそうですが、IE8以下で使えないしiPhone等では使えないしで実のところ用途がありませんので大目に見て頂ければ。今日はこんな事も出来るんだっていうのを昨日知ったので休日のネタ的な感じで書いてみました。参照にしたのは以下です。

via:PriteshGupta.com