background-position-XYのサポート定義

最近、タスクはブラウザでbackground-position-x（y）のサポートを決定することでした。
何のために？ そこでCSSの移行を適用するには、
ブラウザは特定の軸でのバックグラウンドアニメーションをサポートしていません。

jQueryのスニペットを次に示します。

(function($){ //   background-position-x var bgx = (function(el){ return typeof el.css('backgroundPositionX') !== 'undefined'; }(/*   */)); }(jQuery)); 

例：

 (function($){ //   background-position-x var bgx = (function(el){ return typeof el.css('backgroundPositionX') !== 'undefined'; }($('.tabs li:first-child'))); //   background  css }(jQuery)); 

便宜上、htmlにModernizrスタイルのクラスを追加して、遷移を適用します。

 (function($){ $('html').addClass(bgx ? 'bgx' : 'no-bgx'); }(jQuery)); 

そしてscssコード：

 .tabs { ul { li { background-position: 2px 8px; background-repeat: no-repeat; background-image: url('../img/marker.gif'); .no-bgx &:hover { background-position-x: 5px; } .no-bgx & { @include transition(all 0.3s ease-out); } } } 

ModernTestrをaddTest（）プラグインに接続している場合、 ここに純粋なJSのテストがあります。