3

したがって、一般的に、JS とブラウザーの検出では機能検出を使用する必要があることは十分承知しています。これがプッシュされた良い例は、jQuery 1.9のドロップです$.browser。

さらに、私が読んだすべての記事で、ブラウザー検出を使用しないようにと書かれています。

しかし、JS レイアウトで利用可能な#ofを動的に計算する必要があるという条件があり、それは利用可能なスロットの を介して行われています。"slots"calc(100%/{0}){0}#

もちろん、iPad では、.css("height", "calc(100%/3)")をプレフィックスとして付ける必要があるため、 は失敗し-webkit-ます。

それで、これが必要であることを検出するために（古いの代わりに）機能検出をどのように正確に使用する必要があるか教えてもらえます$.browser.webkitか？

4

1 に答える 1

8

ダミー要素を作成し、それをドキュメントに挿入し、 を使用し.cssText.height = 'calc(100px - 50px);'て、要素が予想される高さを持っているかどうかを確認します。すべてのベンダー プレフィックスに対してこれを繰り返します。

補足: この種の質問については、Modernizr のソース コードを参照してください。他の人は、通常、 などの機能検出スクリプトを提供していcalc.jsます。

Modernizr は機能が存在するかどうかを検出しますが、どのプレフィックスを使用する必要があるかはわかりません。以下のコードは、正しいプレフィックスを取得する方法を示しています。

var calc = (function(){
    var dummy = document.createElement('div');
    var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc'];
    for (var i=0; i<props.length; ++i) {
        var prop = props[i];
        dummy.style.cssText = 'width:' + prop + '(1px);';
        if (dummy.style.length)
            return prop;
    }
})();

// Usage example:
$('selector').css('height', calc + '(100% / 3)');

-ms-( IE はプレフィックスなしでサポートを開始したため、プレフィックスを追加しませんでした。 http://caniuse.com/calcを参照してください。)

于 2013-05-18T14:06:07.777 に答える