Как проверить на браузер при помощи JavaScript

Представьте ситуацию, вы решили проверить ваш сайт в другом браузере и видите, что ваш фронтэнд поехал, гугл хром вообще не так посчитал высоту, или блок и вовсе сползает. А быть может, вы просто хотите сказать пользователям Internet Explorer все что вы думаете про этот браузер 🙂 .

Как выводить код или стили для определенных браузеров

Очень часто браузеры не успевают вводить поддержку тех или иных свойств CSS, и они либо вообще не работают, либо работают после особых префиксов (-moz-, -webkit-, -ms-, -o-). В случаях когда проект уже прилично набрал функционала и стилей, легче написать небольшой скрипт для браузера, чем вылавливать не слишком кроссбраузерный код по всему сайту.

Посмотрим, как при помощи javascript можно узнать с какого браузера мы просматриваем страницу:

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6

В каждую переменную мы записываем логическое значение булево, ноль или единицу (true или false). С помощью этого кода мы сможем применять различные скрипты и даже стили для таких браузеров как Firefox, Opera, Safari, Chrome и Internet Explorer. После объявления переменных, добавим небольшую проверку:

if (isFirefox) {
    console.log('hello! i am firefox');
}

Если у вас сработала эта проверка (результат смотреть в консоли Firebug), можно смело менять какие-то переменные или добавлять стили, например, при помощи jQuery:

if (isFirefox) {
  $('.my-block').css('color', 'red');
}

Хотя этот вариант лучше заменить на присвоение другого класса:

if (isFirefox) {
  $('.my-block').addClass('my-block-firefox');
}

Аналогично и для других браузеров. Как всегда всё упирается в какой-то конкретный случай и вашу фантазию 🙂 .

Полный вариант (ненужные проверки лучше удалить или закомментировать)

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isFirefox = typeof InstallTrigger !== 'undefined';
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
var isChrome = !!window.chrome && !isOpera;
var isIE = /*@cc_on!@*/false || !!document.documentMode;

if (isFirefox) {
  $('.my-block').addClass('my-block-firefox');
}

 

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь