CSS GridのIE11をはじめ、サポートするブラウザに合わせた最小限のコードを自動生成できるツール -Grid Wiz

CSS Gridで実装する際に悩ましいのが、サポートブラウザです。
IE11をはじめ、Chrome, Safari, Edgeなどの古いバージョンにも対応したコード、最新のバージョンに対応したコードなど、サポートするブラウザに合わせて最小限のコードを自動生成できるツールを紹介します。

サイトのキャプチャ

Grid Wiz
Grid Wiz -GitHub

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の使い方は、簡単です。
下記ページでデモを試すことができます。

サイトのキャプチャ

Grid Wiz

左パネルはプレビュー、右パネルはコードの編集となっています。

サイトのキャプチャ

初期状態

左パネルをスクロールすると、さまざまなレイアウトが用意されています。

サイトのキャプチャ

さまざまなレイアウトが揃ってます。

サポートするブラウザは、下記から選択できます。
フォールバックにFlexboxを使用したり、変数が使える場合はその分コードが少なくなり、Gridをサポートしていればかなりコードが少なくなります。

用意されているサポートモード

用意されているサポートモード

※SubgridはCSS Grid level 2で、2018年現在ドラフトです。Subgridが使用できるようになると、コードは大幅に削減されます。

サポートするブラウザを反映させるには、コードの「support」を編集します。

サイトのキャプチャ

「support」の編集

後方互換性が高いほど、コードのサイズは増えます。

サイトのキャプチャ

最新だと19kb、IE11をサポートすると134kb

スマホでプレビューを見ながら、コードを作成することも可能です。

スマホで表示

Grid Wiz: スマホで表示

CSS Gridで作成されたレイアウトは、もちろんレスポンシブ対応です。

スマホで表示

レイアウトを表示

コードも同様に編集できます。

スマホで表示

コードの編集

sponsors

top of page

©2018 coliss