A very simple piece of js to determine the browser's core_javascript skills

Everyone should still remember how to write JavaScript inline styles, right? (Looks like I’m talking nonsense!)

During the front-end development process, sometimes we need to determine the browser’s kernel prefix and handle different browsers differently, so we can do this.

　alert(element.style.webkitTransition); This is to get the transition value prefixed by webkit. But if the browser is not prefixed by webkit, undefined will be returned. And we can enumerate all the kernel prefixes, and then get the value of one of its CSS to make a judgment. The code is as follows:

function getVendorPrefix() {
  // 使用body是为了避免在还需要传入元素
  var body = document.body || document.documentElement,
    style = body.style,
    vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'],
    i = 0;

  while (i < vendor.length) {
    // 此处进行判断是否有对应的内核前缀
    if (typeof style[vendor[i] + 'Transition'] === 'string') {
      return vendor[i];
    }
    i++;
  }
}

Then you only need to call getVendorPrefix() to know the browser’s kernel prefix. If undefined is returned, it proves that the browser does not support CSS3 attributes, that is, there is no kernel prefix.

Everyone should know that when we write code, we can write CSS instead of JavaScript. After all, the performance of CSS will be higher than writing JS by ourselves. Therefore, we will use transition in developing some practical applications. , for example, for a simple image carousel, we can use CSS3 transition, jQuery animate or write native code ourselves, but the performance of CSS3 will definitely be higher, so we can write two sets of codes. For browsers that support CSS3 If it is not supported, use animation, and if it is not supported, use timer or animate. In this way, a better user experience can be obtained.

The above is the plug-in experience of jquery.slides.js. If there is a better method, please inform the author.