[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張

Post on:2018年5月25日

sponsors

CSSでレイアウトをする際、最近の主流はFlexbox、そしてCSS Gridも増えてきました。
そんな中、サポートされていないブラウザ用に必要になるのがフォールバックです。

検証するのが面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefox対応の機能拡張を紹介します。

Feature Queries Managerの機能

Feature Queries Managerはその名の通り、@supports機能クエリに記述されたCSSのスタイルを管理して、切り替えることができます。

例えば、レイアウトをFlexboxで実装する場合、Flexboxをサポートしているブラウザのみに適用されるように下記のようにスタイルを定義すると思います。

@supports (display: flex) {
  div{Flexboxをサポートしている場合のスタイル}
}

@supports (display: flex) {

div{Flexboxをサポートしている場合のスタイル}

}

このスタイルは「display: flex」をサポートする場合のみスタイルを適用します。逆にサポートされていない場合のみ適用する場合は、下記のように定義します。

@supports not(display: flex) {
  div{Flexboxをサポートしていない場合のスタイル}
}

@supports not(display: flex) {

div{Flexboxをサポートしていない場合のスタイル}

}

Feature Queries Managerはこのオンとオフを簡単に切り替えることができます。

Feature Queries Managerは、ChromeとFirefoxの機能拡張として利用できます。

使い方は、簡単です。

Feature Queries Managerのパネル

パネルの左側にはページ上のすべての機能クエリが表示され、右側にはそれらの機能クエリ内のスタイルが表示されます。
あとは、検証したい機能クエリのチェックボックスをオン・オフするだけです。オフの状態では@supports機能クエリは無効化され、オンにすると@supports機能クエリは有効化されます。