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




jquery css (4)

Есть ли способ обнаружить поддержку браузера для 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, и у меня нет другого удобного браузера, который не поддерживает фиксированные фоны, поэтому я не могу проверить настройку «исправлено».


Поддержка любого значения свойства 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;

Я думаю, что у меня есть решение для всех устройств. Можно определить поддержку clip , поэтому я сделал это и внес изменения в DOM, когда clip поддерживается. Если это не так, он возвращается к background-attachment: fixed;

Смотрите код на https://codepen.io/AartdenBraber/pen/gGmdWK


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

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





modernizr