CSS GridのIE11をはじめ、サポートするブラウザに合わせた最小限のコードを自動生成できるツール -Grid Wiz
Post on:2018年11月16日
sponsors
CSS Gridで実装する際に悩ましいのが、サポートブラウザです。
IE11をはじめ、Chrome, Safari, Edgeなどの古いバージョンにも対応したコード、最新のバージョンに対応したコードなど、サポートするブラウザに合わせて最小限のコードを自動生成できるツールを紹介します。
Grid Wizの特徴
Grid WizはCSS Gridで実装する際に、サポートするブラウザに合わせて最小限のコードを自動生成するツールです。デスクトップだけでなく、スマホやタブレットでも実際の表示を確認しながら、利用できます。
スマホで、コードベースのWeb制作をする日が近いかもしれませんね。
-
- CSS Gridのレイアウトをサポート
- CSS Gridで実装するさまざまなレイアウトをサポートしています。
-
- CSS Grid Level 2のSubgrid
- SubgridとはGridアイテムをGridコンテナにし、より柔軟にレイアウトできます。
-
- プログレッシブエンハンスメント
- サポートするブラウザに合わせて、最小限のコードを自動生成。
-
- ライセンス
- MITライセンスで、個人でも商用でも無料で利用できます。
CSS Gridの各プロパティの使い方について、下記を参考にしてください。
Grid Wizの使い方
Grid Wizの使い方は、簡単です。
下記ページでデモを試すことができます。
左パネルはプレビュー、右パネルはコードの編集となっています。
初期状態
左パネルをスクロールすると、さまざまなレイアウトが用意されています。
さまざまなレイアウトが揃ってます。
サポートするブラウザは、下記から選択できます。
フォールバックにFlexboxを使用したり、変数が使える場合はその分コードが少なくなり、Gridをサポートしていればかなりコードが少なくなります。
用意されているサポートモード
※SubgridはCSS Grid level 2で、2018年現在ドラフトです。Subgridが使用できるようになると、コードは大幅に削減されます。
サポートするブラウザを反映させるには、コードの「support」を編集します。
「support」の編集
後方互換性が高いほど、コードのサイズは増えます。
最新だと19kb、IE11をサポートすると134kb
スマホでプレビューを見ながら、コードを作成することも可能です。
Grid Wiz: スマホで表示
CSS Gridで作成されたレイアウトは、もちろんレスポンシブ対応です。
レイアウトを表示
コードも同様に編集できます。
コードの編集
sponsors
