on:2019年1月22日sponsorsCSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブラウザでどのようにレンダリングされるか確認できます。Toggle機能は、下記の通り。グリッドレイアウトモデルのサポートを無効にします。フレックスボックスレイアウトモデルのサポートを無効にします。box-sizingプロパティのサポートを無効にします。sticky;のサポートを無効にします。2Dと3Dのトランスフォームのサポートを無効にします。背景とコンテンツのブレンドモードを無効にします。clip-pathによる領域クリッピングを無効にします。maskとmask-imageによるマスキングを無効にします。shape-insideとshape-outsideのサポートを無効にします。object-fitプロパティのサポートを無効にします。@supports機能の検出を無効にします。var()関数のサポートを無効にします。ドキュメントの外部CSSおよび<style>要素でのみ無効になります。<iframes>内のスタイルは無効になりません。インラインスタイルは無効になりません。CSSOMを介してスタイルシートに加えられた変更は無効になりません。Toggleは、ChromeとOperaに対応しています。※FirefoxでまだサポートされていないAPI機能が使用されています。Toggleのインストールインストールは、簡単です。Chromeの機能拡張レポジトリをクローン。Chromeを起動し、機能拡張マネージャーを開き、「デベロッパーモード」(右上)を有効にします。「パッケージ化されていない機能拡張を読み込む」をクリックし、フォルダを選択します。Feature」タブをクリックします。Toggleは、現在のドキュメントによってロードされたスタイルシートリソースのコンテンツを取得するためにbrowser.devtools.inpectedWindow.getResources()を使用します。getResourcesメソッドは、最上位ドキュメントの<style>要素のコンテンツを抽出するために使用されます。抽出されたコンテンツは、機能のプロパティ/値/識別子の名前を変更する一連の正規表現を介して渡されます。元のコンテンツは、resource.setContentを使用して変更されたCSSに置き換えられます。-disabled-flex;になります。