Скрипт определения браузера пользователя

Скрипт определения браузера пользователя

Приветствую, вас дорогой читатель!

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

Для чего нужно определять браузер пользователя?

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

Например, в Mozilla Firefox шрифт отображается более жирным, чем в Opera или Chrome, поэтому одна и та же кнопка с одной и той же надписью может иметь разное значение ширины в этих браузерах.

Из за этих особенностей порой бывает сложно добиться одинакового отображения вёрстки во всех браузерах (кроссбраузерности).

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

Но у этого решения есть несколько минусов:

  • во-первых: для некоторых браузеров практически невозможно подобрать универсальный хук, который бы работал в разных версиях этого браузера;
  • во-вторых: даже если сейчас вам удалось добиться отображения нужных вам стилей в определённом браузере с помощью CSS хука, то вы не сможете быть на 100% уверенными в том, что этот хук будет корректно работать в следующих версиях браузера.

В этой статье я расскажу о скрипте определения браузера, который позволит определить браузер пользователя и подключить нужные стили для этого браузера. Это помогает добиться одинакового отображения страницы в разных браузерах, а также адаптировать вёрстку под особенности некоторых из них.

Как работает скрипт для определения браузера?

В самом конце страницы перед закрытием тега </body> мы прописываем скрипт, который считывают определённую информацию из браузера при помощи объекта navigator и метода userAgent и записывает её в определённую переменную (в моём случае «browser_id»)

Далее идёт ряд условий, в которых прописываются варианты для разных браузеров и в зависимости от того какой вариант попал в переменную browser_id в функцию будет возвращаться определённое название браузера.

На языке Java Script это будет выглядеть так:

Далее мы запишем результат работы данной функции (browser_name) в переменную browser и снова напишем ряд условий.

Например, если в этой переменной окажется значение «Opera» то мы можем вывести код в котором подключаем стили именно для браузера Opera.

Если окажется значение «Google Chrome» то можно вывести стили для Google Chrome и так далее.

Пример работы скрипта определения браузера

Вы можете перейти по ссылке ниже и посмотреть пример работы данного скрипта.

В данном примере я просто вывожу разные сообщения для разных браузеров. А для Mozila Firefox для блока с текстом задаю синюю рамку толщиной в 10пикселей. Можете проверить у себя как этот стиль отображается в других браузерах. Он должен работать только в Mozila Firefox

Обратите внимание! Браузеры Google Chrome и Яндекс-браузер работают на одной и той же платформе, а с недавних пор к ним присоединилась ещё и Opera новых версий (старые версии работают на другой платформе). Поэтому если вы хотите задать стили или текст специально для них, то вам нужно использовать значение «Google Chrome» в скрипте определения браузера. Для старых версий Opera в скрипе используем значение «Opera»

При этом учтите, что последние версии Opera, а также браузер Яндекс-браузер работают на той же платформе что и Google Chrome, поэтому для того чтобы определить стили для них используем значение переменной «Google Chrome»

Для того чтобы вместо вывода сообщения у нас прописывались определённые стили вместо кода сообщения в document.write(‘’) пишем либо код для подключения определённого файла стилей, например:

document.write(‘<link rel=»stylesheet» href=»opera.css»>’);

Либо сами стили, например:

document.write(‘<style>.block {font-size:1em;} </style>’);

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

Код скрипта с заданием стилей

Куда вписывать код скрипта?

Код скрипта определения браузера вписываем либо в конце страницы перед тегом </body&gt не забыв при этом обернуть их в тег script

<script> …. </script>

Либо можно подключить этот скрипт как отдельный файл также в конце страницы

<script src=»js/browser.js» type=»text/javascript»></script>

Сам файл вы можете либо создать самостоятельно либо скачать по этой ссылке, затем поменять значения на те что вам нужны и загрузить к себе на сервер.

Когда будете подключать скрипт не забудьте проверить чтобы путь указанный к скрипту был правильным.

На этом, пожалуй, всё. Надеюсь что помогла вам в решении данной проблемы. Если статья была полезной не забудьте поделиться ей в соцсетях :)

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif