ありがとうInternetExplorer 27年の歴史を振り返る 〜新旧IE対応を通じて得たもの（CSSハックほか）〜

今年2022年6月16日（木）、インターネットの普及に多大な貢献をしたInternet Explorer（以降、IE）のサポートが終了しました。現在はMicrosoft Edgeに移行し、PC・スマホのさまざまなプラットホームで使用できるようになっています。

IEはWindows95からメジャーとなり、インターネットの普及に大きく貢献しました。また、制作者の立場では、IE6〜9のあたりで苦労することが多く悩みのタネでもありました。もうそのような体験ができなくなると思うと、懐かしさと共にちょっぴり寂しさも感じてしまうのですが、そんなIEについて当時の斬新な対応方法などと一緒に振り返ってみたいと思います。

ブラウザ戦争とIE

1995年にWindows95が発売になり、それまでは高価なため専ら職場用として使用されていたPCが個人でも身近なものになりました。当時Microsoftは、OSとIEを抱き合わせで販売をしていて、これが独占禁止法に違反するとして、米司法省と裁判で争うことになりました。

当時の主要ブラウザは「Netscape Navigator（以降、NN）」というものでした。ここにIEが登場しブラウザ戦争が勃発するのですが、IEはその後も続くブラウザ戦争で、なんだかんだライバルに勝ち残ってきたのです。

現在はFireFoxやSafari、Google Chromeなどがライバルとして存在していますが、改めて思い返すと95年以降いつも中心にはIEがあり、さまざまなライバルと切磋琢磨し、インターネットの普及とブラウザの発展に大きく貢献してきたのだなと思います。

新旧IEに対応することが必須（CSSハックとベンダープレフィックス）

ブラウザ戦争が激化するにつれ、FirefoxやGoogle Chromeはベンダープレフィックス（*）を用いて新しい機能を使用できるよう差別化を図っていきました。後にIE用のベンダープレフィックスも登場しますが、残念なことにMicrosoftはW3Cのルールに対応することに消極的で、新しい機能で暫定的に使用できるものが少ない状況でした。また、さまざまな理由により古いOSを使い続けるユーザーが多かったこともあり、WEB制作者は新旧のブラウザ両方の仕様に合わせる必要がありました。

（*）…「-moz-〜」「-webkit-〜」「-ms-」などCSSプロパティの先頭につけるもの

そこで古いブラウザにも対応できるように使われていた方法が、「CSSハック」と呼ばれるものです。「CSSハック」とは、実はブラウザのバグを逆手に取った方法のことです。CSSに対応しきれていないIE6〜11に対して、特別な設定方法として使用されていました。（※一部Safariなどもあります）

では「CSSハック」とはどんなものか、今後は改めて注目される機会もないと思いますので、IEの歴史として最後にいくつか紹介してみたいと思います。

スターハック

先頭に「* html」を付けることで、IE6のみに適用させる

/* 例 */
* html p {
  font-size: 12px;
}

スターハック（IE7）

先頭に「*:first-child+html」を付けることで、IE7のみに適用させる

/* 例 */
*:first-child+html p {
  font-size: 12px;
}

スターハック（IE7以下）

プロパティの先頭に「*」を付けることで、IE7以下（IE6、7）に適用させる

/* 例 */
p {
  *font-size: 12px;
}

アンダースコアハック

プロパティの先頭に「_」を付けることで、IE6のみに適用させる

/* 例 */
p {
  _font-size: 12px;
}

インポータントハック

「!important」で指定した後の同じプロパティは、IE6のみ適用される

/* 例 */
p {
  font-size: 12px !important;
  font-size: 16px;
}

隣接セレクタハック

先頭に「html + body」を付けることで、IE6以外に適用させる

/* 例 */
html+body p {
  font-size: 12px;
}

IE8用ハック

プロパティに「\9」を末尾につけることでIE10以下に適用され、「*」との組み合わせで結果的にIE8のみになる

/* 例 */
p {
  font-size: 12px\9;
  *font-size: 12px;
}

IE9用ハック

セレクタに「:not(:target)」を付けることでIE9以上に適用で、「\9」との組み合わせで結果的にIE9のみ適用になる

