Firefoxのブラウザ設定でbackdrop-filterを有効にする方法

backdrop-filter要素の背後にぼかしや色変化などのグラフィック効果を適用することができるCSSプロパティです。

ブラウザ対応状況は、以下のようになっています。

“backdrop-filter” | Can I use…

主要ブラウザのうちGoogle Chrome, Safari, Edgeでは対応済みなのですが、IEとFirefoxでは対応されていませんね。

しかし、Firefoxではブラウザ設定を変えることでbackdrop-filterを有効にすることができますので、その方法を紹介していきます。

目次

Firefoxでbackdrop-filterを有効にする手順

backdrop-filterを有効にする方法は、以下の通りです。

Can be enabled by setting the layout.css.backdrop-filter.enabled and gfx.webrender.all preference to true in about:config.

“backdrop-filter” | Can I use…

この手順を簡単に訳すと、

  1. about:configを開く
  2. layout.css.backdrop-filter.enabledtrueにする
  3. gfx.webrender.alltrueにする

ということになります!

それでは、実際の手順を見ていきましょう。

手順1. Firefoxでabout:configを開く

STEP
Firefoxを開く

まずはFirefoxを開いてください。

STEP
検索窓に[about:config]を記入

[about:config]という文字を入力し、エンターを押します。

STEP
[危険性を承知の上で使用する]をクリック

警告が表示されるので、[危険性を承知の上で使用する]をクリックします。

これでabout:configを開くことができました!

このようなページが表示されていればOKです。

手順2. layout.css.backdrop-filter.enabledをtrueにする

STEP
[backdrop-filter]を検索する

[設定名を検索]の検索バーに、[backdrop-filter]を記入して検索します。

すると、layout.css.backdrop-filter.enabledの設定が出てきます。

デフォルトではfalseになっていますね。

STEP
切り替えボタンをクリックしtrueにする

画面の右端にある、矢印が2つ重なっているボタンをクリックします。

これでlayout.css.backdrop-filter.enabledtrueにすることができました!

手順3. gfx.webrender.allをtrueにする

STEP
[gfx.webrender.all]を検索する

手順2と同じ方法で、[gfx.webrender.all]と入力し検索します。

こちらもデフォルトではfalseになっているはずです。

STEP
切り替えボタンをクリックしtrueにする

画面右端の切り替えボタンをクリックします。

これでgfx.webrender.alltrueにすることができました。

以上の手順で、Firefoxでもbackdrop-filterの効果を適用することができます!

【まとめ】Firefoxのブラウザ設定でbackdrop-filterを有効にする方法

Firefoxのブラウザ設定で、backdrop-filterを有効にする方法を紹介しました。

  1. Firefoxのブラウザでabout:configを開く
  2. layout.css.backdrop-filter.enabledtrueにする
  3. gfx.webrender.alltrueにする

上記の手順を実行することで、簡単に設定することができましたね。

しかしこの方法の問題点は、上記の設定をしていないユーザーの画面ではbackdrop-filterが適用されないということです。

はやくデフォルトでサポートされるようになればいいのですが、しばらくは機能クエリ@supportsなどを使用してフォールバックを用意する必要がありそうですね。

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる