「Netscapeでは大丈夫です。」

「IEで確認してください。」

――その一言で、現場は静まり返った。

平和は長く続かなかった

float大戦を乗り越え、clearfixという新たな知恵を手に入れたWeb制作の世界。

ようやく平和が訪れた。

……そう思われていました。

しかし、その平和を打ち砕く存在がいました。

Internet Explorer

通称、IE。

「なぜ、お前だけ崩れる。」

同じHTML。

同じCSS。

同じ画像。

Netscape。

「問題ありません。」

Firefox。

「問題ありません。」

Safari。

「問題ありません。」

IE。

「崩れています。」

開発者。

「……。」

確認作業は儀式だった

修正する。

保存する。

更新する。

Netscape。

「ヨシ。」

Firefox。

「ヨシ。」

Safari。

「ヨシ。」

IE。

「ダメです。」

また修正する。

保存する。

更新する。

Netscape。

「ヨシ。」

IE。

「まだダメです。」

いつしか、

Web制作の最後の仕事は、

IE確認

になっていました。

CSSハックという呪文

人々は知恵を絞りました。

「IEだけ違うCSSを読み込ませよう。」

そうして生まれたのが、

/* IE6 */
 * html .box{
   width: 100%;
 }

/* IE7 */
*:first-child+html .box{
  margin: 0;
}

/* IE8・IE9・IE10だけに適用 */
.box {
  margin: \0; 
}

/* IE10・IE11だけに適用 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .box {
    margin: 0;
  }
}

新人エンジニア。

「これ、何ですか？」

ベテラン。

「呪文。」

新人。

「意味は？」

ベテラン。

「聞くな。」

zoom:1; 教の誕生

そして現場には、ある一つの伝承が残されていました。

zoom:1;

書く。

保存する。

更新する。

直った。

「……。」

「なんで？」

「知らん。」

もちろん、本当は理由があります。

しかし、現場で最も重要なのは、“表示された”という事実でした。

だから誰も深く追及しません。

「動いた。」

「ヨシ。」

それだけで十分だったのです。

hasLayoutの呪い

ある日。
新人が尋ねます。

「zoom:1;って何ですか？」

ベテランは静かに答えます。

「hasLayout。」

「hasLayoutって何ですか？」

「……。」

「昔のIEの仕様だ。」

「なるほど！」

「いや、分からなくてもいい。」

「え？」

「動けばヨシ。」

現場の共通認識

あの頃、全国のWeb制作者は、きっと一度はこう思いました。

「なんでIE、お前だけ違うんだよ。」

それでも仕事です。

ブラウザは選べません。

行政サイトも、

企業サイトも、

社内システムも、

IE対応が当たり前でした。

だから今日も、

誰かがCSSハックを書き、

誰かがzoom:1;を追加し、

誰かが「もう直ってくれ」と祈っていました。

あとがき

今ではInternet Explorerは役目を終えました。
IEが終了した時、本当に一つのネット時代が終わったと思いました。

若い開発者の中には、「IEって何ですか？」という人もいるでしょう。

でも、あの時代を知る開発者にとって、IEはブラウザではありません。

一つの時代です。

苦労も、
悩みも、
深夜の修正も、
全部そこにありました。

だからもし古い案件で

zoom:1;

という一行を見つけたら、
消す前に少しだけ立ち止まってみてください。

それは誰かが、長い夜の末にたどり着いた答えなのかもしれません。
昔のコードを笑わないでください。
そこには、IE暗黒時代があります。

次回予告　
第五世代 ベンダープレフィックス戦争

CSSは一つでは足りなかった。

 -webkit-
 -moz-
 -ms-
 -o-

四つの勢力が、それぞれ違う未来を見ていた。