🦊

CSS の element() 関数をご存知?

2022/11/14に公開

発端

きっかけは調べ物でこちらのブログを閲覧したときです。ぜひアクセスしてみてください。9 割以上の方は何も気づかないでしょう。

Chrome のスクリーンショット
Chrome でのスクリーンショット

なぜなら Firefox 以外のブラウザでは表示されないからです。

Firefox のスクリーンショット
Firefox でのスクリーンショット

Firefox でアクセスすると、“Woah! What's this?” と書いてある右側のミニマップに気づくはずです。

Firefox でミニマップがリアルタイムで更新されているスクリーンショット
Firefox でのスクリーンショット

これの驚くところは、なんと要素の状態がリアルタイムでミニマップにも反映されます。上記スクリーンショットはテキストを選択した状態ですが、ミニマップにもテキストが選択された状態で表示されていることが確認できます。

実装

どのように実装されているかというと、なんと CSS の element() 関数のみの 1 行で実装できます。そして、Firefox は element() をサポートしている唯一のブラウザです (要ベンダープレフィックス) 。

element() を使うと、任意の HTML 要素を画像としてページ上に表示することができます。そして前述のように、その要素の状態がリアルタイムで表示されます!

使い方はとても簡単で、element() の引数に背景として使いたい要素の ID を与えるだけ。サイズなどは通常の画像のように自由に調整できます。

css
.minimap {
  background-image: -moz-element(#main);
}

用途

すごくおもしろい機能ではありますが、正直ミニマップ以外の用途はあまり思いつきません 😅

ミニマップにちょっと似ていますが、カルーセルのサムネイルとかによさそうです。

こちらの Codepen、ぜひ Firefox で開いて確認してみてほしいです。テキストや画像を変更すると、リアルタイムでサムネイルにも反映されます。

Firefox でカルーセルのサムネイルが表示されているスクリーンショット
Firefox ではこのように見えます

結論

Firefox を使おう!

Discussion