- PVSM.RU - https://www.pvsm.ru -
Недавно встала задача определить поддержку 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
Нажмите здесь для печати.