私はいくつかのコードを持っています:
_$("#" + this.id).css("border-radius",this.radius + "px");
$("#" + this.id).css("-moz-border-radius",this.radius + "px");
$("#" + this.id).css("-webkit-border-radius",this.radius + "px");
_
JSONを使用して(jQueryのドキュメントに示されているように)適用するか、ベンダープレフィックスバージョンを完全に削除することで、このような行を改善しようとしています。
JQueryの.css()
メソッドは、要素のCSSプロパティを変更するときに、必要なベンダープレフィックスを自動的に適用しますか?
@zeroflagLが書いたように、jQuery 1.8.0以降、.css()
はブラウザー固有のプレフィックスを追加するようです( これを参照 )。
以前のバージョンでは、これはjQueryの.css()
によって自動的には行われません。自分で行う必要があります。または、jQueryの .cssHooks()
を使用してベンダープレフィックスを追加できます。
here :のコード例
(function($) {
if ( !$.cssHooks ) {
throw("jQuery 1.4.3+ is needed for this plugin to work");
return;
}
function styleSupport( prop ) {
var vendorProp, supportedProp,
capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = [ "Moz", "Webkit", "O", "ms" ],
div = document.createElement( "div" );
if ( prop in div.style ) {
supportedProp = prop;
} else {
for ( var i = 0; i < prefixes.length; i++ ) {
vendorProp = prefixes[i] + capProp;
if ( vendorProp in div.style ) {
supportedProp = vendorProp;
break;
}
}
}
div = null;
$.support[ prop ] = supportedProp
return supportedProp;
}
// check for style support of your property
// TODO by user: swap out myCssPropName for css property
var myCssPropName = styleSupport("myCssPropName");
// set cssHooks only for browsers that
// support a vendor-prefixed border radius
if (myCssPropName && myCssPropName !== 'myCssPropName') {
$.cssHooks["myCssPropName"] = {
get: function(elem, computed, extra) {
// handle getting the CSS property
return $.css(elem, myCssPropName);
},
set: function(elem, value) {
// handle setting the CSS value
elem.style[myCssPropName] = value;
}
};
}
})(jQuery);
jQueryはベンダープレフィックスを追加します。最初に標準プロパティの存在を確認し、ベンダーのプレフィックスバージョンが見つからないかどうかを確認します。ソースから:
// return a css property mapped to a potentially vendor prefixed property
function vendorPropName( style, name ) {
// shortcut for names that are not vendor prefixed
if ( name in style ) {
return name;
}
// check for vendor prefixed names
...
どのバージョン以降かはわかりませんが、1.8だと思います。
これは公式ドキュメントで現在確認されています: http://api.jquery.com/css/
.css( propertyName, value )
)JQuery 1.8以降、
.css()
セッターはプロパティ名のプレフィックスを自動的に処理します。たとえば、Chrome/Safariの.css( "user-select", "none" )
は_-webkit-user-select
_として設定され、Firefoxは_-moz-user-select
_を使用し、IE10は_-ms-user-select
_を使用します。
.css( propertyName )
)
.css()
メソッドは、特にブラウザーがそれらのプロパティのほとんどにアクセスするさまざまな方法(標準ではgetComputedStyle()
メソッド)を考慮して、最初に一致した要素から計算されたスタイルプロパティを取得する便利な方法ですベースのブラウザと、バージョン9より前のInternet ExplorerのcurrentStyle
およびruntimeStyle
プロパティ、およびブラウザが特定のプロパティに使用するさまざまな用語。たとえば、Internet ExplorerのDOM実装はfloatプロパティをstyleFloat
として参照しますが、W3C標準に準拠したブラウザはfloatプロパティをcssFloat
として参照します。一貫性を保つために、単純に_"float"
_を使用できます。jQueryはそれを各ブラウザーの正しい値に変換します。
ゲッターコンテキストでベンダープレフィックスについて明示的に言及していませんが、テストは簡単です。たとえば、$element.css('border-radius')
on Chromeは、_border-radius
_または_-webkit-border-radius
_として設定された値を返し、_-moz-border-radius
_として設定された値を無視します。
短縮形のプロパティについては、ブラウザ間で一貫性がないことに注意してください。
一部のブラウザでは機能しますが、省略形のCSSプロパティ(マージン、背景、境界など)の取得は保証されていません。たとえば、レンダリングされた_
border-width
_を取得する場合は、$( elem ).css( "borderTopWidth" )
、$( elem ).css( "borderBottomWidth" )
などを使用します。