Ich versuche, CSS-Übergänge mit einem :before Selektor und derzeit der einzige Browser, der dies unterstützt ist Firefox. Ich kann problemlos einen jQuery-Fallback erstellen, bin mir jedoch nicht sicher, wie die Funktionserkennung durchgeführt werden soll mit so einem Pseudoelement.

Hier ist eine JSBin, die das HTML und CSS zeigt, mit dem ich arbeite.

( ... und hier ist eine ähnliche SO-Frage, aber zur Verwendung regulärer Elemente .)

Update: Wow, sogar die Plattformvorschau von IE10 unterstützt dies. Was ist mit diesem Webkit los?!

IE 10 Platform preview has CSS Transition support on :before

( Bearbeiten: Lösungen wurden verschoben, um unten zu antworten.)

2
travis 17 Okt. 2012 im 00:07

2 Antworten

Beste Antwort

Vielen Dank an @Asad für das Ausgraben von praktischer Code, ich konnte einen erstellen nette Lösung hier ist die jQuery-Version:

$(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"));
});

Hier ist eine Version, die jQuery nicht verwendet:

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

Hier ist der gesamte Code in einem Github-Kern, wenn jemand ihn teilen und verbessern möchte.

0
Community 23 Mai 2017 im 10:24

Um fair zu sein, unterstützt der kommende IE10 Übergänge für generierte Inhalte (selbst getestet in der Windows 8 Enterprise-Testversion).

Ich bin mir sicher, dass diese Art von Dingen nicht erkannt werden muss. Übergänge sind nur geringfügige Verbesserungen und keine kritische Funktionalität. Es ist also vollkommen in Ordnung, Übergänge in fortgeschritteneren Browsern zu verwenden, während sie in weniger fortgeschrittenen Browsern nicht funktionieren.

Wenn Sie es jedoch erkennen müssen, da dies nicht direkt zuverlässig erkannt werden kann, können Sie die Browser-Engine-Erkennung verwenden, indem Sie das Vorhandensein globaler Standard-JS-Objekte testen. Da wir beispielsweise wissen, dass IE10 die Umstellung generierter Inhalte unterstützt, können wir zukunftssicher sein Filtern Sie IE9 und ältere IEs mit der Bedingung document.all && !window.atob. Opera kann durch Testen der Existenz von window.opera erkannt werden. Wenn Opera dieses Problem behebt, können wir die Version window.opera && !someGlobalObjectAddedInFixedOpera verwenden, um ältere Versionen zu erkennen. Es ist möglich, dass WebKit auf ähnliche Weise erkannt wird.

0
Marat Tanalin 16 Okt. 2012 im 22:21