javascript Определить поддержку фонового вложения: исправлено?




jquery css (5)

Есть ли способ обнаружить поддержку браузера для background-attachment: исправлено?

Изменить: Хотя эта функция широко поддерживается в настольных браузерах, она плохо поддерживается на портативных устройствах, поэтому я хотел бы иметь возможность обнаружить эту функцию.


Вы можете посмотреть на document.body.style и убедиться, что

  • там есть свойство под названием "backgroundAttachment", и
  • Вы можете установить его на «фиксированный», и он сохранит свое значение, когда вы это сделаете.

Chrome, FF, Opera и Safari игнорируют попытки установить для свойства недопустимое значение. IE9 выдает исключение при попытке. Поэтому, если что-то произойдет, это значение определенно не поддерживается. (Если браузер просто вслепую устанавливает значение и сохраняет его, то он все равно может не работать. Но в тот момент вы действительно не сможете браузеру так много рассказать вам.)

function supportsFixedBackground() {
    try {
        var style = document.body.style;
        if (!("backgroundAttachment" in style)) return false;
        var oldValue = style.backgroundAttachment;
        style.backgroundAttachment = "fixed";
        var isSupported = (style.backgroundAttachment === "fixed");
        style.backgroundAttachment = oldValue;
        return isSupported;
    }
    catch (e) {
        return false;
    }
}

Я больше не беспокоюсь о IE6, и у меня нет другого удобного браузера, который не поддерживает фиксированные фоны, поэтому я не могу проверить настройку «исправлено».


fixed поддерживается во всех браузерах рабочего стола, кроме IE6 и старше.

Он поддерживается большинством мобильных браузеров, но вы можете увидеть некоторые несоответствия из-за обработки окна просмотра.

Source


Поддержка любого значения свойства CSS может быть обнаружена с помощью следующих шагов:

  1. создать временный элемент (например, DIV );
  2. установить значение его свойства DOM style ( element.style.backgroundAttachment в вашем случае) равным значению для проверки ( fixed в вашем случае);
  3. сравнить фактическое значение style с указанной строкой.

Примерно так в вашем случае:

var elem = document.createElement('div');
elem.style.backgroundAttachment = 'fixed';
var isSupported = 'fixed' === elem.style.backgroundAttachment;

http://www.w3schools.com/cssref/pr_background-attachment.asp

Немного внизу страницы есть картинки основных значков браузера. Изображения не отображаются серым цветом для каких-либо значков. Он говорит, что поддерживается во всех браузерах


При использовании {background-attachment: fixed} текущие мобильные устройства вообще не будут отображать фоновое изображение! Чтобы изображение отображалось на всех мобильных устройствах, необходимо проверить его поддержку и, если оно не поддерживается, установить для свойства background-attachment либо значение «начальный» (т. Е. Состояние по умолчанию), либо «прокрутку» (т. Е. Состояние по умолчанию). ,

Плохие новости:

В настоящее время невозможно напрямую и конкретно протестировать поддержку фиксированных фонов, потому что мобильные браузеры неверно сообщат, что они ее поддерживают. Чтобы увидеть эту ошибку, загрузите этот тест в мобильном браузере:

http://codepen.io/mattthew/pen/PwEqJa

function supportsCSS(value) {
    try {
        var style = document.body.style;
        if (!("backgroundAttachment" in style)) return false;
        var oldValue = style.backgroundAttachment;
        style.backgroundAttachment = "fixed";
        var isSupported = (style.backgroundAttachment === value);
        style.backgroundAttachment = oldValue;
        return isSupported;
    }
    catch (e) {
        return false;
    }
}

var el = document.getElementById('result');
var txt = '<b>This device &amp; broswer supports:</b><br>';
txt += '{ background-attachment:fixed; } : ' + supportsCSS('fixed') + '<br>';
txt +=  { background-attachment:foo; } : ' + supportsCSS('foo');

el.innerHTML = txt;

на основе кода, изначально написанного: @chao

Ограниченные возможности:

Возможно косвенное тестирование на поддержку несколькими методами.

Вариант 1: удалить фиксированный фон на маленьких экранах

Этот параметр использует медиазапрос CSS для целевых экранов меньшего размера, чтобы перезаписать стиль на устройствах с шириной экрана 1024 пикселей или меньше (устройства, которые могут отображать фиксированный фон как невидимый). Преимущества этой опции: она очень легкая и требует немного CSS:

#some_element {
     background-attachment: fixed;
}

@media all and (max-device-width: 1024px) {
     /* 
     overwrite property for devices with 
     screen width of 1024px or smaller  
     */
     #some_element {
          background-attachment: scroll;
     }
}

К сожалению, существует небольшое количество брендов планшетов с шириной экрана 1280px и 1366px, которые перекрываются с наименьшими экранами рабочего стола (отсортируйте этот список по высоте CSS). Самая безопасная игра - использовать прокручивающий фон для этой области перекрытия, чтобы фоновое изображение гарантированно отображалось. Если вы хотите быть осторожнее, используйте max-device-width: 1366px. Тем не менее, количество людей, использующих эти гигантские планшеты, намного меньше, чем количество людей с маленькими экранами ноутбуков.

Вариант 2: проверка сенсорных событий и событий мыши

Эта опция использует JS для проверки того, поддерживает ли браузер API сенсорных событий, и поэтому, скорее всего, не на устройстве с сенсорным экраном (устройство с большей вероятностью сделает фиксированные фоны невидимыми). Это тяжелый вариант. Это требует Modernizr и JQuery:

if(Modernizr.touch) {
  // this browser claims to support touch, so remove fixed background
  $('#some_element').css('background-attachment','scroll');
}

К сожалению, эта опция также имеет серую область. Некоторые браузеры дают ложное срабатывание, а некоторые дают ложное отрицание. Вы можете проверить наличие события мыши, например:

$('body').mousemove(function(event){
  // this device (touch or not) has a mouse, so revert to fixed background
  $('#some_element').css('background-attachment','fixed');
  $('body').unbind('mousemove');
});

Однако возможно, что мышь была подключена к ноутбуку с сенсорным экраном, который не поддерживает фиксированные фоны, поэтому код увеличивает риск.







modernizr