3

したがって、ユーザーのブラウザーが CSS グラデーションをサポートしているかどうかを検出する必要があります。それだけです。Modernizr を使用しますが、勾配検出だけを含めても、自分で行うのに比べて無駄です。

私が理解しているように、これはそれを行う方法です。

  1. DOM に追加されない要素の作成
  2. すべてのベンダー プレフィックスbackground-imageを使用して に設定linear-gradient
  3. を読んbackground-imageでチェックしgradient、まだそこにあるかどうかを確認します

私は Modernizr のソースを理解できませんでしたが、彼らがこれで行っていることの核心は何ですか? だから私は自分でそれを行うことができます。http://modernizr.com/download/#-cssgradients-prefixes

4

2 に答える 2

10

参照用に、使用した正確なコードを追加するだけです。ここにあります：

var mElem = document.createElement('modern'),
    mStyle = mElem.style;

mStyle.backgroundImage = "linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-o-linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-moz-linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-webkit-linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-ms-linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-webkit-gradient(linear, left top, right bottom, from(#9f9), to(white))";

if (mStyle.backgroundImage.indexOf("gradient") == -1) alert("Gradients are not available. Get a better browser and try again.");

これは Modernizr の実装とまったく同じように機能しますが、さまざまなグラデーションを自動的に実行するのではなく、手動で書き出しただけです。このような小さな機能検出のために自動的に実行する必要はありませんでした。

于 2012-06-02T00:40:47.433 に答える
4

彼らのテストは本当に基本的なもので、それを抽出するだけです:

    function supports_gradients() {
    /**
     * For CSS Gradients syntax, please see:
     * webkit.org/blog/175/introducing-css-gradients/
     * developer.mozilla.org/en/CSS/-moz-linear-gradient
     * developer.mozilla.org/en/CSS/-moz-radial-gradient
     * dev.w3.org/csswg/css3-images/#gradients-
     */

    var str1 = 'background-image:',
        str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));',
        str3 = 'linear-gradient(left top,#9f9, white);';

    setCss(
         // legacy webkit syntax (FIXME: remove when syntax not in use anymore)
          (str1 + '-webkit- '.split(' ').join(str2 + str1)
         // standard syntax             // trailing 'background-image:'
          + prefixes.join(str3 + str1)).slice(0, -str1.length)
    );

    return contains(mStyle.backgroundImage, 'gradient');
};

これが機能するには、これらのメソッドの独自のバージョン (たとえば、jQuery から) を持っていない限りcontains()、andも抽出する必要があります。setCss()

于 2012-06-01T15:57:35.707 に答える