DOCTYPE宣言で変わるIE6の挙動

IEには互換モードと標準モードの二種類のレンダリング方式があります。CSSの仕様では、paddingwidthの外側となりますが、互換モードの場合はwidthpaddingが含まれる挙動となります。レンダリングモードはDOCTYPE宣言で切り替わります。

DOCTYPE宣言をしていないと互換モードになってしまうため、HTMLの先頭にXHTMLやHTML4.01のDOCTYPE宣言を記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML1.0 Transitionalで、標準モードになる -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML4.01の宣言だと、標準モードになる -->

当時の主流だったXHTMLではXML宣言を冒頭に書くのが正しい仕様でした。しかし、IE6はHTMLの先頭の文字列が<!DOCTYPEで始まっている必要がありXML宣言があると互換モードに切り替わってしまう残念なバグがありました。そのため、バリデーターでの100点を諦めて、敢えてXML宣言を書かないという対策がとっていたサイトが多かったように思います。

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XML宣言があると、互換モードになる -->

HTML5の<!DOCTYPE html>宣言はIEでも標準モードで動作するよう、後方互換性を意識して定義された文言です。

今のCSSではbox-sizing: border-boxを指定すれば、IEの互換モードのようにボックス幅を扱えます。互換モード的なborder-boxのほうがわかりやすいと思うのは私だけでしょうか。

IE6でfloatした要素のマージンが2倍に

FlexboxやGridが出てくるまではfloatレイアウトが主流でした。実はIE6ではfloatの方向にmarginの値が2倍となるバグがありました。初心者が必ずつまづくポイントであり、悩まされたコーダーがどれだけいたことでしょう…。

floatした方向にはmarginを設定しないとか、paddingで代用する等の対策がされていました。FlexboxやGridが主流になってきているので、過去の苦労で終わりそうですね。

JavaScriptの仕様が異なっている

HTML・CSSだけではなくJavaScriptにも苦労がありました。IEに搭載されていたのはJScriptと呼ばれる言語で、NetscapeやFirefoxのJavaScriptと使い方が少し異なっていました。そのため、必ずブラウザ分岐を意識しながらJavaScriptを書く必要がありました。

例えば、IEではイベント登録にaddEventListener()メソッドが使えずattachEvent()メソッドを使います。

// いきなりメソッドが違う
if ( isIE ) { 
  element.attachEvent("onclick", mylistener);
} else {
  element.addEventListener("click", mylistener, true);
  // addEventListenerの第3引数が必須だったのも昔の仕様
}

スタイルシートもIEとFirefoxで異なっていました。

if ( isIE ) {
  elem.style.styleFloat = "left";
} else {
  elem.style.cssFloat = "left";
}

IEとその他のブラウザの挙動が異なっていたため、JavaScriptの開発は苦労が多くありました。こういった事情もあり、ブラウザの違いを吸収して動作するJSライブラリの登場が英雄視しされ、jQueryが爆発的に流行っていきます

JavaScriptのデバッグはalertで

当時のブラウザにはデバッグ出力console.log()メソッドがないため、alert()メソッドやinnerHTMLを駆使していました。Firefoxの拡張機能Firebugが登場してからはコンソールが利用できたため、開発効率があがったのではないでしょうか。

alert("count = " + count);

▲ひたすらアラートでデバッグするしかない

console.log()メソッドはIE8から利用できるようになりましたが、F12開発者ツールを起動してないとエラーとなります。console.log()メソッドの消し忘れが残っていてIEでのみエラーで動かないということがよくありました。

console.log("ほげ"); // IE9以下でエラー

// console.log 以降のスクリプトが一切動かない

▲IEでエラーが起きると、ダイアログからエラー発生箇所を調べることになる。このUIが使いづらくて苦戦した人は多いはず

スクリプトタグの中はコメントアウトを使う

太古のブラウザにはscriptタグを解釈できないものがあります。未対応ブラウザでは恐ろしいことにscriptタグの内容がそのまま画面上のテキストとして表示されます。scriptタグの中にHTMLのコメントアウトを書くことで、script要素の内容が表示されることを防ぎます。

<script language="JavaScript">
<!--
  alert("スクリプト内容");
//-->
</script>

XHTMLではCDATAセクションを使って書くことが理想でした。

<script type="text/javascript" language="JavaScript">
//<![CDATA[
  alert("スクリプト内容");
//]]>
</script>

現代ではscriptタグを解釈できないブラウザは実質存在しないので、シンプルにスクリプトを書けますね。

<script>
alert("スクリプト内容");
</script>

IE独自の機能

IEには独自のCSSやJavaScriptの命令がありました。これはこれで便利でした。例えば、お気に入りに追加する命令が存在するため、ウェブサイトに「お気に入りに登録」といったボタンが配置されていることもありました。

// お気に入りに追加するメソッド
window.external.AddFavorite("https://ics.media/", "ICS MEDIA");

スクロールバーの色を変更することも流行っていました。個人サイトでよく利用されてましたね。

実は現行版のChromeやSafariでも、CSSでスクロールバーをカスタマイズできます。

まとめ

ウェブサイトのコーディング技術は日進月歩。SEOの必要性とセマンティクス意識への高まりからXHTMLとCSSの分離が必要になったり、スマートフォンの登場でレスポンシブウェブデザインが必要になったり、新しい時代が次世代の技術を必要としていたことが振り返れます。

今後もウェブコンテンツのコーディング手法は時代にあわせて変化していくでしょう。次の時代にリニューアルしやすい設計を意識してコーディングするのがいいかもしれませんね。JavaScriptの移り変わりについて、記事「脱jQueryのためにしたこと」も参考になると思います。