Несколько полезных приёмов, которые помогут сделать ваш проект более универсальным для большинства устройств и браузеров.
Больше статей на нашем сайте Frontext.ru.
Предисловие
На сегодняшний день существует множество различных девайсов и технологий, следовательно, добиться того, чтобы ваш проект был полностью рабочим везде довольно непросто. Какие вы используете для этого инструменты? Наверняка это будут стандартные CSS медиа-запросы, но сейчас мы расскажем о трёх дополнительных приёмах, делающих адаптивность и кроссбраузерность лучше.
Тачскрин детектор
Иногда бывает очень полезным узнать управляется ли пользовательское устройство касаниями или же использует обычную мышь. В предыдущей статье мы делали свой собственный курсор при помощи Javascript, но ведь при наличии тачскрина он нам не нужен, так что неплохо было бы его убрать.
Делается это с помощью простого JS-кода:
Посмотреть пример на Codepen.
Определение браузера
Бывает так, что необходимо реализовать какую-то штуку для определённого браузера или для его конкретной версии, но надежного способа сделать это средствами CSS просто не существует. На помощь приходит Javascript-плагины, а именно detect-browser. Придумывать какое-то своё решение становится совсем необязательно, достаточно просто установить плагин командой npm i detect-browser. Далее необходимо его подключить:
Использование:
Если вы используете JS-фреймворк, то лучше установить специальный плагин. Например, для Vue.js это vue-browser-detect-plugin.
Поддержка определённого CSS свойства
В 2013 году Firefox, Chrome и Opera объявили о создании директивы @supports, с помощью которой можно проверить браузер на поддержку заданного CSS свойства. Эта директива стала отличным инструментов для адаптации проектов под старые версии браузеров. Используйте её, когда применяете относительно новые и "экспериментальные" свойства. Например:
Также есть вариант выполнить эту проверку при помощи Javascript:
Не забывайте про сайт canisue.com, там вы сможете узнать о том, поддерживает ли тот или иной браузер указанное свойство.
На этом всё. Надеемся, вы узнали что-то новое и сможете лучше адаптировать свои проекты. Спасибо, что вы с нами, подписывайтесь и читайте новые статьи от Frontext.
