CSSグリッドの説明サイトで記述されているCSSは新仕様のものが殆どです。IEに対応したベンダープレフィックス(-ms)を併述しているサイトもたまにはありますが少数です。IE用に旧仕様を学ぼうにも、このようにサイトが少ないうえ、マイクロソフトはwindows10のブラウザをedgeとしIEは今後は消滅の道を辿ることとなるため、今から旧仕様を含んだ記述を覚えるのはナンセンスです。
こうした中、IEを使っているが新仕様で記述されたCSSグリッドを試したいとか、既存の新仕様で記述されたCSSグリッドで書かれた資産をIE対応にしたいというときもあると思います。このためには、IE用にベンダープレフィックスを付けることになりますが、それも一筋縄ではいきません。Gulpのautoprefixerを利用すると手軽にいうこともできるようですが、細かな点では対応ができないようです。
本ソフト「CSSグリッドIEプレフィックスエディター」ではIE用にベンダープレフィックを追加し、一定の記述規則に則り新仕様の記述をIE対応としますが、本ソフトは新たにCSSグリッドを書くことを主眼としていますので次のように制限があります。
・プロパティで使えないものがあります
本ソフトで新規にCSSグリッドを作成する場合は、IE、本ソフトで対応可能なプロパティ、書式で記載しますので問題はありませんが、既存の新仕様で書かれたCSSグリッドを本ソフトでIEプレフィクスを追加する場合は、新仕様のみにしか存在しないプロパティや使い方があり、既存のCSSグリッドを完全に旧仕様に対応させることは理屈上不可能です。また、新、旧仕様に共通なプロパティであってもソフトが対応しないものもあります。しかし、大部分のプロパティには対応していますので、次の点に注意することで手作業と併用し、効果的にIEプレフィックスを追加することができます。
・記述ができるプロパティ
grid-template-columns
grid-template-rows
grid-row-start
grid-column-start
grid-row
grid-column
align-self
justify-self
grid-template-areas
grid-template
grid-area
・対応していない記述
・プロパティについて
旧仕様では使えるプロパティは限られていますが上記以外にも使えるプロパティはあります。しかし、本ソフトで使えるプロパティは上記に限定されるものです。
・記述方法について
CSSグリッドでは同じ動作であっても様々な表記が可能となっています。本ソフトは、使えるプロパティであっても記述方法が限られます。少なくとも次の記述はできません。(全ての記述方法を熟知している訳ではありませんので、これ以外にもあると思います。)
・区切り線のマイナス表記
・区切り線の命名とその使用
・grid-row: span 2; grid-column: span 2などのspan指定。
・grid-template-columns: repeat(5, 100px);などのrepeat指定。
・grid-area: 1 / 3、grid-area: 2 / 2 / 3 / 4;などのエリア直接指定。
・grid-template 100px 200px / 300px 400pxのような一括記載。
・grid-row-end: : auto grid-column-end: autoなどのauto表記。
・grid-template-rows:
100px
200px;
のような複数行に分けての記載。
新仕様の方が確かにプロパティ等は潤沢にありますが、例えば、grid-template-columnsなどで設定していないセルを指定した場合の列幅等の設定プロパティなど、もともと記述するCSSグリッドの設計を適切にすることで回避できるものもあり、旧仕様でも十分に使えるものです。特に、Flexboxなど他のCSSとの併用で記述する場合は(こうした場合が殆どでしょうが)あくまでも基本レイアウト作成に使うに過ぎず、その限りでは旧仕様でできないことは、まずないと言って良いでしょう。とは言ってもgrid-row-gapは欲しいところですが、marginで代用できますし、細いグリッドを用いるという手もありますのでこれで良しとします。何れにしても、CSSグリッドを使う際には、今は、最新ブラウザでしか表示されない新仕様でゴリゴリ書くよりも、使用者の多いIEにいかに対応させるかを考えるべきものと思います。