ブラウザの core_javascript スキルを判断するための非常に単純な js の一部

JavaScript インライン スタイルの書き方を誰もがまだ覚えているはずですよね? (ナンセンスなことを言っているようです!)

フロントエンド開発プロセスでは、ブラウザーのカーネル プレフィックスを決定し、異なるブラウザーを異なる方法で処理する必要がある場合があります。そのため、これを行うことができます。

alert(element.style.webkitTransition); これは、webkit が接頭辞として付けられた遷移値を取得するためのものです。ただし、ブラウザーに webkit というプレフィックスが付いていないと、unknown が返されます。そして、すべてのカーネル プレフィックスを列挙し、その CSS の 1 つの値を取得して判断することができます。コードは次のとおりです:

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() を呼び出すだけで済みます。unknown が返された場合は、ブラウザが CSS3 属性をサポートしていない、つまりカーネル プレフィックスが存在しないことがわかります。

コードを書くとき、JavaScript の代わりに CSS を書くことができることは、結局のところ、自分で JS を書くよりも高いということを誰もが知っているはずです。そのため、いくつかの実用的なアプリケーションの開発では、transition を使用します。たとえば、単純な画像カルーセルの場合、CSS3 トランジション、jQuery アニメーションを使用するか、ネイティブ コードを自分で作成することもできますが、CSS3 のパフォーマンスは間違いなく高いため、CSS3 をサポートしていないブラウザの場合は 2 セットのコードを作成できます。サポートされている場合はアニメーションを使用し、サポートされていない場合はタイマーまたはアニメーションを使用します。このようにして、より良いユーザーエクスペリエンスを得ることができます。

上記は jquery.slides.js のプラグイン体験です。もっと良い方法があれば作者にお知らせください。