IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法

CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C

[coliss]

許諾をいただき、翻訳しました。

[kyompi]

ここまでしてgridを使うメリットがあるのかどうか。

[yasu-log]

grid-template-areasで指定し、Autoprefixer({grid: true})で変換するのが最も簡単。ベンダープレフィックスはもちろん、IE向けにgrid-template-areasが互換性のあるコードで展開される https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc

[yoshi-nkyma]

“IE11対応、CSS Gridのサンプル”

[kjtec]

“-ms”

[ryunosinfx]

IEちゃんの命はあと2年です。突然こんなこと言ってごめんね。でも本当です。 もうすぐPWAが来ます。それが終りの合図です。暫くしてWin7がサポート終了します。程なく大きめのEdge波が来るので気を付けて。 終りがきます

[kicchysan]

IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法 #HTML #CSS https://coliss.com/?p=23614