Vertical align anything with just 3 lines of CSSと横に水平線のあるテキストというCSSテクニックを扱った記事を最近読んだ。どちらも有益なテクニックだが、前者はCSS的で後者はウェブ標準的という印象を持った。
最初に軽く前者のテクニックについて書いておく。後者は日本語の記事なので読めばわかる。
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}Vertical align~はこのようにtransformプロパティーでtranslate()を利用して、縦方向のセンタリングを実現するテクニック。topプロパティーが親要素の高さが基準になるのに対して、transformプロパティーのtranslate()では要素の高さが基準になることを上手く利用している。
親要素でdisplay: table-cellなどを指定する場合と比べると、センタリングしたい要素へのスタイル指定でほぼ完結する点で、margin-topプロパティーやcalc()などを利用して位置調整する場合と比べると、親要素やセンタリングしたい要素の高さを知らなくても大丈夫という点で、それぞれ優れている。後続の兄弟要素の位置とかぶさることに気をつける以外にはこれと言った欠点はなさそうで、即戦力なテクニックだと思う。
僕がこのVertical align~のテクニックを「CSS的」と感じるのは、ありものでどうにかしようというCSS2までの時代の精神や事情を感じさせるところだ。
Vertical align~のコードは文章で説明すると、「この要素の縦位置を親要素の真ん中から始め、その要素の高さの半分だけ上に移動させる」となるので、目的である「この要素を親要素の縦中央に配置する」というものからはかなりの隔たりがある。3行と短いこともあって、これを読んでわからないということはなさそうだが、少なくとも直観的ではないだろう。CSS2の時代はその表現力の少なさから、目的をストレートに表現していないこういったテクニックが多かった。
対して横に水平線~はどうだろうか。
まだ広まっているとは言い難いFlexboxに対する知識が前提となるものの、記事でも書かれているように「本来のデザイン意図をそのまま論理的にコードで表現できている」ので、直観的と言えるだろう。ウェブ標準はウェブサイトの制作に必要な技術を標準化しているものであるわけで、やりたいことを直観的なコードで表現できるとウェブ標準的であると僕は感じる。
ウェブ標準的なテクニックにはどうしても様々な条件がつきまとう。ベンダー拡張プリフィックスはもちろん、ルールセットの分割が必要だったり、場合によってはJavaScriptの助けが必要になる場合もあるだろう。対してCSS的なテクニック(バグを利用したハックではない)は前述の通りありものでどうにかしようというものなので、今までのでもこれからのでもどうにかこうにかなんとか動いてくれるだろうという見通しは立てやすい。
単純にどちらが優れているかというのならそれはウェブ標準的なテクニックの方がより良いと言えるだろうが、その利用に必須であろうAutoprefixerを始めとしたCSSポストプロセッサーのための環境はまだ整いきってはいない。実装コストという面ではCSS的なテクニックに軍配が上がるだろう。
しばらくはCSS的なテクニックでお茶を濁しつつ、出来る所はウェブ標準的なテクニックで実装し直すという日々が続くことになりそうだ。CSS的なテクニックを「古臭い」と切って捨てたり、ウェブ標準的なテクニックを「実装しづらい」と避けたりせずに、両者を適切に選択してこれからを見据えた2014年的なCSSを書いていきたい。