Czy w języku JavaScript możliwe jest sprawdzenie, czy właściwość CSS jest obsługiwana przez przeglądarkę klienta? Mówię o właściwościach rotacji CSS3. Chcę wykonywać niektóre funkcje tylko wtedy, gdy obsługuje je przeglądarka.Sprawdź wsparcie CSS w przeglądarce za pomocą JavaScript?
Wierzę, że można zrobić to w ten sposób:
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!');
}
Jest nowy DOM API CSS.supports do tego celu. FF, Opera (as supportsCSS) i Chrome Canary implementują już tę metodę.
Dla kompatybilności z różnymi przeglądarkami można używać CSS.supports polyfill
Przykład:
CSS.supports("display", "table");//IE<8 return false
Ale trzeba jeszcze określić prefiks przeglądarki dla poprzedzenie właściwości CSS. Na przykład:
CSS.supports("-webkit-filter", "blur(10px)");
Proponuję użyć Modernizr do wykrywania funkcji.
Możesz użyć biblioteki Modernizr.
Przykład transformacji css:
w pliku .css;
.no-csstransforms .box { color: red; }
.csstransforms .box { color: green; }
w pliku .js;
if (Modernizr.csstransforms) {
// supported
} else {
// not-supported
}
Można spróbować?
var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;
Przykład: http://jsbin.com/etusoy/latest – starbeamrainbowlabs
Warto może zauważyć, że to technicznie sprawdza czy przeglądarka obsługuje CSS3 'transform' styl i nie specjalnie się obracać (') '[przekształcać funkcja] (https://developer.mozilla.org/en-US/docs/Web/CSS/transform#CSS_transform_functions). W moim doświadczeniu (ograniczona), były zawsze domniemanych ten ostatni, ale nie jestem pewien, czy to jest wiarygodne założenie (patrz [pytanie] (http://stackoverflow.com/questions/23528176/do-all-browsers -that-support-css3-transforms-również-wsparcie-all-transform-funkcja)). – Kylok
przykład robocza: http://jsfiddle.net/dp3ueaz5/ Ale wolałbym użyć tej funkcji: http://code.tutsplus.com/tutorials/quick-tip-detect-css-support-in-browsers-with -javascript - net-16444 Lepiej zrozumieć i automatycznie sprawdza prefiksy dostawców. ;) – Dennis98