林檎の味しかしないCSSプロパティ「backdrop-filter」について

時間が流れるのは早いもので、iOS 7が最初のお披露目になってから2年半が経ちました。夜中にWWDCを見ていて、あのフラットなデザインに興奮したことを今でも覚えています。

iOS 7以降のiOS及びOSXのデザインで多用されるエフェクトにブラーがあると思います。

最近だと、

通知センターの背景とか

スイッチャー表示のホーム画面の背景とかに使われてますよね。

OSの表示として使っていただく分には問題ないのですが、

Musicアプリの上のバーのように、アプリのUIのパーツとしてもよく使われていますよね。

1ユーザーとしては綺麗なのでいいんですが、ハイブリッドなアプリの開発をしている身としては、これは再現しづらいパーツでしかなくて、正直困っていました。

CSSでブラーをかける方法としては、filter:blur();がありますが、これは適用するエレメントにブラーがかかるため、上の写真のように要素の背景にホバーをかけるという用途で使うためにはかなりのハックが必要になります。

そこで、rgbaで誤魔化すなどの対応を泣く泣くしてきたわけですが、背景にfilterをかけるCSSプロパティが最新のSafariにだけ実装されているんですね。知らなかった(゚д゚)!

それがbackdrop-filterというプロパティです。

「Appleが自分のサイトで使うために実装したんじゃないか」と思うほど対応状況は悲惨です。世界レベルで見ると消費税くらいの人しか見れません。

See the Pen backdrop-filter 1 by Shun Kashiwa (@shumbo) on CodePen.

簡単なデモを書いてみました。

Safariで見るとこんな感じであります。

リアルタイムでblurの処理をしているにも関わらず思ったより重くならないです。特にMacのSafariなら。

また、別にblurだけでなく、通常のfilterで使える効果を全て使えるので、

See the Pen backdrop-filter 2 by Shun Kashiwa (@shumbo) on CodePen.

こんな、なんか偏光板を連想させるエフェクトを使えたりします。

このプロパティ、通常のWebサイトで使うことは対応状況として厳しですが、CordovaでiOS 9向けに作るアプリなどでは、全然使ってもいいのかなと思います。