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?
23
A
Trả lời
35
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!');
}
6
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.
0
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
}
-1
Có thể thử không?
var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;
Các vấn đề liên quan
- 1. Kiểm tra tính tương thích của trình duyệt đối với hỗ trợ API Lịch sử HTML5?
- 2. Cách kiểm tra xem trình duyệt có hỗ trợ thuộc tính giữ chỗ gốc không?
- 3. Sử dụng Modernizr để kiểm tra hỗ trợ trình duyệt cho css calc()
- 4. Kiểm tra xem JS có hỗ trợ thuộc tính CSS không?
- 5. Khung kiểm tra nào cho Javascript hỗ trợ Kiểm tra mà không cần trình duyệt?
- 6. Phương pháp kiểm tra hỗ trợ kích thước nền css
- 7. Những trình duyệt vẫn hỗ trợ CSS biểu thức
- 8. Làm cách nào để kiểm tra trình duyệt hỗ trợ cảm ứng bằng JS/jQuery?
- 9. Hỗ trợ trình duyệt thuộc tính chiều rộng và chiều cao của getBoundingClientRect?
- 10. Kiểm tra tính tương thích của thuộc tính css cụ thể theo chương trình (thay đổi kích thước hỗ trợ trên vùng văn bản)
- 11. Hỗ trợ trình duyệt Ember.js?
- 12. Lập trình kiểm tra hỗ trợ iMessage của liên hệ
- 13. Cách Kiểm tra xem trình duyệt có hỗ trợ HTML5 không?
- 14. Hỗ trợ trình duyệt E4X
- 15. .SVG Hỗ trợ trình duyệt
- 16. Trình duyệt di động nào hỗ trợ javascript (và Ajax)?
- 17. Có cách nào để kiểm tra xem trình duyệt di động có hỗ trợ flash bằng công nghệ web không?
- 18. Trình duyệt nào hỗ trợ HTML SHORTTAG?
- 19. Trình duyệt webview có hỗ trợ tính năng html5 không?
- 20. sử dụng jquery-2.0.3 trong trình duyệt ie8: đối tượng không hỗ trợ thuộc tính hoặc phương pháp này
- 21. Hỗ trợ chéo trình duyệt của `page-break-inside: tránh;`
- 22. Thuộc tính tabIndex của trình duyệt chéo của Javascript có phải không?
- 23. Trình duyệt web nào hỗ trợ các trình duyệt web?
- 24. html5 thuộc tính bắt buộc trên các trình duyệt không được hỗ trợ
- 25. Trình duyệt nào hỗ trợ thuộc tính `<img srcset...>`?
- 26. Trình chuyển đổi JavaScript của Google Dart có hỗ trợ các trình duyệt cũ hơn không?
- 27. Kiểm tra ngôn ngữ của trình duyệt bằng PHP?
- 28. Trình duyệt của tôi không hỗ trợ "document.getElementById()"!
- 29. Trình duyệt nào chỉ hỗ trợ SSLv2?
- 30. Trình duyệt nào hỗ trợ Xpath 2.0?
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