見出し画像

IE6のおもしろ仕様まとめ - 2011年、新社会人だったデザイナーが当時を思い出してみる

new1ro (デザイン / フロントエンド / イラスト)

2014年4月9日にWindows XPのサポート期限が終了となり、WebデザイナーやWebエンジニアは歓喜しました。

なぜならそれは、多くのデザイナーやエンジニアを苦しめ、睡眠時間を奪ったIE6のサポートをMicrosoftが打ち切ったことを意味するからです。

去る2020年4月9日は、IE6の七回忌にあたります。ということでいまは亡きIE6の思い出話を、新入社員当時のデザイナーの視点でしてみます。

2011年の新社会人デザイナー

2009年に高専を卒業し美大に編入学、
2011年3月11日に滋賀県の美大の卒業式 (式の最中に横揺れ)、
2011年4月デザイナーとして仕事を開始、というのが当時の私の状況です。

地方の中小企業で人手が足りなかったからなのか、当時はまだ「レスポンシブ」という言葉も聞かなかった時代だったからなのか、会社ではデザイナー全員がPhotoshopでデザインラフを作り、コーディングして自分で公開するという体制でした。

与えられた端末はWindowsのデスクトップPC、エディタはTeraPad。ちょうどGoogle Chromeのシェア率が急上昇しているころだったので、先輩社員たちはみんなFirefox + Firebug (検証のためのFirefoxの拡張機能) を使っていました。

そんななかいつも苦しめられていたのがInternet Explorer 6、通称IE6の表示崩れです。ゴールしたと思った瞬間、ゴールが遥か遠くだと知らされ再びマラソンさせられるような思いを何度もしました。

え? IE? 古いバージョンには対応しなくて良いんじゃない?

いまの若手デザイナーやエンジニアは、そう思うかもしれません。しかし、当時2011年4月のブラウザシェア率は以下のような状況でした。

画像1

参照: https://news.mynavi.jp/article/20110506-a033/

2011年4月の国内ブラウザシェアランキングはIE6は3位。僅差で4位のGogle Chromeを上回っていました。4つ前のバージョンのIEが第3位のシェア率、この恐ろしさに共感いただけるでしょうか。

共感していただけたのなら、いよいよIE6のおもしろ仕様について読み進めてください。

大前提、横並びレイアウトは「float: left;」一択

レイアウトについて、2020年現在では横並びの見た目を実装するのは「display: flex;」一択でしょう。IE11対応を考えなければ「display: grid;」も選択肢に入ってくるかもしれません。しかし、IE6対応をしなければならなかった当時、横並びレイアウトの実装の選択肢は「float: left;」しかありませんでした。

「display: flex;」は使えなかった

という話ではありません。

「display: inline-block;」も「display: table;」も使えなかった

ということです。

「display: flex;」 「display: inline-block;」「display: table;」がない世界で、floatだけを使ってレイアウトするしかなかった状況。いまではもう考えられないですね。

「margin-left」と「float: left;」を組み合わせると「margin-left」の値が倍になるので禁止

IE6に対応する場合、横並びレイアウトの唯一の手段である「float: left;」。新人デザイナーであった私は「.clearfix」というテクニックを先輩から教わりました。

不安を抱えながらCSSの参考書には書かれていなかったテクニックを学ぶことができて、プロとして仕事ができているような嬉しさを感じていたのですが、この「float: left;」について、IE6には疑心暗鬼になるような恐ろしい仕様が存在していました。それは「float: left;」と「margin-left」と組み合わせると「margin-left」の値が倍になる、というものです。

どういうこと?

と思うでしょう。ソースコードで表現すると以下です。

.item {
  margin-left: 10px; /* IE6だと倍の20pxになる */
  float: left;
}

そのため、新人デザイナーであった私は必ず以下のように書いていました。

.item {
  margin-right: 10px; /* IE6対応のためmargin-leftは禁止 */
  float: left;
}

2011年に新社会人となった高専 + 美大育ちのデザイナーは、1週間以内に「.clearfix」という謎の呪文と「float: left; とmargin-leftは一緒に使うな」という教えを受けて世の中には教科書に書いていないこともたくさんある、ということを体感しました。

PNGの透過が使えない

2020年でもロゴにPNG画像を使うシチュエーションはあると思うのですが、IE6ではPNGの透過が使えませんでした。そのためロゴなどを書き出す場合は、背景を白塗りにした矩形の中にロゴを置いたり、結局GIF画像を使ったりしていました。

