JavaScript, a super simple method to determine the browser's kernel prefix
First of all, the method here is a super simple method. It does not mean that the code is too small, but a very simple knowledge point. You only need to know how to write JavaScript in-line styles to judge. Do you remember how to write JavaScript inline style? (It seems that I am not talking nonsense !) In front-end development, we sometimes need to determine the browser's kernel prefix and perform different processing on different browsers. Therefore, we can do this. Alert (element. style. webkitTransition); this is to obtain the transition value prefixed with webkit. However, if the browser is not prefixed with webkit, undefined is returned. However, we can enumerate all the kernel prefixes and obtain a CSS value to make a judgment. The Code is as follows: copy the code function getVendorPrefix () {// use the body to avoid passing in the element var body = document. body | document.doc umentElement, style = body. style, vendor = ['webkit', 'khtml ', 'moz', 'ms', 'O'], I = 0; while (I <vendor. length) {// check whether a kernel prefix exists. if (typeof style [vendor [I] + 'transition '] = 'string ') {return vendor [I] ;} I ++ ;}copy the code and call getVendorPrefix () to get the browser kernel prefix, if undefined is returned, the browser does not support the CSS3 attribute, that is, there is no kernel. Prefix. We should know that when writing code, we can write CSS without javascrui. After all, CSS performance is higher than self-writing JS. Therefore, transition will be used in the development of some practical scenarios. For example, for a simple image carousel, we can use the transition of CSS3, or use the animate of jQuery or write the native, but the performance of CSS3 is certainly higher, so we can write two sets of Code. For browsers that support CSS3, use animation, and for those that do not, use a timer or animate. In this way, we can get a better user experience.