現在ではWebレイアウトの定番となっているCSS Grid Layoutですが、その歴史をたどるとInternet Explorer 10（IE10）が重要な位置を占めています。ChromeやFirefoxで現在使われている標準的なdisplay: gridが普及するよりかなり前から、MicrosoftはInternet ExplorerでGrid Layoutの実装を進めていました。
結論からいうと、IE10はCSS Grid Layoutの初期仕様をベースにしたGridを先行実装したブラウザーです。ただし、IE10の実装は現在のCSS Gridと同じ仕様ではなく、-ms-ベンダープレフィックスを付けた独自構文を使用していました。
そのため「IE10はCSS3 Grid Layoutに対応していた」という説明は歴史的にはおおむね正しい一方、「現在のCSS GridがIE10でそのまま使えた」という意味に受け取ると誤りになります。ここではW3Cの当時の仕様とMicrosoftの実装をもとに、その違いを整理します。
- IE10はCSS Grid Layoutの初期仕様を先行実装した
- IE10では「display: grid」ではなく「display: -ms-grid」を使った
- 2011～2012年のW3C草案とIE10には深い関係がある
- IE10の-ms-gridと現在のCSS Gridは何が違う？
- IE10版Gridには現在の自動配置機能がなかった
- 「CSS3 Grid Layout」という呼び方は当時としては自然
- IE10のGrid実装は現在のCSS Grid普及より約5年早かった
- IE11や旧Edgeにも-ms-gridが引き継がれた
- まとめ：IE10はCSS Grid Layoutの初期草案をベースに先行実装していた
IE10はCSS Grid Layoutの初期仕様を先行実装した
CSS Grid Layoutの初期仕様は、W3C CSS Working Groupから2011年4月7日にFirst Public Working Draftとして公開されました。当時の文書名は「Grid Layout」で、現在のCSS Gridにつながる行・列ベースの2次元レイアウトが提案されています。[参照] W3C「Grid Layout Working Draft 7 April 2011」
興味深いのは、この2011年仕様の編集者としてMicrosoft CorporationのAlex Mogilevsky氏、Phil Cupp氏、Markus Mielke氏らが記載されていることです。つまりMicrosoftは単に完成したCSS Gridを後から実装したのではなく、初期仕様の策定そのものにも深く関わっていました。
そしてMicrosoftは開発中のInternet Explorer 10へGrid Layoutを実装しました。2012年のMicrosoft関連資料でも、CSS Grid Layoutは2011年4月にW3C CSS Working Groupへ提出された新しい仕様であり、当時Internet Explorer 10 Consumer Previewに実装されていたことが説明されています。
IE10では「display: grid」ではなく「display: -ms-grid」を使った
IE10のGrid Layoutは、現在一般的に使用するCSS Gridとは構文が異なります。当時は仕様がまだWorking Draft段階だったため、Microsoftのベンダープレフィックス-ms-を付けたプロパティとして実装されました。
例えばIE10でGridコンテナを作る基本的なコードは次のような形でした。
.container { display: -ms-grid; -ms-grid-columns: 200px 1fr; -ms-grid-rows: auto 1fr; }
子要素を配置するときは、例えば次のように指定します。
.item { -ms-grid-column: 2; -ms-grid-row: 1; }
Microsoftの旧ドキュメントにも-ms-grid-columnsや-ms-grid-rowsなどのプロパティが記録されており、CSS Grid Layout仕様との関連が明記されています。[参照] Microsoft Learn「msGridColumns property」
2011～2012年のW3C草案とIE10には深い関係がある
2011年4月の最初のWorking Draftでは、Gridを使ってページを行と列へ分割し、Grid LineやGrid Cellを基準として要素を配置する考え方がすでに示されていました。
その後、仕様は2012年3月22日にもWorking Draftとして更新されています。この文書でもMicrosoftのAlex Mogilevsky氏、Phil Cupp氏、Markus Mielke氏らが編集者として記載されています。[参照] W3C「CSS Grid Layout Working Draft 22 March 2012」
さらに2012年11月6日のWorking Draftでも仕様変更が続いています。つまりIE10が開発されていた時期は、CSS Gridそのものがまだ活発に変更されていた段階でした。[参照] W3C「CSS Grid Layout Working Draft 6 November 2012」
このため、IE10に搭載されたGridは「後に標準化された現在のCSS Gridの古いバージョン」と考えると理解しやすいものの、仕様変更が大きかったため、現在の構文と単純な互換性があるわけではありません。
IE10の-ms-gridと現在のCSS Gridは何が違う？
現在のCSS Gridでは、例えば次のようなコードを書くことができます。
.container { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
一方、IE10ではdisplay: gridではなくdisplay: -ms-gridを使い、列は-ms-grid-columns、行は-ms-grid-rowsで定義しました。
| 目的 | IE10系の構文 | 現在のCSS Grid |
|---|---|---|
| Gridコンテナ | display: -ms-grid |
display: grid |
| 列の定義 | -ms-grid-columns |
grid-template-columns |
| 行の定義 | -ms-grid-rows |
grid-template-rows |
| 子要素の列位置 | -ms-grid-column |
grid-columnなど |
| 子要素の行位置 | -ms-grid-row |
grid-rowなど |
| 自動配置 | 現在のGridと同等の機能なし | あり |
つまり名称が似ているだけでなく基本思想にも共通点がありますが、現在のGridには自動配置をはじめ、IE10版にはなかった機能や異なる構文が多数あります。
IE10版Gridには現在の自動配置機能がなかった
現在のCSS Gridでは、Gridコンテナ内へ要素を置くだけでも自動配置アルゴリズムによってGrid Itemが配置されます。またgrid-template-areasなどを使った柔軟なレイアウトも可能です。
これに対してIE10の初期Grid実装では、現在のCSS Gridと同じ自動配置機能を利用できませんでした。そのため基本的には各要素に対して-ms-grid-rowや-ms-grid-columnを指定し、どの行・列へ置くか明示する必要がありました。
例えば現在のCSS Grid向けコードへ単純に-ms-を追加するだけでは、IE10対応にならない場合があります。レイアウトによっては、各子要素の位置を個別に指定する必要があります。
「CSS3 Grid Layout」という呼び方は当時としては自然
古いWeb制作の記事では「CSS3 Grid Layout」「CSS3 Grid」「CSS Grid Layout」といった表記が混在しています。これは当時、CSSの各新機能がCSS3関連モジュールとして紹介されることが多かったためです。
実際、2011年のW3C文書のURLはWD-css3-grid-layoutとなっており、文書内でも他のCSS3モジュールへの参照があります。そのため、IE10について「CSS3 Grid Layoutを先行実装した」と説明することは当時の文脈として不自然ではありません。
ただし現在は、CSS全体を単純に「CSS3」「CSS4」のような一枚岩のバージョンとして扱うより、CSS Grid Layout Module Level 1など、モジュールごとの仕様として考えるのが適切です。
IE10のGrid実装は現在のCSS Grid普及より約5年早かった
IE10が登場したのは2012年です。一方、現在の構文に近いCSS Gridが主要ブラウザーで一気に利用可能になったのは2017年前後です。
そのためIE10は、現在一般的なCSS GridがChrome、Firefox、Safariなどで広く利用されるようになるより何年も前に、Gridによる2次元レイアウトを実装していたことになります。
「Internet ExplorerはCSS Gridへの対応が遅かった」というイメージは、この機能については正確ではありません。むしろIE10はGrid Layoutの非常に早い実装例でした。ただし、早期実装だったからこそ、その後大幅に変化した標準仕様との互換性問題を抱えることにもなりました。
IE11や旧Edgeにも-ms-gridが引き継がれた
IE10で実装された古いGridはIE11にも引き継がれ、さらにMicrosoft Edgeの初期バージョンにも互換性のため残りました。
そのため2010年代後半のWeb制作では、モダンブラウザー用のdisplay: gridと、IE11向けのdisplay: -ms-gridを併記する実装が行われることがありました。
しかし両者は完全に同じ機能ではないため、単なるベンダープレフィックスの違いと考えると問題が発生します。現在のCSS Gridで作った複雑なレイアウトを、そのままIE10・IE11用-ms-gridへ置き換えられるとは限りません。
まとめ：IE10はCSS Grid Layoutの初期草案をベースに先行実装していた
IE10は、CSS Grid Layoutの初期Working Draftを背景としたGrid Layout機能を早期に実装したブラウザーです。2011年4月にはW3CでGrid LayoutのFirst Public Working Draftが公開されており、その編集にはMicrosoftのメンバーも参加していました。
IE10ではdisplay: -ms-grid、-ms-grid-columns、-ms-grid-rows、-ms-grid-column、-ms-grid-rowなどの-ms-付き構文を使用します。これは現在使われているdisplay: gridなどとは異なる、初期仕様を反映した実装です。
したがって「IE10でCSS3 Grid Layout仕様の初期草案が先行実装されたか」という歴史的な問いには、「はい。ただし現在のCSS Gridそのものではなく、初期仕様に基づく-ms-プレフィックス付きの旧Grid実装だった」と整理するのが最も正確です。
IE10の実装と現在のCSS Gridは同じ系譜にありますが、その後W3C仕様が大きく発展したため構文・機能には重要な違いがあります。古いIE10向けCSSを解析するときは、現在のGrid仕様ではなく2011～2012年前後のWorking DraftとMicrosoftの-ms-grid仕様を参照すると理解しやすくなります。
コメント