PNGの機能がフルに使えないことから、▲ (三角) や● (丸) などの簡単な形の装飾やアイコンの場合はCSSだけで実装することが社内では推奨されていたので、そのテクニックが身についた、という意味で新人デザイナーにとってはよかったのかもしれません (あ、●についてはborder-radiusが使えないIE6には関係ないですね^^)。

ちなみに透過PNG画像はIE7とIE8でもまだ完全ではなく、透過部分のフチが汚く (黒っぽく) なっていたので結局使えませんでした。IE8のサポート期限は2016年の1月。"東京2020オリンピック" のエンブレムが決定したり、米国大統領選挙でトランプ氏が泡沫候補扱いされていたりしたころです。

ボックスサイズの解釈が先進的 (直感的)

例えば以下のソースコードの場合、ボックスの横幅は122pxとなります。ところが、IE6だと122pxではなく100pxと解釈されていました。

.box {
  padding: 10px;
  width: 100px;
  border: 1px solid #f00;
}

「width: 100px;」と指定しているわけなので横幅が122pxになるのはおかしい、という違和感は新人デザイナーがよくぶちあたる壁です。その点で、この仕様に関してはIE6のほうが直感的な仕様になっていたのだと思います。

このIE6の仕様があったおかげで「box-sizing」が使えるようになったときに非常に早く理解することができ、また周囲に教えるときに説明が楽でした。

著者: この「box-sizing: border-box;」という記述を書くと、横幅の計算がIE6の動きになるんですよ。
周囲: ああ、なるほど！

ちなみにIE7ではこの仕様はなくなってしまい、かつIE7はbox-sizingに未対応でした。

そのため「IE7だけ表示崩れを起こしている」という事象を見つけ、box-sizingを使用しない書き方にして表示崩れを解消すると、今度はIE6で表示崩れが発生してしまった……、という泥沼に陥ってしまったことがあることをいま思い出しました (徹夜でした)。

そもそもCSS2に対応していない

CSS2の仕様は、1998年05月12日にW3Cによって勧告されました。
https://www.w3.org/TR/2008/REC-CSS2-20080411/

ちなみにIE6が世に出たのは2001年のことです^^

いまでは3年前に出たWeb仕様の勧告に対応していないブラウザをリリースすることは考えられませんが、2001年というとWindows 95発売から6年しか経っていない時代です。当時の世の中のスピード感はそれほどゆったりとしていた、ということなのでしょう。

そもそもCSS2に対応していない - CSSセレクタ編

IE6の生み出した悪い影響として、以下のCSSセレクタがなかなかWeb界隈の人たちに浸透しなかったことがあると考えています。

実はCSS2で定義されていたCSSセレクタの例
E > F
E + F
E[foo="bar"]
E[foo~="bar"]
:first-child
:before / ::before
:after / ::after
a:hover span (:hover疑似クラスの子孫要素)
p:hover (:hover疑似クラスをa要素以外にも使用可能)
など

2011年に新入社員だった私は知識を吸収する時期だったのでスムーズに学ぶことができましたが、「IE6で表示崩れが起きるから使わない」という理由で、使い方を学んでいないような人たちをちらほら見かけました。

CSS設計の良し悪しは、CSSセレクタの知識の多寡に大きく左右されると考えています。そのため2010年台後半になっても、古参のデザイナーやコーダーがこれらのCSSを使わない様子を目にすると、IE6の与えた負の影響は、いまだに継続しているように思われます。

そもそもCSS2に対応していない - プロパティ編

CSSセレクタだけではなく、こちらも、IE6は対応していませんでした。

CSS2で規定されていた仕様の例
min-width
max-width
min-height
max-height
position: fixed;
display: inline-block;
display: table;
display: table-cell;
など

IE6のサポートが切れた2014年には「レスポンシブ」でのコーディングが標準になりつつあり、上記のようなレイアウトに関する仕様への理解が一気に進んだように思われます。

しかし「レスポンシブ」が普及する前の2011年時点では、上記の仕様は覚えるべきプロパティとしての優先度は低く、IE6が対応していないということもあり、まったく使用しなくてもコーディングの仕事としては成り立っていました。

もちろんCSS3は夢のまた夢

