CSS の element() 関数をご存知？
発端
きっかけは調べ物でこちらのブログを閲覧したときです。ぜひアクセスしてみてください。9 割以上の方は何も気づかないでしょう。
Chrome でのスクリーンショット
なぜなら Firefox 以外のブラウザでは表示されないからです。
Firefox でのスクリーンショット
Firefox でアクセスすると、“Woah! What's this?” と書いてある右側のミニマップに気づくはずです。
Firefox でのスクリーンショット
これの驚くところは、なんと要素の状態がリアルタイムでミニマップにも反映されます。上記スクリーンショットはテキストを選択した状態ですが、ミニマップにもテキストが選択された状態で表示されていることが確認できます。
実装
どのように実装されているかというと、なんと CSS の element() 関数のみの 1 行で実装できます。そして、Firefox は element() をサポートしている唯一のブラウザです (要ベンダープレフィックス) 。
element() を使うと、任意の HTML 要素を画像としてページ上に表示することができます。そして前述のように、その要素の状態がリアルタイムで表示されます！
使い方はとても簡単で、element() の引数に背景として使いたい要素の ID を与えるだけ。サイズなどは通常の画像のように自由に調整できます。
.minimap {
background-image: -moz-element(#main);
}
用途
すごくおもしろい機能ではありますが、正直ミニマップ以外の用途はあまり思いつきません 😅
ミニマップにちょっと似ていますが、カルーセルのサムネイルとかによさそうです。
こちらの Codepen、ぜひ Firefox で開いて確認してみてほしいです。テキストや画像を変更すると、リアルタイムでサムネイルにも反映されます。
Firefox ではこのように見えます
結論
Firefox を使おう！
Discussion