vier

Let's be more curious.

【簡単】Firefoxでbackdrop-filterを有効にする方法

Firefoxでbackdrop-filterを有効にする方法

はじめに

皆さんはbackdrop-filterというCSSは使ってますか。

すりガラスのようなエフェクトを与えるプロパティです。

backdrop-filter


backdrop-filterのサポート状況

当ブログでは、まだ使用してないのですが、下記ブログではbackdrop-filterを使ってバックグランドをぼかすエフェクトを入れてみました。

EST

EST

背景画像がコロコロ変わるデザインテーマです


backdrop-filterは「Safari」「Chrome」「Edge」ではフルサポートとなってますが、なぜか「Firefox」はまだサポート対象外のままです。

backdrop-filter - CSS: Cascading Style Sheets | MDN

backdrop-filter - CSS: Cascading Style Sheets | MDN

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.


Firefoxでこのブログを表示すると、ヘッダーのメイン画像の背景に同じ画像が重なっているので、変な感じのヒーローヘッダーに見えます。

変な感じのヒーローヘッダー


近い将来Firefoxでもサポートされると思いますが、今すぐFirefoxでbackdrop-filterを使いたい場合は、下記方法で可能なので、お試し下さい。


Firefoxでbackdrop-filterを使う方法

実はFirefoxでbackdrop-filterは使えるのですが、デフォルトでは無効となっています。

これを設定エディター:about:configで有効に変更します。

それでは変更の手順を説明します。


変更方法

Firefoxを立ち上げたら、アドレスバーにabout:configを入力してください。

about:config


アラートが表示されますが「危険を承知で使用する」をクリックします。

危険を承知で使用する


次にbackdrop-filterを検索します。

デフォルトではfalseとなっているので右の⇔をクリックします。

右の⇔をクリック


trueに変わったら設定変更は終了です。

設定変更


それではbackdrop-filterが有効になっているか、確認してみましょう。

一度ブラウザを閉じ、再度Firefoxを立ち上げブログにアクセスします。


今度は背景がぼけて、いい感じに変わりました。

Firefoxを立ち上げ


まとめ

Firefoxでも設定をカスタマイズすることでbackdrop-filterを利用できることが確認できました。

Firefoxは早くデフォルトで使用できるようにアップデートされることを希望します。


気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

それでは今回の記事はこれでおしまい。

Next Post Previous Post
No Comment
Please Enter Comments in Light mode
comment url