【レビュー】Firefox 4、任意の要素を背景にする機能-moz-element導入 | エンタープライズ

【レビュー】

Firefox 4、任意の要素を背景にする機能-moz-element導入

後藤大地　 [2010/08/25]

印刷

Firefox web browser - Faster, more secure & customizable

Firefox 4正式版へ向けた最新ベータ版Firefox 4 Beta 4が公開された。Beta 4には目を引く変更も多いが、それ以外に注目すべき機能が実装されている。-moz-element()だ。この機能はFirefoxを使ったWebページやWebアプリケーションの開発においてそのUI能力の高さを劇的に引き上げる可能性がある。どういった機能か、どういった使い方ができるかがFirefox 4: Drawing arbitrary elements as backgrounds with -moz-elementで紹介されている。

-moz-element()は任意の要素を背景として使えるようにするための機能。すでに背景画像を指定する機能はあるが、これが画像に限らずすべての要素に対して適用できるものになっている。どういったことができるかはサンプルを見るとわかりやすい。Firefox 4: Drawing arbitrary elements as backgrounds with -moz-elementに掲載されているサンプルを試しやすいように単一のHTMLファイルにまとめたものと、そのレンダリング結果を次に掲載する。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Firefox 4 -moz-element()デモ</title>
</head>
<body>
<p id="bg1" style="background: darkorange; color: white;  width: 300px; height: 40px;">この要素は背景画像としても使われます。</p>
<p style="background: -moz-element(#bg1); padding: 20px 10px; font-weight: bold;">この要素は#bg1を背景画像として使っています。</p>
</body>
</html>

サンプルをFirefox 4 Beta 4でレンダリングしたケース

サンプルをFirefox 3.6.8でレンダリングしたケース

p要素そのものがほかのp要素の背景になっていることがわかる。-moz-element()を使うにあたって抑えておくべきポイントは次のとおり。

-moz-element()で描画される要素はオンザフライで動作する。もとの要素が変更されれば、-moz-element()で描画される部分も変化が起こる。
-moz-element()で描画される要素はただのビジュアルであって、-moz-element()で描画される要素に対する変更が元の要素に適用されることはない。
-moz-element()で描画された要素をさらに-moz-element()で描画しようとしても、ループとして検出されそれは機能しない仕組みになっている。
元の要素を表示されないようにすれば、-moz-element()で描画される要素も表示されなくなる。元の要素のみを隠したい場合には別の要素で上から上書きするようにして消す必要がある。ただし、image、canvas、videoはこの規則からはずれる。

Firefox 4: Drawing arbitrary elements as backgrounds with -moz-elementに掲載されているサンプルをFirefox 4 Beta 4およびFirefox 3.6.8でレンダリングすると、-moz-element()がどのように機能しているのかを理解しやすい。


Firefox 4 Beta 4でレンダリングしたケース	Firefox 3.6.8でレンダリングしたケース。-moz-elementで指定した要素が表示されていないため、右部のプレビューが真っ黒


Firefox 4 Beta 4でレンダリングしたケース	Firefox 3.6.8でレンダリングしたケース。-moz-elementが機能していないため反射エフェクトが表示されていない

ある要素を別の要素の背景画像として利用できるということは、さまざまなビジュアルエフェクトを簡単に実現できることを意味している。CSS3で導入されるグラデーション、アニメーション、トランスポート、トランジッション、影付け、丸角レンダリングなどの機能を併用すれば、簡単な記述で効果的なエフェクトを実現できる。Mozillaはこの機能をW3C CSSワーキンググループへ提出するとしており、ほかのブラウザでも利用できる機能にすることを目指している。