javascript - 如何在 :before 使用 javascript 的伪元素上检测 CSS 转换支持？

Question

我正在尝试将CSS 转换与:before选择器一起使用，目前唯一支持此功能的浏览器是 Firefox。我可以毫无问题地创建一个jQuery 后备，但我不确定如何使用这样的伪元素进行特征检测。

这是一个 JSBin，它显示了我正在使用的 HTML 和 CSS。

（......这是一个类似的SO问题，但关于使用常规元素。）

更新：哇，连IE10的平台预览版都支持这个了，那个webkit是怎么回事？！

（编辑：解决方案移至下面的答案）

Answer 1

我知道建议指出你应该使用后备而不是 polyfill，但就在你我之间，使用无条件 polyfill 对于像 CSS3 这样的前沿技术来说并不是那么糟糕。

如果您必须知道功能状态，您可以使用Modernizr，但如果您使用的是库，您不妨只使用Selectivizr并获得完整的 CSS 跨浏览器支持。

啊哈！这是来自 github 上 Modernizr 人员的一个非常好的小提琴。基本上，它检查伪元素的计算样式值是否在比过渡持续时间短的时间跨度内从其原始值更改。当然，问题在于使用 setTimeouts 的不可靠性（同步问题），以及您需要推迟一切直到 setTimeout 测试完成的事实。检查您的控制台以查看浏览器是否具有伪元素转换。

Answer 2

公平地说，即将推出的 IE10 确实支持生成内容的转换（我自己在 Windows 8 Enterprise 试用版中进行了测试）。

实际上，我确信没有必要检测这种类型的东西。过渡只是轻微的改进，而不是关键功能。因此，让过渡在更高级的浏览器中工作而不在不太高级的浏览器中工作是完全可以的。

但是如果你需要检测它，考虑到这不能直接可靠地检测到，你可以通过测试标准全局 JS 对象的存在来使用浏览器引擎检测。例如，因为我们知道 IE10 支持转换生成的内容，所以我们可以完全适应未来的过滤 IE9 和更旧的 IE条件document.all && !window.atob。Opera 可以通过检测 的存在来检测window.opera，所以当 Opera 修复这个问题时，我们可以使用window.opera && !someGlobalObjectAddedInFixedOpera条件来检测旧版本。有可能以类似的方式检测到 WebKit。

Answer 3

感谢@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 上的 gist 中的所有代码，如果有人想分叉和改进它。