NerineをFirefox4で動くよう改造してみる

NerineはHTML5/JavaScript製のプレゼンテーションソフトであるが、Webkitでしか動作しない構造となっている。Firefox4(Beta)でCSS3 transitionsに対応する機会に、Firefox4対応用にgithub上でフォークした。基本的に行ったのは以下の2つの対策。

対策 : CSS zoom → CSS3 transform

Firefox(やOpera)はCSS zoom 対応していない。そのためindex表示（↑キーを押す）すると、縮小されずにクリッピングされた形になってしまう。

CSS zoomをCSS3 transformのscale()関数に置き換える。IE&Webkit独自機能であるCSS zoomと違って、CSS3 transformはCSS3規格であるので、これに対応すれば現代のモダンなブラウザで正しく表示される。

対策 : CSS vender-specific extension

多くのCSS3は、まだ規格策定(Working)のため、正式ではない。そのため多くのウェブブラウザの実装では vender-specific extension (vender prefix) なる接頭辞をつけて使っている。オリジナルの Nerine では、-webkit-しか付けていない。

主な vender-specific extension
接頭辞	対象ブラウザ	備考
`-webkit-`	Webkit (Safari,Chrome)	Webkit CSS styles
`-moz-`	Mozilla (Firefox)	CSS_Reference:Mozilla_Extensions
`-ms-`	IE9
`-o-`	Opera	Web specifications supported in Opera Presto 2.3

このようなものに他の各種ブラウザの vender prefix をつけた。なお、使用しているブラウザ以外の vender prefix は無視されるので、何も考えずに追記すればよい。

   -webkit-transition: opacity 0.5s linear;
+  -moz-transition: opacity 0.5s linear;
+  -ms-transition: opacity 0.5s linear;
+  -o-transition: opacity 0.5s linear;

なお、JavaScriptでアクセスする場合はラクダ文字(camelCase)にしなければならないが、このときはWebkitTransition,MozTransitionと書く。以上を踏まえるとCSS zoomをJavaScriptで設定しているコードは下記のようになった：

+    var transform = ["scale(", (scale-4)/100.0, ",", (scale-4)/100.0, ")"].join('');
     $('article > section').css({
-      width: [scale-2, '%'].join(''),
-      height: [scale-2, '%'].join(''),
-      zoom: [scale-4, '%'].join(''),
+      WebkitTransform: transform,
+      MozTransform: transform,
+      MsTransform: transform,
+      OTransform: transform,
+      transform: transform,
+      WebkitTransformOrigin: "0 0",
+      MozTransformOrigin: "0 0",
+      MsTransformOrigin: "0 0",
+      OTransformOrigin: "0 0",
+      transformOrigin: transform,
       margin: '2%',
       padding: 0
 });