Có thể trong JavaScript để biết liệu thuộc tính CSS có được trình duyệt khách hỗ trợ không? Tôi đang nói về các thuộc tính xoay của CSS3. Tôi chỉ muốn thực hiện một số chức năng nếu trình duyệt hỗ trợ chúng.Kiểm tra hỗ trợ thuộc tính CSS của trình duyệt bằng JavaScript?
Tôi tin rằng bạn có thể làm theo cách này:
if ('WebkitTransform' in document.body.style
|| 'MozTransform' in document.body.style
|| 'OTransform' in document.body.style
|| 'transform' in document.body.style)
{
alert('I can Rotate!');
}
Có một DOM API mới CSS.supports cho mục đích đó. FF, Opera (như supportCSS) và Chrome Canary đã triển khai phương pháp này.
Đối với khả năng tương thích qua trình duyệt, bạn có thể sử dụng Ví dụ CSS.supports polyfill
tôi:
CSS.supports("display", "table");//IE<8 return false
Tuy nhiên, bạn vẫn cần phải xác định tiền tố trình duyệt cho tiền tố thuộc tính css. Ví dụ:
CSS.supports("-webkit-filter", "blur(10px)");
Tôi đề nghị sử dụng Modernizr để phát hiện tính năng.
Bạn có thể sử dụng thư viện Modernizr.
Ví dụ về biến đổi css:
trong tệp .css;
.no-csstransforms .box { color: red; }
.csstransforms .box { color: green; }
trong tệp .js;
if (Modernizr.csstransforms) {
// supported
} else {
// not-supported
}
Có thể thử không?
var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;
Ví dụ: http://jsbin.com/etusoy/latest – starbeamrainbowlabs
Nó có thể là đáng chú ý rằng đây về mặt kỹ thuật kiểm tra xem trình duyệt hỗ trợ CSS3 'transform' phong cách và không cụ thể là' xoay() '[transform function] (https://developer.mozilla.org/en-US/docs/Web/CSS/transform#CSS_transform_functions). Trong kinh nghiệm của tôi (giới hạn), trước đây đã luôn luôn ngụ ý sau này, nhưng tôi không chắc chắn đó là một giả định đáng tin cậy (xem [câu hỏi này] (http://stackoverflow.com/questions/23528176/do-all-browsers -that-support-css3-transforms-cũng-hỗ trợ-tất cả-biến-chức năng)). – Kylok
Ví dụ làm việc: http://jsfiddle.net/dp3ueaz5/ Nhưng tôi muốn sử dụng chức năng này: http://code.tutsplus.com/tutorials/quick-tip-detect-css-support-in-browsers-with -javascript - net-16444 Tốt hơn để hiểu và nó tự động kiểm tra các tiền tố của nhà cung cấp. ;) – Dennis98