Hallo,

Es ist immer schwierig, CSS-Unterstützung mit JavaScript zu testen. Grundsätzlich kann man testen, ob das Browser eine CSS-Eigenschaft kennt, indem man prüft, ob eine entsprechende Objekteigenschaft in JavaScript beim CSSStyleDeclaration-Interface existiert.

Beispiel:
var supported = 'perspectiveOrigin' in document.documentElement.style;

document.documentElement ist hier das HTML-Element. Zum in-Operator siehe: http://aktuell.de.selfhtml.org/artikel/javascript/objektabfragen/#in

Das liefert einem, ob der Browser schon einmal etwas von dieser Eigenschaft gehört hat. Es garantiert nicht, dass der Browser die Eigenschaft mit allen spezifzierten Werten korrekt umsetzt. Vielleicht unterstützt er perspective-origin, aber nur mit dem für dich uninteressanten Standardwert »flat«.

Außerdem werden bei obigem einfachen Test Vendor-Prefixes nicht beachtet. Man muss sie alle durchtesten, bis man einen Treffer findet. Den gefundenen Namen kann man nutzen, wenn man Inline-Styles per JavaScript setzen will.

Ich verwende immer diese allgemeine Funktion, die vom Aufbau der aus der Modernizr-Bibliothek entspricht.

// camelCaseHelper  
var camelize = function(str) {  
  return str.replace(/[-_\s]+(.)?/g, function(_, c) {  
    return c.toUpperCase();  
  });  
};  
  
/*  
 * Tests browser support of a given CSS property.  
 * @param property The base property to test  
 * @returns The prefixed property as a string or false if not supported.  
 */  
var testCSSProperty = function(property) {  
  var style = document.documentElement.style;  
  var stringType = 'string';  
  if (typeof style[property] === stringType) {  
    return property;  
  }  
  var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'];  
  var camelCaseProperty = property.charAt(0).toUpperCase() +  
      camelize(property.substring(1));  
  for (var i = 0, l = prefixes.length; i < l; i++) {  
    var prefix = prefixes[i];  
    var prefixedProperty = prefix + camelCaseProperty;  
    if (typeof style[prefixedProperty] === stringType) {  
      return prefixedProperty;  
    }  
  }  
  return false;  
};

Anwendungsbeispiele:

console.log('color', testCSSProperty('color'));  
console.log('animation', testCSSProperty('animation'));  
console.log('transform', testCSSProperty('transform'));  
console.log('perspective-origin', testCSSProperty('perspective-origin'));  
console.log('husseldiguggeldidu', testCSSProperty('husseldiguggeldidu'));

Gibt in Chrome z.B.

color color  
animation WebkitAnimation  
transform WebkitTransform  
perspective-origin WebkitPerspectiveOrigin  
husseldiguggeldidu false

Wenn der Browser also die Eigenschaft kennt, wird der JavaScript-Eigenschaftsname ggf. mit Präfix zurückgegeben. Andernfalls wird false zurückgegeben.

Das lässt sich natürlich auch verwenden, um eine Klasse zu setzen oder eine Umleitung auszulösen:

if (!testCSSProperty('perspective-origin')) {  
  // Keine Unterstützung. Setze z.B. eine Klasse  
}

Wie gesagt, hiermit wird nur getestet, ob der Browser die Eigenschaft aus JavaScript-Sicht kennt, nicht ob sie konkret den Wert preserve-3d erlaubt und dieser korrekt implementiert ist. Das lässt sich m.W. nicht ohne weiteres mit JavaScript prüfen. (Mit PHP sowieso nicht.)

Mathias