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のテストがあります。