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

対策 : CSS zoom → CSS3 transform

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

Firefox4.0b5による、オリジナルのNerineの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-OperaWeb 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
});

その他・課題

エフェクトを定義するPetalについては大幅に書き直したが、やはり上の対策を注意すればいいだけである。ただ、今のところ一部Firefox4.0b5でしか動かないエフェクトなどがあるため、今後対策が必要になってくると思われる。

参考文献