Хочу сделать сайт, который будет корректно выглядеть в большинстве браузеров. Но на пути к созданию столкнулся с проблемой кроссбраузерности. То есть, один браузер поддерживает данное CSS, а другой — нет.
Как я могу знать, поддерживает ли данный браузер указанное CSS свойство? Можно ли это узнать на одном CSS?
Ответ
С помощью одного CSS
Узнать, поддерживает ли данный браузер указанное CSS свойство, можно через CSS директиву под названием @supports
Эта директива работает так же, как и @media.
/* Узнаём, поддерживает ли браузер display: flex; */
@supports (display: flex) {
/* Стили */
}
Так же можно установить свойства при условии, если браузер не поддерживает указанное CSS свойство
/* Узнаём, поддерживает ли браузер display: flex; */
@supports not (display: flex) {
/* Стили */
}
Ещё можно проверить несколько свойств сразу, используя оператор and
/* Узнаём, поддерживает ли браузер display: flex; и flex-wrap: wrap; */
@supports (display: flex) and (flex-wrap: wrap) {
/* Стили */
}
А если нам нужно хотя бы одно рабочее свойство, можно использовать оператор or
/* Узнаём, поддерживает ли браузер display: flex; */
@supports (display: flex) or (display: -webkit-flex) {
/* Стили */
}
Но нужно учесть, что данная директива новая и в IE вообще не работает.
Так же, для обеспечения, какой никакой, кроссбраузерности, можете использовать вендорные префиксы
С помощью JS
Данную задачу, с помощью JS, я знаю, как решить двумя способами:
Использовать аналог CSS @Supports только на JS — функцию CSS.supports()
// Узнаём, поддерживает ли браузер display: flex;
CSS.supports("display", "flex"); // true/false
Так же, как и в CSS, можно указать несколько свойств.
// Узнаём, поддерживает ли браузер display: flex; и flex-wrap: wrap;
CSS.supports("( display: flex ) and ( flex-wrap: wrap )"); // true/false
Но так же, как и в CSS, этот метод является новым и не будет работать в IE вообще.
Проверить с помощью применения стилей через JS.
Суть этого метода в том, что браузер не может установить свойству элемента значение, которое не поддерживает. Таким образом, если, после применения нового значения свойству через JavaScript, оно не изменилось, то браузер не поддерживает данное значение.
В итоге у нас выходит следующая функция:
var SupportsCSS = function (property, value) {
try {
// Создаём новый элемент
var element = document.createElement('span');
// Проверяем, есть ли такое свойство в браузере
if (element.style[property] !== undefined)
element.style[property] = value; // Если есть, то присваиваем
else
return false; // Если нет, то false
// Если браузер поддерживает данное значение для указанного свойства, то значения будут равны
return element.style[property] === value;
} catch (e) {
// В случае со старым IE, при присваивании значения, которое не поддерживается, вылетает ошибка
return false;
}
};
И вот так это работает:
var SupportsCSS = function (property, value) {
try {
var element = document.createElement('span');
if (element.style[property] !== undefined)
element.style[property] = value;
else
return false;
return element.style[property] === value;
} catch (e) {
return false;
}
};
// Проверяем
console.log( SupportsCSS('display', 'flex') );
console.log( SupportsCSS('display', '-webkit-box') );
console.log( SupportsCSS('display', 'Lol :)') );
console.log( SupportsCSS('flex-wrap', 'wrap') );
console.log( SupportsCSS('-webkit-flex-wrap', 'nowrap') );
Примечание: Если вы проверяете поддержку свойства в старом браузере, через эмулятор современного браузера, то данный метод будем показывать true на значениях, которые не поддерживаются.
Преимущество этого метода в том, что он будет работать во всех браузерах.
Пример запуска скрипта в Safari 5.17:
Специальные сервисы
Чтобы не заморачиваться, поддержу можно посмотреть на специальных сайтах. К примеру, один из самых популярных сайтов — http://caniuse.com/
Подробнее можно прочитать здесь: https://habrahabr.ru/post/336466/
Комментариев нет:
Отправить комментарий