Приветствую, вас дорогой читатель!
В предыдущей статье я рассказывала о том, как можно прописать разные стили для разных браузеров.
Если интересно почитать вот ссылка.
Навигация по статье:
Для чего нужно определять браузер пользователя?
К сожалению не все браузеры одинаково отображают и поддерживают некоторые CSS свойства, к тому же у них немного отличаются алгоритмы расчёта ширины элемента, особенно если используются десятичные значения ширины или шрифта. Помимо этого они могут по разному отображают шрифты (особенно если вы используете у себя на сайте нестандартный шрифт).
Например, в Mozilla Firefox шрифт отображается более жирным, чем в Opera или Chrome, поэтому одна и та же кнопка с одной и той же надписью может иметь разное значение ширины в этих браузерах.
Из за этих особенностей порой бывает сложно добиться одинакового отображения вёрстки во всех браузерах (кроссбраузерности).
Одним из решений данной проблемы является использование так называемых CSS хаков, подробнее о которых я рассказывала в предыдущей статье.
Но у этого решения есть несколько минусов:
- во-первых: для некоторых браузеров практически невозможно подобрать универсальный хук, который бы работал в разных версиях этого браузера;
- во-вторых: даже если сейчас вам удалось добиться отображения нужных вам стилей в определённом браузере с помощью CSS хука, то вы не сможете быть на 100% уверенными в том, что этот хук будет корректно работать в следующих версиях браузера.
В этой статье я расскажу о скрипте определения браузера, который позволит определить браузер пользователя и подключить нужные стили для этого браузера. Это помогает добиться одинакового отображения страницы в разных браузерах, а также адаптировать вёрстку под особенности некоторых из них.
Как работает скрипт для определения браузера?
В самом конце страницы перед закрытием тега </body> мы прописываем скрипт, который считывают определённую информацию из браузера при помощи объекта navigator и метода userAgent и записывает её в определённую переменную (в моём случае «browser_id»)
Далее идёт ряд условий, в которых прописываются варианты для разных браузеров и в зависимости от того какой вариант попал в переменную browser_id в функцию будет возвращаться определённое название браузера.
На языке Java Script это будет выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 |
function browser_name(){ var browser_id = navigator.userAgent; // перечень условий if (browser_id.search(/Chrome/) != -1) return 'Google Chrome'; if (browser_id.search(/Firefox/) != -1) return 'Firefox'; if (browser_id.search(/Opera/) != -1) return 'Opera'; if (browser_id.search(/Safari/) != -1) return 'Safari'; if (browser_id.search(/MSIE/) != -1) return 'Internet Explorer'; return 'Не определен'; } |
Далее мы запишем результат работы данной функции (browser_name) в переменную browser и снова напишем ряд условий.
Например, если в этой переменной окажется значение «Opera» то мы можем вывести код в котором подключаем стили именно для браузера Opera.
Если окажется значение «Google Chrome» то можно вывести стили для Google Chrome и так далее.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var browser = browser_name();// даелее проверям если браузер Google Chrome то выводим соответствующий фрагмент кода при помощи document.write if (browser=="Google Chrome") { document.write('<style>.content{border:10px solid #fff;}</style>'); } //и так для каждого браузера else if (browser=="Firefox") { document.write('<style>.content{border:10px solid #1B6DB3;}</style>'); } else if (browser=="Safari") { document.write('<link rel="stylesheet" href="safari.css" />'); } else if (browser=="Internet Explorer") { document.write('<link rel="stylesheet" href="IE.css" />'); } else if (browser=="Opera") { document.write('<link rel="stylesheet" href="opera.css" />'); } else{ document.write('<center><h2>Хм! Какой то непонятный браузер</h2></center>'); } |
Пример работы скрипта определения браузера
Вы можете перейти по ссылке ниже и посмотреть пример работы данного скрипта.
В данном примере я просто вывожу разные сообщения для разных браузеров. А для Mozila Firefox для блока с текстом задаю синюю рамку толщиной в 10пикселей. Можете проверить у себя как этот стиль отображается в других браузерах. Он должен работать только в Mozila Firefox
При этом учтите, что последние версии Opera, а также браузер Яндекс-браузер работают на той же платформе что и Google Chrome, поэтому для того чтобы определить стили для них используем значение переменной «Google Chrome»
Для того чтобы вместо вывода сообщения у нас прописывались определённые стили вместо кода сообщения в document.write(‘’) пишем либо код для подключения определённого файла стилей, например:
Либо сами стили, например:
Давайте рассмотрим как будет выглядеть полный код скрипта определения браузера с заданием определённых стилей.
Код скрипта с заданием стилей
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
function browser_name(){ var browser_id = navigator.userAgent; // перечень условий if (browser_id.search(/Chrome/) != -1) return 'Google Chrome'; if (browser_id.search(/Firefox/) != -1) return 'Firefox'; if (browser_id.search(/Opera/) != -1) return 'Opera'; if (browser_id.search(/Safari/) != -1) return 'Safari'; if (browser_id.search(/MSIE/) != -1) return 'Internet Explorer'; return 'Не определен'; } var browser = browser_name();// даелее проверям если браузер Google Chrome то выводим соответствующий фрагмент кода при помощи document.write if (browser=="Google Chrome") { document.write('<style>.content{border:10px solid #fff;}</style>'); } //и так для каждого браузера else if (browser=="Firefox") { document.write('<style>.content{border:10px solid #1B6DB3;}</style>'); } else if (browser=="Safari") { document.write('<link rel="stylesheet" href="safari.css" />'); } else if (browser=="Internet Explorer") { document.write('<link rel="stylesheet" href="IE.css" />'); } else if (browser=="Opera") { document.write('<link rel="stylesheet" href="opera.css" />'); } else{ document.write('<center><h2>Хм! Какой то непонятный браузер</h2></center>'); } |
Куда вписывать код скрипта?
Код скрипта определения браузера вписываем либо в конце страницы перед тегом </body> не забыв при этом обернуть их в тег script
Либо можно подключить этот скрипт как отдельный файл также в конце страницы
Сам файл вы можете либо создать самостоятельно либо скачать по этой ссылке, затем поменять значения на те что вам нужны и загрузить к себе на сервер.
На этом, пожалуй, всё. Надеюсь что помогла вам в решении данной проблемы. Если статья была полезной не забудьте поделиться ей в соцсетях :)
С уважением Юлия Гусарь
Спасибо, помогло
Спасибо! Пригодится ваш обзор. Буду делать на своем сайте