我将如何在：使用javascript的伪元素之前检测CSS转换支持？

我正在尝试使用选择器，目前唯一支持它的浏览器是Firefox。我可以毫无问题地创建一个元素，但我不确定如何使用这样的伪元素进行特征检测

（）

更新：哇，即使是IE10的平台预览版也支持这一点，那网络工具包是怎么回事

---

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

我知道建议您应该使用回退，而不是多边形填充，但就在您和我之间，使用无条件多边形填充对于CSS3这样的前沿产品来说并不可怕

如果您必须知道功能状态，您可以使用，但是如果您使用的是库，那么您也可以跨浏览器使用并获得完整的CSS支持

---

啊哈！是github的现代人的一把很好的小提琴。基本上，它检查伪元素的计算样式值是否在短于转换持续时间的时间跨度内从其原始值更改。当然，问题在于使用setTimeout（同步问题）的不可靠性，以及您需要将所有操作推迟到setTimeout测试完成。检查您的控制台，查看浏览器是否有伪元素转换。

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

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

但如果您需要检测它，考虑到无法直接可靠地检测到它，您可以通过测试标准全局JS对象的存在来使用浏览器引擎检测。例如，因为我们知道IE10支持转换生成的内容，所以我们可以使用

document.all&&！window.atob

条件。Opera可以通过测试

window.Opera

的存在来检测，因此当Opera解决此问题时，我们可以使用

window.Opera&！someGlobalObjectAddedInFixedOpera

检测旧版本的条件。WebKit也有可能以类似的方式被检测到。

多亏了我的挖掘，我才想出了一个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"));
});

$（函数（）{
var isTransitionSupported=（函数（pseudo、transProp、transPropStart、transPropEnd）{
var id=pseudo+transProp+'-'+（新日期（））.valueOf（），
前缀=['o'、'ms'、'moz'、'webkit']，
prop=“transition:“+transProp+”99s线性；”，
allprops=（函数（）{
var props=“”；
对于（var l=前缀.length；l-->）{
道具+=“-”+前缀[l]+“-”+道具；
}
返回道具+道具；
}()),
$css=$（“”）+
“#”+id+“{位置：绝对；左：-999em；}”+
“#”+id+”：“+pseudo+”{显示：块；内容：'M'；“+transProp+”：“+transPropStart+”；}”+
“#”+id+”.t:“+pseudo+”{“+allprops+transProp+”：“+transPropEnd+”；}”+
""),
$bct=$（''）；
$css.appendTo（“head”）；
$bct.附录（“正文”）；
试一试{
//在进行任何更改之前获取样式值
getComputedStyle（$bct[0]，'：'+pseudo）.getPropertyValue（transProp）；
$bct.addClass（“t”）；
//更改后的测试样式
return（window.getComputedStyle（$bct[0]，'：'+pseudo）.getPropertyValue（transProp）！==transPropEnd）；
}捕获（e）{}
返回false；
}（“之前”、“宽度”、“0px”、“1000px”）；
});

:

var isTransitionSupported=（函数（pseudo、transProp、transPropStart、transPropEnd）{
var ticks=（新日期（））.valueOf（），
id=pseudo+transProp+'-'+ticks，
前缀=['o'、'ms'、'moz'、'webkit']，
prop=“transition:“+transProp+”99s线性；”，
allprops=（函数（）{
var props=“”；
对于（var l=前缀.length；l-->）{
道具+=“-”+前缀[l]+“-”+道具；
}
返回道具+道具；
}()),
body=document.body | | document.createElement（'body'），
node=document.createElement（'div'），
css=“”+
“#”+id+“{位置：绝对；左：-999em；}”+
“#”+id+”：“+pseudo+”{显示：块；内容：'M'；“+transProp+”：“+transPropStart+”；}”+
“#”+id+”.t“+ticks+”：“+pseudo+”{“+allprops+transProp+”：“+transPropEnd+”；}”+
"",
bct=document.createElement（'div'），
isSupported=false；
bct.id=id；
node.innerHTML+=css；
子节点（bct）；
body.appendChild（节点）；
试一试{
//在进行任何更改之前获取样式值
getComputedStyle（bct，“：”+pseudo.getPropertyValue（transProp）；
bct.className+=“t”+记号；
//更改后的测试样式
isSupported=（window.getComputedStyle（bct，，：'）+pseudo.getPropertyValue（transProp）！==transPropEnd）；
}捕获（e）{}
node.parentNode.removeChild（节点）；
支持退货；
}（“之前”、“宽度”、“0px”、“1000px”）；
document.documentElement.className+=“”+（支持ISTransition？“”：‘：‘否’）+“伪trans”；

---

如果有人想改进它，我想知道这是否可行，很遗憾Firefox是唯一支持它的。事实上，它看起来很不错。不过，这个可怕的互联网爆炸者名副其实。哎哟，链接错了，fixd。@另请参阅已知问题#2：除Firefox外，任何浏览器的：：before和：：after伪元素当前都不支持。您应该给出答案并接受它，非常有用，谢谢：）

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";