/* 例 */
p:not(:target) {
  font-size: 12px\9;
}

上記を見て筆者と同じ経験をしたことがある人は、きっと懐かしく思うでしょう。しかし、全てのIEを網羅しようとすると設定がハックだらけになってしまい、正しい設定が判りづらくなり、また記述量も無駄に増えてしまいます。四苦八苦して設定する割には、気持ちが良いコーディングではありませんでした。

IE対応を経験してわかったこと

とはいえ、各ブラウザで設定したデザインを都度確認し、試行錯誤しながらコーディングすることに面白みを感じることもありましたし、今となっては良い経験になったと筆者は感じています。当時は、テーブルコーディングからハイブリッドコーディング（*）〜HTML＋CSSコーディングへと切り替わる過程の中でしたので、CSSに慣れるという意味では都合が良かったのかもしれません。
そのような時代を経験をして培われたものも、今考えれば私の貴重な財産になったと思います。他の人に自分の経験を伝えるのはなかなか難しいのですが、昔も今も共通して感じることが3点あります。

（*）…テーブルコーディングにCSSを取り入れたコーディング方法

制作手法をメンバーで共有することの重要性

CSSハックにはさまざまあり、また制作物は個人の思考に委ねられることが多かった時代でしたので、 できあがりが複雑でわかりにくくなってしまうことも普通にありました。制作を始める際に「どんな対応方法でどのブラウザを中心に考えて制作をすれば良いか」をチーム内で決め、誰が見てもわかりやすいコーディングをすることがとても重要になります。

CSSの設定は、見方によってさまざまな方法がある

CSSハックの例でもわかるように、１つのゴールに対して突き進む道（方法）はたくさんあります。ひとつのデザインを実現するにも、最新版を中心に考えた場合は、新しい方法で効率的に設定を行い、イレギュラーパターンについては別途追加する形になるかと思いますが、一番古いIE6をベースに考えた場合は、全く違う考え方になるのでできあがりも異なってくると想像できます。設定するほうは大変ですが、「解が１つではない」「どの方法も正しい」というところは、コーディングで感じる魅力の１つのような気がします。

ブラウザでどのような動きをするかを把握し設定する

当時は同じ設定をしてもブラウザが変われば同じ動き（配置）になるとは限らなかったので、CSSハックを使用して1px単位での調整が必要なこともありました。現在はどのブラウザもほぼ一緒の動きだと思いますが、ブラウザの特性やCSSプロパティの特性を良く知っておくことが、予期しないパターンに対応するための糧になると思います。

まとめ

いよいよIEが消滅するとのことで「もうこの先、IEの話をする機会がない！」と思い、今回はあえてIEのことを中心に振り返ってみましたが、いかがでしたでしょうか。

当時は苦労もたくさんありましたが、今となっては良い思い出です。今回もいろいろ書きましたが、昔のクロスブラウザ対応って現在のPCとスマホ（タブレット）の対応とほぼ同じように思います。制作側は常にその時代の環境に対応していかなければならない難しさもありますが、意識的な部分や重要なポイントは昔も今も変わらないものだと思います。これまでの経験を通して感じたものなどは、この後に続く後輩達に今後も伝えられたら良いなと筆者は考えています。

ちなみに私の所属するDDSでは、技術のことはもちろん、なかなか伝えることのできない経験の部分もOJTで可能な限り伝えるようにしております。でもIEのことについては、もうあまり意味のない話になるので、興味のある人にだけ別途お話しをすることにします。（笑）
現在のスマホ対応のことも、そのうち数年後には笑い話のようになっているのかもしれないですね。

株式会社デジタルスケープ
デザイン&デベロップメントスタジオ
高杉 充

2005年よりWEB業界に入り、未経験ながらOJTで１年ほど数社のサイト更新を経験した後、以降はグローバルメーカーやWEB証券会社のサイト運用など大手から中小企業まで様々な案件にWEBコーダー・フロントエンドエンジニアとして携わる。現在は、フロントエンドエンジニア・ディレクターとして、サイトリニューアルやお客様先常駐案件などの提案から制作・運用までを担当。
コミュニケーションを通して信頼関係を構築し、安心して働ける環境でメンバーと共に成長することが何よりの喜びです。