「CSSは一つで十分だと思っていた。」

それは、まだ若かった頃の話である。

新しい技術がやってきた

CSSは少しずつ進化していました。

角丸。
影。
アニメーション。
グラデーション。

夢のような表現が次々と登場します。
開発者は喜びました。

「これで、もっと美しいサイトが作れる。」

しかし、その喜びは長く続きませんでした。

ブラウザ、それぞれの正義

Chrome「この仕様でいきます。」

Firefox「少し違います。」

Opera「私は私です。」

Safari「あとで対応します。」

IE「……。」

誰も同じ未来を見ていませんでした。

四大勢力

新しいCSSを書くたび、開発者はこう書き始めます。

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

一つのプロパティを書く。
その前に四行。

そして最後に、正式版。

 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;

「完成。」……ではありません。

今度は別のプロパティでも同じことを繰り返します。

コピー＆ペーストの時代

CSSを書くというより、増やしていました。

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

新人 「なんで五回書くんですか？」

ベテラン 「全部動かすため。」

新人 「全部必要なんですか？」

ベテラン 「たぶん。」

自動化という希望

やがて人々は思いました。

「もう手で書きたくない。」

そこから、CSSを自動変換するツールや、ビルドツールが少しずつ広まり始めます。
必要なプレフィックスを自動で付けてくれる。

あの頃の開発者にとって、それは救世主でした。

時代は少しずつ変わる

ブラウザは進化し、仕様は統一され、いつしかプレフィックスは少しずつ姿を消していきます。

そしてある日、開発者は気付きます。

 border-radius: 8px;

一行だけで動いている。

「……。」

「便利になったな。」

あとがき

今ではプレフィックスを書く機会はずいぶん減りました。

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

でも、あの頃は本当に必要だったのです。

ブラウザごとに違う未来があり、開発者はそのすべてに対応していました。
当時は、ブラウザごとに見た目が違うのが当たり前の時代だったのです。

だから昔のCSSを見て、同じプロパティが何度も並んでいても、驚かないでください。
それは手抜きではありません。

全員を同じ未来へ連れていこうとした努力の跡なのです。

昔のコードを笑わないでください。
そこには、ベンダープレフィックス戦争があります。

次回予告
第六世代 レスポンシブ革命

ある日突然、Webサイトはパソコンだけのものではなくなった。

「スマートフォン対応、お願いします。」

その一言で、全国のWeb制作者は静かに空を見上げた。