CSS4で追加予定の:matches()擬似クラスが便利

CSS4から追加予定のどれかのセレクタにマッチする擬似クラス:matchesが便利そうです。

既存CSSの冗長な例

CSSをコーディングしていてよくあるのが以下のケース。

  • INFORMATIONというページのテーブルにのみスタイルを指定したい
  • thとtdは基本的に共通するスタイル

CSSだと以下の様になると思います。
(普段はもう少し省略しますがあえてtable以下を全て書いています)

	body#information #content table tbody tr th,
	body#information #content table tbody tr td {
		border: 1px solid #999;
		padding: 1em;
	}
	

このコードで感じるのが body#information #content table tbody tr が繰り返されていて冗長だなと。2回も同じコード書きたくない…
CSS3で便利な機能が追加されたのでなにか解決方法あるのではと探しましたが現状では不可でした。
※後述のブラウザ独自実装で可能ですが現実的ではありません。

:matches()擬似クラスを使う

というわけで現状では使えませんがCSS4で追加予定の:matches()擬似クラスを使うと簡単に記述できます。

	body#information #content table tbody tr :matches(th, td) {
		border: 1px solid #999;
		padding: 1em;
	}
	

上記のように:matches()の引数にセレクタを指定することで先のコードと同様の指定となります。便利ですね!CSS3から実装して欲しかったです!!

ブラウザ独自実装 :any()

同機能はFirefoxがversion4から-moz-any()で独自実装していたようです。
:any – MDN
Chromeも-webkit-any()で対応しているみたいですね。

	body#information #content table tbody tr :-moz-any(th, td) {
		border: 1px solid #999;
		padding: 1em;
	}
	

ただ、両方対応させようとしたらベンダープレフィックスを2つ記述する必要がでてくるので本末転倒になってしまいますから現実的ではありません。IEも多分駄目でしょうし。(未確認)
しかもカンマ区切りが無理だったので以下のようなコードになってしまいます。

	body#information #content table tbody tr :-moz-any(th, td) {
		border: 1px solid #999;
		padding: 1em;
	}
	body#information #content table tbody tr :-webkit-any(th, td) {
		border: 1px solid #999;
		padding: 1em;
	}
	

というわけでCSS4が待ち遠しいですね。

参考サイト

「第3回WordPressお茶会 WordBench香川」を開催しました

2012/04/21(土)[13:00~17:30]にデザインラボラトリー蒼様をお借りして「第3回WordPressお茶会 WordBench香川」を開催しました。

リピート参加者、新規ご参加合わせて計11名での開催となりました。
今回は新規の方が2名いらっしゃったのでコミュニティとしては少しずつですが前進してるかなーと。

前回、WordBench香川は(※土井主催のに関しては)だらだらーでいきましょう、ということに決まったので今回もノーテーマでコーヒーを飲みつつの雑談となりました。
ということで本当に何も決めずの開催だったのですが、いつもながら参加者の皆さんがいろいろと提供してくれるので話題には事欠きませんでした。
覚えている限りでは、WordPressについては、テーマ作成の流れ、運用、カスタム投稿タイプ周り(特に勉強になりました!)等。今回は企業でWordPressを使用されている方が参加されていたのでVPSや運用について聞けて為になりました。

後はbaserCMS、Movable Type、a-blog cms、SOY CMS、concrete5あたりの各種CMSについてやカメラについて盛り上がってたようです。WordPress好きはカメラ好きが多いというのは本当ですね。5D Mark IIだったりD800だったりでD40x所持者としては形見が狭いです…

あと、WordBench神戸さんがIT勉強会スタンプラリーに参加する、という情報をWordBenchで見かけたのでWordBench香川コミュニティも参加してみました。(IT勉強会スタンプラリー詳細についてはリンク先を参照ください。)
ただ、香川では他に参加しているコミュニティが今のところ無いはずなのでスタンプを集めようと思ったら大都会岡山に行くか神戸・大阪に行くかしないのでちょっと難しいですね。というわけで香川でも参加コミュニティ増えて欲しいです。
(スタンプラリー用シール作成に関しては@zamojojoさん、@styledesignさんにご協力頂きました。ありがとうございます!!)

photo by: style-design

ちょこっとだけ一人反省会。
いつもノーテーマの雑談だけやってていいのかなーという葛藤はあって、きちんとしたテーマ作成なり、もくもくなり、8時間耐久なりもやったほうがいいのではというのは考えるんだけどスキルが足りなかったり、しゃべるのが苦手だったりで実現するのは難しいですね。(普段の仕事をこなしつつイベント運営されている方凄い!!)
ただ、今回参加者の方からここら近郊でカンファレンス形式のイベントはあるけどお茶会みたいに交流できるイベントがないのでありがたい、と言って頂いたので励みになりました。
というわけでとりあえず「WordPressお茶会」はナンバリングで続けていきたいですね。
コミュニティがもう少し成長したら勉強会っぽいこともたまに出来るようになればいいかな。

あと、今回twitterでハッシュタグつけて実況とか全くしませんでしたが、WordPressお茶会はカンファレンスみたいに喋り手・聞き手が分かれてなくて参加者全員が喋り手であり聞き手で常に忙しいので現実的に実況は無理ですね。
まあ参加者だけが楽しんでしまうクローズド?な集まりになってしまいますが致し方ないですね。

という訳で次回「第4回WordPressお茶会 WordBench香川」の告知ですが、現在のところ2012/6/30(土)を予定しておりますので興味がありましたらご参加頂ければと思います。

* * *

WordBench香川に関してご意見・ご要望等ありましたら@show_webまでお願いします。

[自分用]Twenty Eleven表示確認用ブックマークレット

自分用に適当に作ったので問題ある部分もあるかもしれませんが(保険)せっかくなので公開。
発端はtwitterで見かけた以下@shinichiNさんの発言。


独自テーマを作成していてたまにTwenty Elevenで確認したい時ってあります?よね。
というわけでブックマークレットです。
以下をブックマークバーまでドラッグしてください。
制作中のWordPressサイト表示時にブックマークレットクリックでTwenty Elevenを有効化した場合のページが確認できます。
※西川さんのツイート内にもありますがWordPressにログインしている必要があります。
またTwenty Elevenテーマが入っていないと当然駄目なはずです。

Twenty Eleven表示確認ブックマークレットVer0.1

Twenty Eleven表示確認