次世代Webスタイリングを追うーbackdrop-filter

これはなに？

Chrome Dev Summit 2019にて「 Next-generation web styling」というセッションがあり、それを（ときどき）追いかけています。昨年のアドベントカレンダーでは、「次世代Webスタイリングを追うーScroll Snap, :focus-within, @media (prefers-*), :is()」という記事を書きました。

本記事はその続きで、今回はCSSプロパティ「backdrop-filter」について記載します。

CSSプロパティ: filterを振り返る

backdrop-filterの紹介の前に、 CSSプロパティの filterについて振り返っていきます。

MDNによるfilterの説明:

CSS の filter プロパティは、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。

まずは、よく使われるという画像要素に filterのグラフィック効果を適用してみました。良い感じですね。

Original	Blur	Grayscale	Sepia
filter: none;	filter: blur(7px);	filter: grayscale(0.7);	filter: sepia(0.7);

またMDNの説明によると、 filterは、背景にもグラフィック効果を適用することができるようなので試してみました。
画像ではなく、キャプション要素に filterのぼかし効果を適用しています。

<style>figure{position:relative;background-color:yellowgreen;}figcaption{position:absolute;right:0;bottom:0;left:0;padding:8px16px;color:#fff;background-color:rgba(0,0,0,0.4);filter:blur(7px);}</style><figure><imgsrc="hoge.png"alt=""/><figcaption>これはキャプションです。</figcaption></figure>

意図した通りにはなりませんでした。
どうやら filterは、「背景含めて要素全体にグラフィック効果を適用する」ことはできても、「要素の背後のみにグラフィック効果を適用する」ということはできないようです。

CSSプロパティ: backdrop-filter

そんな時に活躍するのが、 backdrop-filterです。
backdrop-filterは、filterのグラフィック効果を要素の背後のみに適用することができます。

さきほどのキャプションを backdrop-filterに書き換えてみました。

<style>figure{position:relative;background-color:yellowgreen;}figcaption{position:absolute;right:0;bottom:0;left:0;padding:8px16px;color:#fff;background-color:rgba(0,0,0,0.4);backdrop-filter:blur(7px);}</style><figure><imgsrc="hoge.png"alt=""/><figcaption>これはキャプションです。</figcaption></figure>