Страницы

Поиск по вопросам

четверг, 4 октября 2018 г.

Как узнать о поддержке браузером CSS свойства?

Хочу сделать сайт, который будет корректно выглядеть в большинстве браузеров. Но на пути к созданию столкнулся с проблемой кроссбраузерности. То есть, один браузер поддерживает данное 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/

Комментариев нет:

Отправить комментарий