Определение поддержки background-position-XY

Недавно встала задача определить поддержку background-position-x(y) в браузере.
Для чего? Для того, чтобы применить css transition там,
где браузер не поддерживает анимацию background по определенной оси.

Вот сниппет для 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, чтобы применить transition:

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

Если у вас подключен Modernizr с плагином addTest(), вот тут есть тест на чистом JS.