- PVSM.RU - https://www.pvsm.ru -

Определение поддержки 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 [1] с плагином addTest() [2], вот тут [3] есть тест на чистом JS.

Автор: M1nstrel


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/css3/18036

Ссылки в тексте:

[1] Modernizr: http://modernizr.com

[2] addTest(): http://modernizr.com/docs/#addtest

[3] вот тут: https://github.com/Modernizr/Modernizr/pull/608