molily: Welcher Browser unterstützt transform-style: preserve-3d?

Beitrag lesen

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«.

Zur Ergänzung, es gibt durchaus eine Möglichkeit, um die Unterstützung von Werten zu testen. Das macht Modernizr meines Wissens auch.

Es wird zunächst geprüft, ob der Browser die Eigenschaft kennt, und der Eigenschaftsname wird in Erfahrung gebracht. (Das habe ich bereits demonstriert.)

Dann wird der gewünschte Inline-Style gesetzt und wieder ausgelesen. Wenn ausgelesene Wert mit dem gesetzten identisch ist, geht man davon aus, dass der Wert akzeptiert wurde. Der Browser muss unbekannte und syntaktisch falsche Werte nämlich ignorieren. Beispiel:

var testCSSValue = function(property, value) {  
  var property = testCSSProperty(property);  
  if (!property) return false;  
  // Erzeuge ein Test-Element ohne Inline-Styles  
  var testElement = document.createElement('div');  
  console.log('vorher:', testElement.style[property]);  
  // … müsste einen leeren String ergeben, weil noch kein Inline-Style gesetzt wurde  
  // Setzen des fraglichen Wertes:  
  testElement.style[property] = value;  
  console.log('nachher:', testElement.style[property]);  
  // … müsste den gesetzten Wert ergeben ODER einen leeren String, wenn der Browser den Wert nicht akzeptiert hat  
  // Gleichheit prüfen  
  return testElement.style[property] === value;  
};  
  
var preserve3dSupported = testCSSValue('perspective-origin', 'preserve-3d');  
console.log('preserve3dSupported', preserve3dSupported);

Mathias