これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle

サイト構築 -CSS

Post on:2019年1月22日

CSS Feature Toggleの特徴

CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブラウザでどのようにレンダリングされるか確認できます。

CSS Feature Toggle

機能は、下記の通り。

Box Layout

Grid layout: グリッドレイアウトモデルのサポートを無効にします。
Flexbox layout: フレックスボックスレイアウトモデルのサポートを無効にします。
Box model sizing: box-sizingプロパティのサポートを無効にします。
Sticky positioning: position: sticky;のサポートを無効にします。

Visual Rendering

Transforms: 2Dと3Dのトランスフォームのサポートを無効にします。
Compositing and blending: 背景とコンテンツのブレンドモードを無効にします。
Clipping paths: clip-pathによる領域クリッピングを無効にします。
Masking: maskとmask-imageによるマスキングを無効にします。

Content Layout

Shapes: shape-insideとshape-outsideのサポートを無効にします。
Object sizing: object-fitプロパティのサポートを無効にします。

Other

Feature detection: @supports機能の検出を無効にします。
Custom properties: var()関数のサポートを無効にします。
Mathematical expressions: calc()関数のサポートを無効にします。

注意事項

最上位ドキュメントの外部CSSおよび<style>要素でのみ無効になります。
<iframes>内のスタイルは無効になりません。
インラインスタイルは無効になりません。
CSSOMを介してスタイルシートに加えられた変更は無効になりません。

対応ブラウザ

CSS Feature Toggleは、ChromeとOperaに対応しています。
※FirefoxでまだサポートされていないAPI機能が使用されています。

CSS Feature Toggleのインストール

インストールは、簡単です。

Chromeの機能拡張

レポジトリをクローン。
Chromeを起動し、機能拡張マネージャーを開き、「デベロッパーモード」（右上）を有効にします。
「パッケージ化されていない機能拡張を読み込む」をクリックし、フォルダを選択します。
デベロッパーツールを起動し、「CSS Feature」タブをクリックします。

CSS Feature Toggleのインストール完了

CSS Feature Toggleの使い方

CSS Feature Toggleは、現在のドキュメントによってロードされたスタイルシートリソースのコンテンツを取得するためにbrowser.devtools.inpectedWindow.getResources()を使用します。 getResourcesメソッドは、最上位ドキュメントの<style>要素のコンテンツを抽出するために使用されます。

抽出されたコンテンツは、機能のプロパティ/値/識別子の名前を変更する一連の正規表現を介して渡されます。元のコンテンツは、resource.setContentを使用して変更されたCSSに置き換えられます。