Делаем кросс браузерность и адаптивность лучше

Несколько полезных приёмов, которые помогут сделать ваш проект более универсальным для большинства устройств и браузеров.

popular browsers

Предисловие

На сегодняшний день существует множество различных девайсов и технологий, следовательно, добиться того, чтобы ваш проект был полностью рабочим везде довольно непросто. Какие вы используете для этого инструменты? Наверняка это будут стандартные CSS медиа-запросы, но сейчас мы расскажем о трёх дополнительных приёмах, делающих адаптивность и кроссбраузерность лучше.

Тачскрин детектор

Иногда бывает очень полезным узнать управляется ли пользовательское устройство касаниями или же использует обычную мышь. В предыдущей статье мы делали свой собственный курсор при помощи Javascript, но ведь при наличии тачскрина он нам не нужен, так что неплохо было бы его убрать.

Делается это с помощью простого JS-кода:

if ("ontouchstart" in document.documentElement) {
      //if true
    }

Touchscreen detection

Codepen

Определение браузера

Бывает так, что необходимо реализовать какую-то штуку для определённого браузера или для его конкретной версии, но надежного способа сделать это средствами CSS просто не существует. На помощь приходит Javascript-плагины, а именно detect-browser. Придумывать какое-то своё решение становится совсем необязательно, достаточно просто установить плагин командой npm i detect-browser. Далее необходимо его подключить:

const { detect } = require('detect-browser');
const browser = detect();

Использование:

if (browser) {
  console.log(browser.name);
  console.log(browser.version);
  console.log(browser.os);
}

Если вы используете JS-фреймворк, то лучше установить специальный плагин. Например, для Vue.js это vue-browser-detect-plugin.

Поддержка определённого CSS свойства

В 2013 году Firefox, Chrome и Opera объявили о создании директивы @supports, с помощью которой можно проверить браузер на поддержку заданного CSS свойства. Эта директива стала отличным инструментов для адаптации проектов под старые версии браузеров. Используйте её, когда применяете относительно новые и "экспериментальные" свойства. Например:

@supports not (mix-blend-mode: exclusion) {
   .experimental {
     display: none;
   }
}

Также есть вариант выполнить эту проверку при помощи Javascript:

CSS.supports("mix-blend-mode", "exclusion"); /* true / false */

Не забывайте про сайт canisue.com, там вы сможете узнать о том, поддерживает ли тот или иной браузер указанное свойство.

На этом всё. Надеемся, вы узнали что-то новое и сможете лучше адаптировать свои проекты. Спасибо, что вы с нами, подписывайтесь и читайте новые статьи от Frontext.

Наши рекомендации
К сожалению, тут пока ничего нет.