私はCSSグリッドを結構なこと使ってきました。世の中にはグリッドを使ったクリエイティブなレイアウトであふれていますが、基本的なグリッドは今でも通用するデザインパターンだと感じています。サポートクエリを使えばブラウザの個別対応も可能です。今回はフォールバックにも対応した、基本的なグリッドレイアウトの実装方法を紹介します。
美しくフォールバックする
@supportsを使ったサポートクエリは、ブラウザが特定のCSSプロパティに対応しているかどうかをチェックします。サポートクエリの対応状況は次の通りです。
もしかしたらInternet Explorerが非対応なことに落胆していらっしゃるかもしれませんが、まだ諦めないでください。非対応のブラウザでは@supportsブロックは完全に無視されるので、問題ありません。
ひとつ基本的な例を見てみましょう。
グリッドに対応したブラウザでは、main要素の背景色は緑になります。非対応のブラウザでは赤です。この振る舞いからわかるのは、さまざまな機能が対応しているブラウザでのみ表示され、非対応のブラウザでは表示されず、簡素な見た目になるということです。これを利用してCSSを作ります。
基本レイアウトとフォールバック
今回は25枚のカードを使ってレイアウ
スポンサーリンク
フォールバックを考慮したグリッドレイアウト【基本形をしっかり学ぼう】
マーケティング最新
コメント