Start filling in the rendering section.*
というわけで、レンダリングのセクションが追加されはじめました。
もちろんnon-normativeですが、「デフォルトスタイルシートを提供してはどうか？」みたいな意見も結構多いんですよね。んーまあ、わからなくもない。。
しかしかなり後になるかなあと思ったRenderingが追加されはじめるとは、今年中のLCを本気で狙ってますね*1。
css |
このエントリが去年の9月なので、今さら書くのもアレなんですが。
Twitterがこの頃デザイン変更をして、そのときにどうやらcenterを使ってたらしいんですね（今は無くなってますが）。それで「<center>って！<center>って！」みたいに言ってるエントリなんですが、center、ちょっと面白いんですよね。
ほとんどの解説サイトには「非推奨なのでこれからはmargin-leftとmargin-rightにautoを指定しましょう」みたいな事が書かれてると思うのですが、この指定だけだとcenterの挙動って再現できないんですよ。
ちょっと長いですが、テストケースを作ってみました。
<!DOCTYPE html> <meta charset=utf-8> <title>"center," the dwarf element</title> <style> center { border: 1px dotted #f00; margin: 20px; width: 600px } p { border: 1px dotted #0f0; margin: 20px; width: 400px } div { border: 1px dotted #00f; margin: 20px } </style> <center> center内のテキストはセンタリングされます。 </center> <center> <p>center内の段落もセンタリングされます。 </center> <center> <div> ボックスの中にある段落はどうでしょうか？ <p>ボックスの中にある段落もセンタリングされます。 </div> </center> <center> <div> では、もうひとつdivを増やしてみましょう。 <div> さらに囲ったボックスの中にある段落はどうでしょうか？ <p>センタリングされます。 </div> </div> </center>
要は、centerの挙動ってこうなんですよ。
2つ目はいいとして、3つ目ですね。継承しちゃうんです。
この変な特徴が、GeckoやWebKitでtext-alignの値に-moz-centerという独自の値が定義されてる理由だったりします。CSS WGでも議題に上がったことがあるくらい、おもしろい話だったりするんですよ。
なのでただdiv.center { text-align: center; margin: 0 auto }とかだと、それは真ん中寄せにはなるけどcenterのエミュレーションではないんだよ！ってことです。まあ、継承まで考えて使う人がどれくらい居るのかはわかりませんけど。
とまあ、centerはないかなー
と言ってた理由のひとつがこれだったりします。
*1：そこからものすごく長いでしょうけど
言いたいことがあったのでブクマじゃなくてちゃんとコメント欄で直接言いました!!これで僕も人に好かれるいい人間ですね!
vantguardeさん的には、ブクマで、しかもはてブよりもdeliciousでコメントして欲しいのではないでしょうか[謎]。