web-dev-qa-db-ja.com

.css（）はベンダープレフィックスを自動的に追加しますか？

私はいくつかのコードを持っています：

_$("#" + 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プロパティを変更するときに、必要なベンダープレフィックスを自動的に適用しますか？

javascriptjquerycssvendor-prefix
37
Jamesking56

@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);
51
Yotam Omer

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だと思います。

11
a better oliver

これは公式ドキュメントで現在確認されています： 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" )などを使用します。

6
user56reinstatemonica8