ブラウザ間のDOM CSSの差異を吸収する

最近、CSS3の2D Transformsを使ってみた。当初はWebKit専用(-webkit-付き)で書いてたんだが、JavaScriptから制御しようと思うとWebKitCSSMatrixがWebKitにしかないので、Firefoxなどの他のブラウザではJavaScriptが動かなくなる。CSS宣言なら単純に無視されるだけなので、これは好ましくない。調べてみると、Mozillaも2D Transformsを実装してるらしい。ならそれを使えばいいじゃん、となるのだが、コードで分岐するのは面倒だ。そこで、こんな感じのコードを書いた。

if (navigator.userAgent.indexOf("Gecko") != -1) {
  CSSStyleDeclaration.prototype.__defineGetter__("transform",function() {
    return this.MozTransform;
  });
  CSSStyleDeclaration.prototype.__defineSetter__("transform",function(x) {
    this.MozTransform = x.toString();
  });
  CSSMatrix = function() {
    /*略*/
  };
  CSSMatrix.prototype = {
    /*略*/
  };
}
if (navigator.userAgent.indexOf("WebKit") != -1) {
  CSSStyleDeclaration.prototype.__defineGetter__("transform",function() {
    return this.webkitTransform;
  });
  CSSStyleDeclaration.prototype.__defineSetter__("transform",function(x) {
    this.webkitTransform = x;
  });
  CSSMatrix = WebKitCSSMatrix;
}

このコードを読み込んでおけば、JavaScriptからの操作は、2D Transformsのドラフトにあるような方法でできる。 ただ、CSSに書くプロパティ名はどうしようもない。

一応完全なコードも以下に載せておく。

スポンサーサイト



テーマ : プログラミング | ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

minoki

Author:minoki
好きなプログラミング言語:
Haskell,Lua
GitHubアカウント
Twitter

最新記事
月別アーカイブ
カテゴリ
検索フォーム