JS檢測CSS屬性瀏覽器是否支援的多種方法
一、原生css.supports語法
返回布林值true或者false，用來檢測是否支援某css屬性。
語法
CSS.supports(propertyName, value);
CSS.supports(supportCondition);引數
- propertyName
- 字串。用來檢測的CSS屬性名。
- value
- 字串。用來檢測的CSS屬性值。
- supportCondition
- 字串。用來檢測的CSS宣告、表示式或者語法。
案例
例如，檢測瀏覽器是否支援CSS filter濾鏡，則可以：
result = CSS.supports('filter', 'blur(5px)');
result = CSS.supports('filter: 5px'); // 錯誤語法，返回false 例如在Chrome瀏覽器下返回：
CSS.supports()還可以用來檢測表示式，例如CSS變數語法：
result = CSS.supports('--username: zhangxinxu');
result = CSS.supports('(--username: zhangxinxu)');結果如下圖所示：
可以看到有沒有括號都支援。
CSS.supports()還支援@supports規則，支援邏輯表達，例如：
result = CSS.supports('width: fit-content or width: -webkit-fit-content');
result = CSS.supports('(width: fit-content) or (width: -webkit-fit-content)'); 可見，此時括號是必須的：
相容性
和CSS@supports規則相容性一樣，Edge12+支援。
尷尬的現狀
實際開發的時候，需要使用到對CSS檢測場景，往往都是針對低版本的IE瀏覽器，例如IE9-IE11。
於是尷尬的事情出現了，低版本的IE瀏覽器並不支援瀏覽器原生支援的CSS.supports()方法，於是，我們的實際需求並沒有因為這個新的API而得到解決，不得不求助於其他方法。
二、js賦值再取值的檢測方法
這是我張鑫旭 https://www.zhangxinxu.com在實際專案中經常使用的一種方法，原理很簡單，當瀏覽器不支援某個CSS屬性的時候，就算你強制設定，獲取的計算值也不會是你設定的屬性值，還是檢測瀏覽器是否支援CSS filter濾鏡的例子。
我會這麼處理：
document.head.style.filter = 'blur(5px)';
result = window.getComputedStyle(document.head).filter == 'blur(5px)';我們看下上面程式碼在實際瀏覽器中的表現，首先是支援的Chrome瀏覽器，result的值是true：
然後是不支援的IE11瀏覽器，result的值是false：
此方法原理很簡單，相容性也非常好，實現的關鍵點就是使用getComputedStyle這個IE9+支援的DOM API方法，不能使用dom.style.xxxx直接獲取。
如果是想要實現類似or或者and邏輯，例如帶私有字首那種，可以下面這樣處理，正則匹配關鍵的部分：
document.head.style.width= 'fit-content';
document.head.style.width= '-moz-fit-content';
result = /fit-content/.test(window.getComputedStyle(document.head).width);例如Firefox瀏覽器下的結果：
相容性
IE9+
注意點
getComputedStyle()方法返回的是計算值，很多時候和設定的屬性值並不同。
例如設定行高為小數，在IE瀏覽器下返回就是px計算值。
又或者設定background屬性值，結果返回的是background兄弟姐妹一大家子值：
document.head.style.background = 'paint(abc)';
result = /paint/.test(window.getComputedStyle(document.head).background);
// reseult值是true
window.getComputedStyle(document.head).background
// "rgba(0, 0, 0, 0) paint(abc) repeat scroll 0% 0% / auto padding-box border-box"需要使用模糊匹配才行。
廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com
三、其他方法
核心思想類似：
document.head.setAttribute('style', 'filter: blur(5px)');
result = !!document.head.style.filter;Chrome和IE下驗證檢測結果圖：