0

以下は、CSS を設定する JS コードの抜粋です。

function hyphen_style(style) {
    return style.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
}


var css = "#debug_element_highlighter_container * {"+
hyphen_style(Modernizr.prefixed('transitionDuration')) + ": 2s, 2s;" + 
hyphen_style(Modernizr.prefixed('transitionProperty')) + ": transform, opacity;" + 

... 

// append a style tag to head 
var head = document.getElementsByTagName("head")[0];
var style = document.createElement("style");
style.type = "text/css";
if (style.styleSheet){
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

今ではこれで動作しますが、少し前までブラウザがスタイル プロパティtransitionPropertyのベンダー プレフィックス バージョンを使用して設定せずに協力することを拒否していたことを思い出します。欲しいです。transform-webkit-transition-property: -webkit-transform, opacity;

-webkit-transition-property: transform, opacity;. _ 将来のある時点で、一部の Webkit ブラウザーが-webkit-プレフィックスに対するチェックを突然停止することは想像に難くありません。

Modernizr (および Modernizr ドキュメント) は、それらの間の変換のためのプリミティブ (など) を提供しますが、ファッションの後のスタイルがプレフィックス付きのスタイル プロパティ名を設定する必要がprefixed()あるかどうかを確実にテストする方法は明確ではありません。transitionPropertyスタイル自体をテストして、プレフィックスを付ける必要があるかどうかを確認するのは非常に簡単です。プレフィックスのないものを割り当てて、それが「かかる」かどうかを確認するだけです。しかし、スタイル プロパティ名を指定するという特殊なケースで、この同じアプローチが機能するかどうかはわかりません。

もちろん、この種の状況が発生するたびに、CSS 宣言の 4 つの組み合わせすべてを設定するというハイパーポータブルなオーバーキル アプローチを実行することもできます。スタイル。

4

1 に答える 1

0

あなたのアプリケーションについて十分な知識がなくても、これがうまくいくかどうかはわかりませんが、http://prefixr.com/などのサイトでは、CSS を実行できる API が提供されています。必要。

于 2013-02-10T18:25:01.697 に答える