2

セレクターでCSSトランジションを使用しようとしていますが、現在これをサポートしているブラウザーはFirefoxのみです。問題なくjQueryフォールバック:beforeを作成できますが、そのような疑似要素を使用して機能検出を行う方法がわかりません。

これが、私が使用しているHTMLとCSSを表示するJSBinです。

（...そしてこれも同様のSOの質問ですが、通常の要素の使用についてです。）

更新：うわー、IE10のプラットフォームプレビューでさえこれをサポートしています、そのWebkitはどうなっていますか？！

IE 10プラットフォームプレビューでは、：beforeでCSS移行がサポートされています

（編集：ソリューションは以下の回答に移動しました）

4

3 に答える 3

1

推奨事項では、ポリフィルではなくフォールバックを使用する必要があると述べていますが、CSS3のような最先端のものでは、無条件のポリフィルを使用することはそれほどひどいことではありません。

機能のステータスを知る必要がある場合は、Modernizrを使用できますが、とにかくライブラリを使用している場合は、Selectivizrを使用して、完全なCSSサポートクロスブラウザーを取得することもできます。

あはは！これは、GitHubにいるModernizrの人々からの非常に素晴らしいフィドルです。基本的に、疑似要素の計算されたスタイル値が、遷移期間よりも短い期間内に元の値から変更されたかどうかをチェックします。もちろん、問題はsetTimeoutsの使用の信頼性の低さ（同期の問題）と、setTimeoutテストが完了するまですべてを延期する必要があるという事実です。コンソールをチェックして、ブラウザに疑似要素の遷移があるかどうかを確認します。

于 2012-10-16T20:14:52.030 に答える
0

公平を期すために、今後のIE10は、生成されたコンテンツの移行をサポートします（Windows 8 Enterpriseの試用版で自分自身をテストしました）。

実際、この種のものを検出する必要はないと確信しています。トランジションはわずかな改善であり、重要な機能ではありません。したがって、より高度なブラウザではトランジションを機能させても、それほど高度ではないブラウザではトランジションを機能させなくてもまったく問題ありません。

ただし、検出する必要がある場合は、直接確実に検出できないことを考慮して、標準のグローバルJSオブジェクトの存在をテストすることでブラウザエンジンの検出を使用できます。たとえば、IE10は生成されたコンテンツの移行をサポートしていることがわかっているため、IE9および古いIEをdocument.all && !window.atob条件付きで将来にわたってフィルタリングできます。Operaはの存在をテストすることで検出できるwindow.operaため、Operaがこの問題を修正するときに、window.opera && !someGlobalObjectAddedInFixedOperaconditionを使用して古いバージョンを検出できます。WebKitも同様の方法で検出できる可能性があります。

于 2012-10-16T22:11:10.777 に答える
0

便利なコードを掘り下げてくれた@Asadのおかげで、jQueryバージョンの素晴らしい解決策を思いつくことができました。

$(function() {
  var isTransitionSupported = (function (pseudo, transProp, transPropStart, transPropEnd) {
    var id = pseudo + transProp + '-' + (new Date()).valueOf(),
        prefixes = ['o', 'ms', 'moz', 'webkit'],
        prop = "transition: " + transProp + " 99s linear;",
        allprops = (function () {
          var props = "";
          for (var l = prefixes.length; l--;) {
            props += "-" + prefixes[l] + "-" + prop;
          }
          return props + prop;
        }()),
        $css = $("<style>" +
                 "#" + id + "{position:absolute;left:-999em;}" + 
                 "#" + id + ":" + pseudo + "{display:block;content:'M';" + transProp + ":" + transPropStart + ";}" + 
                 "#" + id + ".t:" + pseudo + "{" + allprops + transProp + ":" + transPropEnd + ";}" + 
                 "</style>"),
        $bct = $('<div id="' + id + '" />');

      $css.appendTo("head");
      $bct.appendTo("body");

      try {
        // get style value before any changes
        window.getComputedStyle($bct[0], ':' + pseudo).getPropertyValue(transProp);

        $bct.addClass("t");

        // test style after changes
        return (window.getComputedStyle($bct[0], ':' + pseudo).getPropertyValue(transProp) !== transPropEnd);
      } catch (e) {}
      return false;
    }("before", "width", "0px", "1000px"));
});

jQueryを使用しないバージョンは次のとおりです。

var isTransitionSupported = (function (pseudo, transProp, transPropStart, transPropEnd) {
    var ticks = (new Date()).valueOf(),
        id = pseudo + transProp + '-' + ticks,
        prefixes = ['o', 'ms', 'moz', 'webkit'],
        prop = "transition: " + transProp + " 99s linear;",
        allprops = (function () {
            var props = "";
            for (var l = prefixes.length; l--;) {
                props += "-" + prefixes[l] + "-" + prop;
            }
            return props + prop;
        }()),
        body = document.body || document.createElement('body'),
        node = document.createElement('div'),
        css = "<style>" +
                    "#" + id + "{position:absolute;left:-999em;}" + 
                    "#" + id + ":" + pseudo + "{display:block;content:'M';" + transProp + ":" + transPropStart + ";}" + 
                    "#" + id + ".t" + ticks + ":" + pseudo + "{" + allprops + transProp + ":" + transPropEnd + ";}" + 
                    "</style>",
        bct = document.createElement('div'),
        isSupported = false;

    bct.id = id;
    node.innerHTML += css;
    node.appendChild(bct);
    body.appendChild(node);

    try {
        // get style value before any changes
        window.getComputedStyle(bct, ':' + pseudo).getPropertyValue(transProp);

        bct.className += "t" + ticks;

        // test style after changes
        isSupported = (window.getComputedStyle(bct, ':' + pseudo).getPropertyValue(transProp) !== transPropEnd);
    } catch (e) {}

    node.parentNode.removeChild(node);

    return isSupported;
}("before", "width", "0px", "1000px"));

document.documentElement.className += ' ' + (isTransitionSupported ? '' : 'no-') + "pseudo-trans";

誰かがそれをフォークして改善したいのであれば、githubの要点にあるすべてのコードがここにあります。

于 2012-10-18T02:30:18.907 に答える