JavaScript, a super-simple way to determine the browser's kernel prefix

First of all, the method here is to say super simple method, not refers to the code super Little, but with a very simple knowledge point, as long as you know how to write JavaScript in-line style can be judged.

You should remember how to write JavaScript inline style? (It seems that I am a nonsense!) ）

In the front-end development process, sometimes we need to determine the browser's kernel prefix, different browsers to do different processing, so we can do so.

alert (element.style.webkitTransition); This is to get the transition value prefixed with WebKit. However, if the browser is not prefixed with webkit, the undefined is returned. We can make a judgment by enumerating all the kernel prefixes and then getting the value of one of its CSS. The code is as follows:

function Getvendorprefix () {//The body is used to avoid the need to pass in elements    varBODY = Document.body | |document.documentelement, Style=Body.style, Vendor= ['WebKit','khtml','Moz','Ms','o'], I=0;  while(I <vendor.length) {//here to determine if there is a corresponding kernel prefix        if(typeofStyle[vendor[i] +'Transition'] ==='string') {            returnVendor[i]; } I++; }}

Then just call Getvendorprefix () to know the browser's kernel prefix, if the return undefined proves that the browser does not support the CSS3 attribute, that is, there is no kernel prefix.

We should know that in the process of writing code, we can write CSS does not write JAVASCRITP, after all, the performance of CSS will be higher than their own writing JS, so, we in the development of some practical should, will use the transition, such as a simple picture carousel, We can use CSS3 's transition, or we can use the jquery animate or write native, but the performance of CSS3 is certainly higher, so we can write two sets of code, for the browser that supports CSS3 use animation, The timer or animate is used instead of the support. In this way, a better user experience can be obtained.

The above is to see Jquery.slides.js plug-in experience, if there is a better way, please inform the author.