CSS にベンダー プレフィックスを簡単に追加するにはどうすればよいですか?

最小限の労力でベンダー プレフィックス付き CSS

開発者として、私たちは「transform」のようなベンダー プレフィックス付き CSS プロパティを設定するという面倒な作業に遭遇することがよくあります。 ' ブラウザ間の互換性のために。従来のアプローチでは、各ベンダー プレフィックスを手動で指定する必要があるため、コードが冗長で反復的になります。もっと良い解決策はありますか?

シンプルで効果的な代替案は、ベンダー プレフィックスを自動的に処理するカスタム関数を作成することです。その方法は次のとおりです。

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

この関数は、スタイルを適用する HTML 要素、CSS プロパティ名、および必要な値の 3 つのパラメーターを受け取ります。共通のベンダー プレフィックスを反復処理し、値を設定する前に各プロパティ名に追加します。

使用法:

この関数を導入すると、ベンダー プレフィックス付き CSS が設定されます。単一行の操作になります:

setVendor(elem, "Transform", "translate3d(0,0,0)");

これにより、指定された値で「transform」プロパティが自動的に適用されます。サポートされているすべてのブラウザーのプレフィックスに適用されます。冗長なコードに別れを告げ、合理化された開発ワークフローにようこそ。

以上がCSS にベンダー プレフィックスを簡単に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。