已應用IE9 CSS3屬性但不支持

由於各種原因，我想檢查瀏覽器是否支持CSS3動畫。我不想爲此使用modernizer。已應用IE9 CSS3屬性但不支持

我所做的是以下幾點：

var el = document.getElementById('test'); 
el.style.animation = 'example 5s'; 
el.innerHTML = el.style.animation; 
console.log(el.style);

製造一個div和動畫，並通過JS到div應用了動畫。然後我繼續閱讀div的樣式來檢查動畫屬性是否爲空（瀏覽器無法正確解釋動畫）。

除IE9以外的其他地方都可以使用。

IE9的console.log顯示我

動畫「例如5S」

，因此報告樣式設置成功，即使它不能解釋它。

這是怎麼回事？我怎樣才能確保IE9的行爲是預期的方式？

請參閱小提琴：https://jsfiddle.net/8dkevm0c/21/

來源

2016-07-25 sangrila B

你可能不想使用Modernizr，但你剛剛發現它爲什麼存在。一些測試很簡單，例如Modernizr就是這些測試的集合。但是由於種種原因，包括瀏覽器錯誤，有很多功能更難測試。 Modernizr已經發展成爲可以檢查很多這些條件的工具包。你可能不想使用Modernizr，但如果你想要一個準確的測試，你最終可能會得到與它在Modernizr中的測試代碼基本相同的代碼。 – Simba

的問題是，不支持的特性，瀏覽器只是增加了一個新的孩子用該值style對象。你可以用任何東西代替animation，nonexistentProperty或其他任何東西，然後它將在所有瀏覽器中工作。所以你不能以這種方式測試適當的支持。

的解決方案，我可恥地從該頁面偷：
http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
是在JavaScript中使用if ('property' in document.body.style)。

var el = document.getElementById('test'); 
 
if ('animation' in document.body.style) { 
 
    el.style.animation = 'example 5s'; 
 
    el.innerHTML = el.style.animation; 
 
    console.log(el.style); 
 
} 
 
else 
 
    el.innerHTML = 'Sorry, no animation';

@keyframes example { 
 
    from {background-color: red;} 
 
    to {background-color: yellow;} 
 
} 
 

 
/* The element to apply the animation to */ 
 
div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid; 
 
}

<div id="test"> 
 
    tes 
 
</div>

免責聲明：我沒有IE9在這裏，所以我不能對這個方法100％作擔保。它在最新的瀏覽器中確實可以正常工作。

來源

2016-07-25 08:42:40

我明白了。那將是我會嘗試的下一件事。我會試一試，看看它是否成功。 –

已應用IE9 CSS3屬性但不支持

回答

相關問題