CSS Browser Selector を使ってみる : The Trap of Web Design

CSS Browser Selector を使ってみる

こりゃらくちんだ（笑）CSS Browser Selector（← PHP バージョン、JavaScript バージョン、WordPress プラグインバージョン）

同じことは自分もすでにやってますが、判別処理は先にしといて、必要時に class 付加するってな手法。これみて、そっか、html で全部指定しちゃえば良いんだ！と。ホントにちょっとした発想転換ですね。

JavaScript バージョンは、JavaScript 外すと効かない点で、ちょいと使いどころは考えるべきだと思います。といっても、そのへんの処理を JavaScript 依存にしてしまうことに対して、以前よりも全然平気ですし、考えなくて良いか。例えば、jQuery とか使っていて、スタイル関係を JS 内で判別して変更する必要があることはムチャクチャ多く、そんな場合はたぶん記述が楽になる。

とここまで書いて思いつきましたが、jQuery プラグインにしちゃえ、ってことで…。

;(function(jQuery) {
    jQuery.fn.cssbs = function () {
    /*
    ここに CSS Browser Selector のソースコードまるごといれる
    */
    };
})(jQuery);

上記を jquery.cssbs.js としてリンク。あと、そのあとのスクリプトで、

jQuery(function(jQuery){
    jQuery('html').cssbs();
});

あとはどの手法でも、例えば、display: inline-block; つかうときの場合、スタイルシート上で、

.example {
  display: inline-block;
  width: 200px;
}
.ie7 .example, 
.ie6 .example {
  display: inline;
  zoom: 1;
}
.ff2 .example {
  display: -moz-inline-box;
}
.ff2 .example div {
  display: block;
  width: 200px;
}

なんて書けます。

あと自分用に速攻で Nucleus CMS のプラグインにしちゃいました。そのままのキーワード送出と、あと doIf 対応。需要があるかどうかわかりませんが、置いときます。

Nucleus CMS 用プラグインのダウンロード

NP_CSSbrowserSelector.php.zip[30clicks]

使い方

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" class="<%CSSbrowserSelector%>">

doIf 機能

<%if(CSSbrowserSelector,ie6)%><!-- for IE6 setting --><%else%><!-- for except IE6 --><%endif%>

…てな感じです。

自分の中ではやっぱり「環境に応じて必要な処理しかしたくない。ブラウザ別にスタイルシート分けて、必要なときだけ適用する」というほうが美しいと思ってるから、どちらかというと、doIf のほうが使う。ていうか、そのために書いたの、

function doIf($key){
    return strstr($this->css_browser_selector(), $key) ? 1 : 0;
}

だけですけど。

いずれにせよ、判別処理の見通しがしやすいし、ラクチンっす！

2010-04-11 13:59 | WebCreate | ichiro | permalink

Comments

コメントはまだありません

The Trap of Web Design

The Trap of Web Design