とあるCSSハックの弔い

今日、私の職場でデザイナーに向けて共有していた CSS の雛形から、とある2行を削除した。
削除されたその部分はこのようになっていた。

body {
  /* text-align: center; */
}

.container {
  width: 980px;
  margin: 0 auto;
  /* text-align: left; */
}

コメントアウトされた2行が、本日、私の手で削除され git commit された部分だ。

コレが適用されている HTML の雛形がおよそ次のようになっていた。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
  ...
</head>

<body>
  <div class="container">
    <div class="header"> ... </div>

    <div class="wrapper"> ... </div>

    <div class="footer"> ... </div>
  </div><!-- /.container -->
</body>
</html>

CSS と HTML とを交互に見てもらえば分かるとおり、削除された2行の CSS は全く意味を成さない。だから削除した。

が、意味を成さないこの2行にはちゃんと意味がある。
実はこれ、IE5 用の CSS ハックなのだ。

今回の削除について、この2行が削除された理由や、そもそも記述された理由について気にする者は居ないだろう。
ひっそりと消されていくのを惜しんで、弔いの意味でこの記事を書く。

`{margin: auto;}` と中央配置

<body> で {text-align: center;} して、直後の <div class="conatiner"> で {text-align: left;} に戻すこの記述は、<div class="conatiner"> を中央配置するためにある。

ブロック要素の中央配置といえば、{margin-left: auto; margin-right: auto;} がお馴染みだろうが、実は IE5 にはこれが効かない。
どうやら IE5 では margin に指定する値として auto が許容されていないらしい。

代わりに、という訳ではないがIE5ではブロック要素を中央配置するのに {text-align: center;} を使う。
本来、インライン要素やテキストノードの揃えを指定するための text-align がブロック要素にも効いてしまうのは明らかにバグなのだが。なにはともあれこれ以外に方法がないのでIE5向けにコーディングする上では必要な知識だったようだ。

実は弊社では数ヶ月前までIE7を、一昨年までIE6をサポートしていた。

今回のIE5用のCSSハックは、IE6をサポートしてた頃に私が使っていた雛形から持ってきたんだか、そのときに社内にあったコピペ用CSSを整理するときに残すかしたものだ。
約2年前の時点では確信を持ってこのハックの生き残りを決定したことを覚えている。

そのままなんとな～く据え置かれて、まさかいまだに残っていたとは。

CSSハックは歴史を学び、過去を想うためにある

私が HTML と CSS を学び始めたのは今から5年ほど前で、その当時でさえこの CSS ハックが現役で活躍する時代は過ぎ去っていた。
ただ、私が初めて HTML を学ぶために手に取った書籍がなかなかの良書で、古いブラウザに丁寧に対応するための CSS ハックをコラム的に紹介していたのがこのCSS ハックを知るきっかけになった。

5年前は、いわゆるテーブルコーディングがはっきりと悪しき慣習だと認知され、これからはセマンティックなマークアップとCSSによる柔軟なレイアウトだ！という空気感だったように記憶している。

世の中にはスマホ向けサイトというものもあり。でも、レスポンシブで作るなんてのは現実的じゃなかった。そんな頃だ。

私が最初に手に取った書籍でも

テーブルコーディングは絶対にやめろ
<font>タグなんていまどきじゃない
CSSの表現力はすごいぞ

といった事が初心者向けなりにしっかりと書かれていた。
私もそれを気に入って選んでいたし、読むほどにセマンティックなコーディングに憧れたものだ。

一方で、この記事でつらつらと書いてきたような CSS ハックについて解説されていたのも、私のWeb系人生にいい影響を与えたと思う。

インターネットエクスプローラーとネットスケープの CSS 実装合戦で Web 制作の現場がひどく混乱したこと。それでもCSSハックを駆使して古いブラウザをサポートして、多くの人に同じ情報を届けるのが Web 制作者の役目である事。そういった事を、初心者ながらに肌で感じられたのを覚えている。

CSS ハック自体が Web から消えていく

いまやブラウザは毎月のように新しいバージョンがリリースされ、自動で更新されてるようになっている。
W3C といった標準化団体がコンセンサスを取りながら機能追加を図ってくれていて、「他のブラウザでは使えない高機能な CSS が使えちゃう俺カッコイイ(ﾄﾞﾔｧ」という空気も完全に消え失せている。

これから先にはCSSハックといった『バグでバグをカバーする黒魔術』は生まれないだろう。

今回削除された2行の記述はコミットログに残り続けるけれど、あらゆる人の記憶からは薄れていくと思う。
ま、これは、ただの思い出話だけど、そんな感じで。

私からは以上です。

無駄と文化

実用的ブログ