브라우저의 core_javascript 기술을 결정하는 매우 간단한 js입니다.

아직도 JavaScript 인라인 스타일을 작성하는 방법을 모두가 기억하고 있어야겠죠? (말도 안 되는 소리 하는 것 같네요!)

프런트엔드 개발 과정에서 때로는 브라우저의 커널 접두사를 결정하고 다양한 브라우저를 다르게 처리해야 하는 경우가 있으므로 이를 수행할 수 있습니다.

　alert(element.style.webkitTransition); 이는 webkit이라는 접두어가 붙은 전환 값을 가져오는 것입니다. 그러나 브라우저에 webkit이라는 접두사가 붙지 않으면 정의되지 않은 값이 반환됩니다. 그리고 우리는 모든 커널 접두사를 열거한 다음 CSS 중 하나의 값을 얻어 판단을 내릴 수 있습니다. 코드는 다음과 같습니다.

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++;
  }
}

그러면 브라우저의 커널 접두사를 알기 위해 getVendorPrefix()만 호출하면 됩니다. undefed가 반환되면 브라우저가 CSS3 속성을 지원하지 않는다는 것, 즉 커널 접두사가 없음을 증명합니다.

코드를 작성할 때 JavaScript 대신 CSS를 작성할 수 있다는 점을 모두가 알아야 합니다. 결국 CSS의 성능은 JS를 직접 작성하는 것보다 높기 때문에 몇 가지 실용적인 애플리케이션을 개발할 때 전환을 사용할 것입니다. 예를 들어 간단한 이미지 캐러셀의 경우 CSS3 전환, jQuery 애니메이션을 사용하거나 네이티브 코드를 직접 작성할 수 있지만 CSS3의 성능은 확실히 더 높으므로 CSS3를 지원하는 브라우저의 경우 두 세트의 코드를 작성할 수 있습니다. 지원하면 애니메이션을 사용하고, 지원하지 않으면 타이머나 애니메이션을 사용하세요. 이러한 방식으로 더 나은 사용자 경험을 얻을 수 있습니다.

위 내용은 jquery.slides.js의 플러그인 경험입니다. 더 좋은 방법이 있으면 작성자에게 알려주세요.