Background-position-XY support definition

Recently there was a task to determine support for background-position-x (y) in the browser.
For what? To apply the css transition there,
where the browser does not support background animation on a specific axis.

Here is a jQuery snippet:

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

Example:

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

For convenience, we add a Modernizr-style class to html to apply transition:

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

And scss code:

 .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); } } } 

If you have Modernizr connected with the addTest () plugin, here is a test in pure JS.