High Performance Package detection browser supports CSS3 property functions

CSS3 has been out for a long time, now to talk about whether the browser supports a CSS3 property although a bit outdated, but still can talk about, and then, the main talk is not to judge whether to support, but how to package better, why so encapsulation, welcome to spit Groove.

Into the question, to determine whether the browser supports CSS3 transition, the method is very simple, just need the following code on the line:

 in Document.body.style

Chrome and IE support document.body, but Firefox does not support, Firefox support Document.documentelement, for no DOCTYPE declaration of IE does not support document.documentelement.

So create a supported element and then determine whether the attribute exists in the style of the element:

 in document.createelement (' I '). Style

Of course this is the standard, for the old Chrome or Firefox, they do not support transition, but support prefixed transition, such as Chrome CSS written in-webkit-transition:1s; So JS also need to determine this situation, backward compatibility.

Now paste a concise package code, and then gradually parse, to avoid the complexity, can not produce a holistic view:

    functionCssproperty (attr) {varprefix = [' O ', ' Ms ', ' Moz ', ' Webkit '], length=Prefix.length, Style= Document.createelement (' i '). style; Cssproperty=function(attr) {if(attrinchstyle) {                    return true; } attr= Attr.replace (/^[a-z]/,function(val) {returnval.touppercase ();                }); varLen =length;  while(len-- ){                    if(prefix[Len] + attrinchstyle) {                       return true; }                }                return false;            }; returnCssproperty (attr); }

The next is a paragraph of explanation.

Why directly declare prefix = [' O ', ' Ms ', ' Moz ', ' Webkit ']
Instead of using string cutting prefix = ' O ms Moz Webkit '. Split ("), many others have written this way.
By the author test, the test code is as follows, in order to unnecessary impact, I two pieces of code together test and two pieces of code were observed, the results are not bad.

In order to be lazy, it is estimated that other browsers should also be similar to the results of IE do not test:

The test results are as follows, unit MS:

It is clear that the code that directly declares prefix = [' O ', ' Ms ', ' Moz ', ' Webkit '] executes more efficiently.
Look again [' O ', ' Ms ', ' Moz ', ' Webkit '] is 25 bytes, ' O ms Moz Webkit '. Split (') is 28 bytes, even in terms of file size, the former wins over the latter.

But why is it that many foreign sources, including the jquery source, are split in the form of split?

(ps:jquery-2.1.3 source 5738 line Write Cssprefix, is the direct assignment, code such as right: Cssprefixes = ["Webkit", "O", "Moz", "MS"])

The reason I guess is this: for the segmentation of the string kind of more long, the use of split is good for file byte reduction, and the execution efficiency is almost negligible after 99,999 times times reduction, but for the file is downloaded faster, although it can be ignored, but choose this side better than the selection of execution efficiency.

PS: Maybe another reason is that this code of split is easy to write, unlike arrays, a single quote, a comma square bracket .... If it's for the sake of faking it, forget it.

Return to the point, return to us here, both sides we are more than, so, undoubtedly should choose the former.

? For online some do not cache and every time to get the style code, I would like to say, the same browser environment, the next second this element of the style is changed, is it different elements it is style is also changed, is the DIV element support transition, One of the other elements doesn't support transition?!

The following code from abroad who (of course, China seems to be a lot of direct thinking on the copy): http://code.tutsplus.com/tutorials/ quick-tip-detect-css3-support-in-browsers-with-javascript--net-16444

Look closely and find out why my arrangement is this: o Ms Moz Webkit, while others are like this: Webkit Moz O MS;

Reason from 2015 browser market share leaderboard:http://tools.yesky.com/420/93749420.shtml

In the country, Opera PC version estimates no use, and it has already turned to WebKit kernel, ie will not talk about, for developers to the pit too much, see no good effect can not see it, sorry.

So, overall, the rankings are in turn chrome,firefox,ie,opera.

in the back of While loop Judging the code is in reverse, so from the point of view of execution efficiency,

Most of the situation is chrome access, so the first Judge WebKit kernel, meet the conditions to jump out of the loop, reduce execution, improve operational efficiency.

? I have more var len = length in my Code; Test with the following code, the environment is (the old version of a bit) the browser is only supported by the prefix of these two attributes (such as Firefox13), test foreign code The second and subsequent alert pop-up will be false, because it runs out of Len.

    Alert (cssproperty (' columns ' )    ) ' animation ')

The function encapsulates the following encapsulation, if the same as the foreign kind of curry encapsulation means that JS will execute the outer anonymous function after loading, and then assign the new function to supports, if the page is bound to use the detection function, then this method and the following package effect is not bad, but if the page is not necessarily use, that is, Cssproperty becomes the whole station global function, perhaps another page to use, so like the following encapsulation will not cause the function of self-execution, only the first call function, the function will be executed, and then be given a new value, the details can refer to the The third edition of JavaScript advanced programming lazy loading functions.

    function Cssproperty (attr) {         //... code         =  function(attr) {              // . .. code          };          return Cssproperty (attr);    }

Finally welcome to my GitHub, welcome star, Welcome to fork, grow together.

High Performance Package detection browser supports CSS3 property functions