-moz-elementを知ってますか.md

-moz-elementを知ってますか

CSS Property Advent Calendar 2013 7日目のエントリです。
-moz-elementを紹介します。
"プロパティ"つってんだろぉぉがこのスッタコがァァとか言われそうでビクビクしてましたが
TKGの人が4日目にしてセレクタを紹介していたので安心して脱線します。

-moz-elementって何よ

背景画像として "HTML要素" を使ってしまおうという変態の所業挑戦的なモジュールです。

CSS Image Values and Replaced Content Module Level 4の中で定義されています。
http://www.w3.org/TR/css4-images/

背景画像と書きましたがImage Valuesが使えるところなら背景画像じゃなくてもいいです。
list-style-imageとか、border-image-sourceとか。
あとなんかあったっけ…
まあ大体そんな感じです。

どうやって使うのよ

背景画像として使いたい要素にidを振って、

hoge{
    background:element(#id);
}

これでhogeの背景に#id要素が表示されるようになります。
HTML要素なのでアニメーションしてようが問題なし。
背景要素なのでリピートするも、マルチプルバックグランドでもOK。へっ変態っ…！

ちなみにidで指定した要素もそのまま表示されるので
背景画像の装飾用に用意した要素は親要素のheight:0とかして消しておきましょう。

対応ブラウザ

Fx4以上で-moz-付けろ！以上！
他のブラウザ？知るかっ

実際に使ってみる

変態的なモジュールながら、実践的にどう使おうか考えてみるとなかなか使いドコロがないんですよね。
けっこう前に作ったこれ以外に思い浮かばず
背景画像用の要素をemで指定することで、ブラウザ側でフォントサイズを動かしても行の罫線にかからないという
地味っ！

なんかいい使い方あったら教えて下さい

明日、8日目は1026ことてんじろうさんです。
悶絶躄地、空前絶後、天地開闢なエントリーになると思われます。刮目して待て。