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

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

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

サイトのキャプチャ

Feature Queries Manager -GitHub

Feature Queries Managerの機能

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

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

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

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

Feature Queries Managerの特徴

Feature Queries Managerのダウンロード

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

Feature Queries Manager

Feature Queries Manager -Chromeウェブストア

Feature Queries Managerの使い方

使い方は、簡単です。

  1. デベロッパーツールを開く。
  2. 「FQM」のタブをクリック。
Feature Queries Managerの使い方

Feature Queries Managerのパネル

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

sponsors

top of page

©2024 coliss