IE6はCSS2に対応していないので、当然CSS3にも対応していませんでした。2011年当時ベンダープレフィックスを使って実装していたborde-radiusやopacityも、IE6の前では意味を成しませんでした。

CSS3で規定された仕様の例
[セレクタ]
:last-child
:not()
:nth-child()

[プロパティ]
opacity
background-size
box-shadow
box-sizing
border-radius
transform
transition
animation

[関数]
attr()
calc()
rgba()
など

IE6対応、というよりもCSS3の普及する過程で耳にする機会が増えた言葉が「プログレッシブエンハンスメント」です。

古いブラウザに合わせたコーディングしかしないと、上記のような新しい仕様による見た目のブラッシュアップがいつまでもできません。そのため文字が読めない、画像が表示されない、ボタンが押せないというような、文書として致命的な表示崩れを生じさせさえしなければ、新しい仕様の書き方を活用して見た目を美しくすることを優先してもいい、という考え方です。

見た目をきれいにしたり、工数を下げる代わりに、CSS3に対応していないIE8以前のブラウザでは、背景の形が円形ではなく矩形だったり、影がついていなかったり、アニメーションがついていなかったりすることは許容する、という合意のもとコーディングを行っていました。

また意外に思うかもしれませんが、:first-childはCSS2で、:last-childはCSS3の仕様です (IE6は両方使えないので関係ないですが^^)。

console.log()はエラーが出るので使えない

JavaScriptで挙動を確認するときに、私はalert()を結構使うのですが、console.log()を使いだしたのがここ4〜5年くらいです。なぜconsole.log()を使わなかったかを、今回記事を書きながら思い出した気がしました。

参照:
https://kanonji.hatenadiary.com/entry/20100115/1263532842
http://lifelog.main.jp/wordpress/?p=1513

setTimeout()は時間がズレる

アインシュタインの相対性理論によると、時間の流れは必ずしも一定ではなく観測する主観によって異なるとのことですが、ブラウザの世界でも同じようなことが起きるのだということを、IE6は教えてくれました。

参照:
https://qiita.com/w7tree/items/213051ecfb5c5bfcd95c#settimeout-ie-69

配列の最後のカンマを入力するとエラーが起こる

プログラミング言語としてC言語に最初に触れた私にとっては、割と違和感はなかったのですが、構文をきちんと書こう、と気を引き締めるきっかけになりました。

参照:
http://dqn.sakusakutto.jp/2012/05/javascript-last-comma-matome.html

最近では潮流が変わってきているようなので、時代に合わせて変化していかないといけないなと感じています。
Google JavaScript Style Guide

まとめ: それでもやはりIE6はすごかった

……というように、ここまで、IE6に苦しめられた話をずっとしてきましたが、それはIE6が、Windows XPとともにこの世界に広く普及していたことの裏返しでもあります。

普及していない面倒なブラウザは対応ブラウザから外せばいいのですが、IE6は無視できるシェア率ではありませんでした。2001年にリリースされて10年経ち、次世代のバージョンが3つも出ている状態で10%超え。2000年代は相当な割合であったと推測できます。

インターネットがここまで普及する過程で確実に役割を果ていたIE6。いま、それほど普及させるプロダクトを作ることは難しいと思います。

東日本大震災のときも昨今の新型コロナの渦中でも顕在化していますが、世の中に広く普及してインフラ化したモノにエラーが生じると、世間の人たちは辛辣な態度になってしまいがちです。

ノリノリでIE6のおもしろ仕様を書き連ねましたが、それは逆にIE6がインフラとして広く普及していたのだなと考えるに至りました。なのでリスペクトです。これを俗名IE6さまのご冥福をお祈りする言葉といたします。合掌。

(ちなみにカバー画像のロゴは、トレースして作ったので正式なものではないです。悪しからず。)

追記: 似たような記事があったのでメモ

当記事を書きながら見つけた、IEバグをまとめたおもしろ記事をメモしておきます。IE6のバグの回避方法をいま知る、という記憶領域の無駄遣い感がすごいのですが、どうせなら、と思いまとめておきます。

IE6がコーダーに嫌われていたなんて知らなかった
https://king.mineo.jp/magazines/special/693

IE Fuck!(ieのバグまとめ)
https://qiita.com/w7tree/items/213051ecfb5c5bfcd95c

いいなと思ったら応援しよう！