Есть ли способ обнаружить поддержку браузера для привязки к фону: исправлено?
Изменить. Хотя эта функция широко поддерживается в настольных браузерах, она плохо поддерживается на портативных устройствах, поэтому я хочу, чтобы у меня была возможность обнаружить эту функцию.
Когда вы используете {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 & 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, которые перекрываются с самыми маленькими экранами рабочего стола (sort этот список по высоте 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');
});
Однако возможно, что мышь была прикреплена к ноутбуку с сенсорным экраном, который не поддерживает фиксированные фоны, поэтому код добавляет риск.
Вы можете посмотреть document.body.style и убедиться, что
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 может быть обнаружена с помощью следующих шагов:
DIV);style DOM (element.style.backgroundAttachment в вашем случае) для проверки значения (fixed в вашем случае);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
fixed поддерживается во всех настольных браузерах, кроме IE6 и старше.
Поддерживается большинством мобильных браузеров, но вы можете увидеть некоторые несоответствия из-за обработки видовых экранов.
http://www.w3schools.com/cssref/pr_background-attachment.asp
Изображения основных значков браузера немного вниз по странице. Изображения не будут выделены серым цветом для любого из значков. В нем говорится, что он поддерживается во всех браузерах