Определение поддержки 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 }
}

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

Автор: M1nstrel