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

CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。

サイトのキャプチャ

CSS Feature Toggle -GitHub

CSS Feature Toggleの特徴

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

CSS Feature Toggleのキャプチャ

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の機能拡張

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

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

CSS Feature Toggleの使い方

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

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

  • display: flex;は、display: -disabled-flex;になります。
  • @supports (...) {}は、@-disabled-supports (...) {}になります。
  • transform: ...は、@-disabled-transform: ... {}になります。
  • width: calc(...)は、width: -disabled-calc(...)になります。

sponsors

top of page

©2019 coliss