Как сделать проверку браузера на сайте
Понятие кроссбраузерность сайта относится к его свойствам одинаково отражаться на различных браузерах Интернет.
Проверка кроссбраузерности сайта это один из видов тестирования сайта перед его запуском (сдаче заказчику) в серии тестирования внешнего вида. Помимо кроссбраузерности, в этой серии, делаются проверки на адаптивность сайта и проверку пиксельного соответствия.
Видимость сайта в браузерах
Если вы «погуглите» список браузеров доступных для установки пользователям, то наверняка найдете список из 60± программ. Большинство из них будут модификациями Chromium и Firefox, однако общий список получится внушительный. (список тут)
Вручную проверить видимость сайта во всех браузерах задача, мягко сказать, бестолковая. Хотя можно установить у себя основные браузеры и очень быстро открыть свой сайт в основных браузерах Google Chrome, Яндекс Chrome, Firefox и Opera и тем самым перекрыть 90% возможных посетителей вашего сайта.
По данным статистики StatCounter, популярность браузеров в России на октябрь 2018 года выглядит так.
Сомневаюсь, что это график сильно измениться в ближайшие годы.
Если этой информации не достаточно, то проверить, как выглядит сайт в различных браузерах, помогут специальные сервисы.
Сервис Browsershots дает вам бесплатную возможность сделать скиншоты проверяемой страницы сайта в основанных браузерах и их версиях. Бесплатно, проверка кроссбраузерности сайта, проводится для осей Linux и Windows. Для MAC и BSD придётся делать денежный взнос.
Обратите внимание на настройки сервиса, они внизу страницы. Во-первых, здесь вы можете выбрать свой язык. Выбор русского языка не даст хорошего результата, вам переведут пару строк из меню и всё. Но это не важно.
Более интересны 5 настроек: Screen Size, Color Depth, Javascript, Java, Flash. По умолчанию они выставлены на усмотрение сервиса.
Также обратите внимание, что выделены не все чеки и по умолчанию проверяются не все браузеры, а лишь последние, по данным сервиса, версии Браузеров.
Еще один момент. Значок копирайта внизу дает информацию, что сервис не обновлялся с 2015 года. Это подтверждают последние версии браузеров доступные для проверки. Например, последний «Opera» для проверок 15.0, а не 56.0.
Несмотря на это сервис работает и после ввода полного адреса сайта в поле проверок и нажатия кнопки Submit, сервис поставит вас в длинную, бесплатную очередь проверок. Через некоторое время сделает вам запрашиваемые скриншоты.
результат проверок
На этом сайте инструмент проверок кроссбраузерности называется «Browser Sandbox» и воспользоваться им вы можете после простой регистрации на сайте.
К сожалению, с недавних пор этот сервис стал условно бесплатным, и бесплатная пробная версия позволяет запускать ограниченное количество сеансов с ограничением по времени.
Видео покажет, как работает сервис и что такое, видимость сайта в браузерах.
Видимость сайта в Internet Explorer
Возвращаясь к статистике StatCounter, мы обнаруживаем, что, в мире, браузер Microsoft Internet Explorer, занимает третье место, по использованию. А это значит, что игнорировать это браузер со всеми его версиями нельзя.
IE NetRenderer позволяет вам проверять, как веб-сайт отображается многочисленными версиями Microsoft Internet Explorer. Особенно старые версии веб-браузеров Microsoft известны своим неожиданным поведением и несоблюдением интернет-стандартов W3C. Поэтому для каждого веб-дизайнера нужно обязательно регулярно проверять свои веб-сайты на совместимость с этими веб-браузерами. Просто введите URL-адрес проверяемой веб-страницы в поле и нажмите кнопку «Render». Через несколько секунд вы получите скриншот страницы. Попробуйте, это бесплатно!
Сервис IE NetRenderer работает быстро. В отличие от других служб скриншотов, мы можем обрабатывать большое количество захваченных заданий параллельно и в реальном времени. Скорость рендеринга должна быть сопоставимой, если не быстрее вашего локального браузера. Наши двигатели IE имеют гарантированную пропускную способность интернета в 200 Мбит/с.
Для чего подходит
Этот инструмент веб-рендеринга идеально подходит для веб-дизайнеров, работающих на рабочих платформах Apple iMac и Linux. Он позволяет проверять веб-проекты изначально на всех популярных версиях Internet Explorer, без необходимости выделять несколько физических или виртуальных ПК с Microsoft Windows для этой цели. Перед каждым заданием рендеринга мы очищаем кэш Internet Explorer. Это позволяет сразу увидеть эффект от всех изменений, внесенных во время веб-разработки.
Обычно IE Netrenderer показывает только самую верхнюю часть любой веб-страницы. Если вы хотите увидеть части страницы ниже, введите вертикальное значение смещения пикселя в поле справа на URL. Затем рендеринг начинается с указанной позиции вертикального пикселя.
Веб-сайты, которые извлекают содержимое страницы через JavaScript после выполнения главной HTML-страницы, могут еще не завершиться, когда NetRenderer сделает снимок экрана. То же самое может произойти с объектами внешней страницы, которые должны быть загружены с медленных сторонних серверов. Показателем этого является либо пустой, либо неполный снимок экрана. Если это произойдет, отметьте флажок под кнопкой «Render», чтобы позволить дополнительное время рендеринга, чтобы сценарии имели больше шансов закончить.
NetRenderer загружает веб-страницы из Германии, а не с вашего ПК. Это делает его полезным для нескольких других целей. Вы можете, например, использовать его как быструю проверку из вашей локальной сети вашей компании, чтобы узнать, доступны ли Webmail или веб-интерфейс вашего брандмауэра снаружи.
Можете использовать его в качестве приблизительной оценки, скорости загрузки веб-сайта людьми в Центральной Европе. Вы также можете использовать IE NetRenderer для просмотра веб-сайтов анонимно. Посетив веб-сервер вы не оставите никаких следов ни о вашем IP-адресе, ОС, версии браузера, плагинах или файлах cookie.
Сервис удобный, но на бесплатном тарифе ограничено время сессии проверки тремя минутами. Платный тариф с неограниченными проверками стоит 19$/месяц. Примечательно наличие проверок на Android (6 версий).
Так как проверка кроссбраузерности сайта относится к профессиональным проверкам, то большинство сервисов платные. Посмотрим на них.
CrossBrowserTesting
Сервис CrossBrowserTesting позволит провести тестирование совместимости кросс-браузера в облачном сервере на 2000+ реальных браузерах Интернет.
В бесплатном тарифном плане, после регистрации, можно провести 60 минут проверочных сессий в месяц (6 сессий по 10 минут). Неограниченное использование сервиса стоит 15$/в месяц.
На сайте мощный набор различных платных инструментов, среди которых есть тест кроссбраузерности, от 19$. ссылка.
Зачем нужно время для проверок
В завершении поясню, почему важно не только посмотреть, как выглядит ваш сайт в различных браузерах, но иметь время на его проверку.
Предположим, вы видите, что на каком-то браузере сайт не отражается или открываются не все скрипты или идет смещение колонок. Вам нужно это не только отследить, но и найти ошибку, то есть поработать с инструментами именно в этом браузере. Отсюда сессии и их продолжительность.
Многие пользователи компьютеров больше всего времени проводят в браузерах, используя его в служебных или рабочих целях. Естественно, этот фактор является критически важным для злоумышленников, которые попытаются сделать все, чтобы заразить пользовательский веб-обозреватель, а через него и сам компьютер. Если вы подозреваете, что такое произошло и с вашим проводником в интернет, самое время выполнить его проверку.
Проверка браузера на вирусы
Не бывает одного варианта заражения, при котором пользователь может смело зайти и избавиться от вредоносного ПО. Из-за того, что разновидности вирусов разные, необходимо проверить сразу несколько уязвимых мест, используемых для заражения. Разберем основные доступные варианты того, как браузер может подвергнуться атаке.
Этап 1: Проверка на майнеры
Итак, как же распознать присутствие майнера в браузере?
Проверка через веб-сервис
Разработчики Opera создали веб-сервис Cryptojacking Test, который проверяет наличие в браузере скрытых майнеров. Пройти его можно, пользуясь любым веб-обозревателем.
Проверка вкладок
Браузеры на Chromium (Google Chrome, Vivaldi, Яндекс.Браузер и др.) — «Меню» > «Дополнительные инструменты» > «Диспетчер задач» (либо нажмите сочетание клавиш Shift + Esc).
Firefox — «Меню» > «Еще» > «Диспетчер задач» (или введите about:performance в адресной строке и нажмите Enter).
Вычисляем проблемную вкладку, закрываем ее и больше не заходим на этот сайт.
Проверка расширений
Даже при условии, что там нет именно майнера, в неизвестных расширениях могут скрываться другие вирусы, например, похищающие данные пользователя от какого-то аккаунта.
Этап 2: Проверка ярлыка
Формат ярлыка браузера (да и любой другой программы) позволяет к свойствам запуска дописать определенные параметры, вместе с которыми он будет запускаться. Обычно это используется в целях расширения функциональности или устранения неполадок, например, с отображением контента, но злоумышленниками может быть добавлен автозапуск вредоносного исполняемого файла, который хранится на вашем ПК в виде BAT и т.п. Вариации изменения запуска могут быть и более невинными, нацеленными на отображение рекламных баннеров.
Этап 3: Сканирование компьютера
В обязательном порядке необходимо просканировать компьютер на наличие не только вирусов, но и просто нежелательного ПО, которое любит прописываться в браузере в виде тулбаров, поисковых систем по умолчанию, баннеров и т.д. Разными разработчиками было создано сразу несколько утилит, обнаруживающих вредоносное программное обеспечение, заставляющее, к примеру, подменять поисковик, открывать браузер самостоятельно, отображать рекламу в новой вкладке или в углах окна. Со списком таких решений и уроками по их использованию, а также с информацией по устранению проблемы, при которой веб-обозреватель открывается по своему желанию в любое время, вы можете ознакомиться в статьях по ссылкам ниже.
Этап 4: Очистка hosts
Часто пользователи забывают заглянуть в инструмент, напрямую управляющий доступом к тем или иным сайтам. В файл hosts нередко добавляются сайты, которые в дальнейшем запускаются в веб-обозревателе против воли человека. Процесс очистки не составляет труда, для этого найдите и выполните изменение файла по следующей инструкции.
Вам необходимо привести hosts к такому же состоянию, как на скриншоте статьи по ссылке выше. Учитывайте пару нюансов:
Этап 5: Просмотр списка установленных программ
Заключение
Мы разобрали основные приемы проверки и очистки браузера от вирусов. В подавляющем большинстве случаев они помогают либо найти вредителя, либо удостовериться, что его нет. Тем не менее вирусы могут сидеть в кэше браузера, и проверить его на чистоту кроме как сканированием папки кэша антивирусом не представляется возможным. Для профилактики или после случайного скачивания вируса кэш настоятельно рекомендуется очищать. Сделать это несложно, используя следующую статью.
Расширения-блокировщики рекламы помогают не только убирать назойливые браузеры, но и блокировать агрессивное поведение некоторых сайтов, перенаправляющих на другие страницы, которые могут быть вредоносными. Мы рекомендуем uBlock Origin, вы можете выбрать и другой вариант.
Если даже после всех проверок вы замечаете, что с компьютером что-то происходит, вероятнее всего, вирус находится не в браузере, а в самой операционной системе, управляя, в том числе и ним. Обязательно просканируйте весь компьютер, используя рекомендации из руководства по ссылке ниже.
Отблагодарите автора, поделитесь статьей в социальных сетях.
Недавно для одного интересного проекта мне потребовалось сделать определение браузера и его версии на PHP. Шаблон был адаптивный (responcive), и надо было подстроить под разные браузеры вывод элементов страницы. Сайт я писал на любимом движке WordPress и тема была сверстана под него. Как всегда недолго думая над задачей полез я в Интернет. Мое было удивление когда я нашел готовый скрипт, который полностью меня устроил в первой десятке выдачи google. Респект и уважуха разработчику и блогеру ко
торый этот скрипт написал и выложил у себя на блоге.
Чем он особо мне понравился, так это тем, что скрипт мог определять браузеры на движке Gecko, а не только основные браузеры (Firefox, Chrome, IE, Opera, Safari), и даже те, которые построены на ядре Trident (Maxthon, Avant Browser, MyIE2), и даже старые версии Оперы, маскирующиеся под IE. Кроме того, скрипт находит и отображает версию браузера.
Автор блога выложил некоторые сведения, которые я также хотел бы выложить себе на сайт.
Теория из слов автора:
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10
Отсюда вытащить браузер и версию просто, не так ли?
Теперь IE 6
Opera 10.61
Opera/9.80 (Windows NT 5.1; U; ru) Presto/2.6.30 Version/10.61
Опера приготовила нам подлянку: название браузера в начале, а версия, как это не странно, в конце.
Safari 5.1
Mozilla/5.0 (Windows; U; Windows NT 6.1; ru-RU) AppleWebKit/533.17.8 (KHTML, like Gecko) Version/5.0.1 Safari/533.17.8
Safari тоже удивляет: через слэш идёт вовсе не номер версии. Номер версии идёт чуть раньше.
Chrome 6.0.427.0
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.1 (KHTML, like Gecko) Chrome/6.0.427.0 Safari/534.1
Хром вытащить легче, хорошо бы ещё не перепутать его с Safari…
(О том, почему все браузеры (кроме Оперы) называют себя Mozilla можно в простой и увлекательной форме почитать здесь.)
Практика из слов автора
Вы уже узнали, какое разнообразие в строке User-agent предлагают всего лишь пять браузеров.
Но в 9 из 10 случаев нас спасёт следующее регулярное выражение:
После этого во втором элементе массива будет лежать название браузера, а в третьем — его версия.
Исключение представляет лишь Safari начиная с версии 3.0 и Opera начиная с версии 10.00.
Для этих браузеров мы пишем:
if ( $ browser == 'Opera' && $ version == '9.80' ) return 'Opera ' . substr ( $ agent , - 5 ) ; // возвращаем версию Оперы в конце строки if ( $ browser == 'Version' ) return 'Safari ' . $ version ; // обозначаем браузер как СафариИ ещё одна строка кода:
if ( ! $ browser && strpos ( $ agent , 'Gecko' ) ) return 'Browser based on Gecko' ;Её код целиком:
preg_match ( "/(MSIE|Opera|Firefox|Chrome|Version)(?:\/| )([0-9.]+)/" , $ agent , $ browser_info ) ; if ( $ browser == 'Opera' && $ version == '9.80' ) return 'Opera ' . substr ( $ agent , - 5 ) ; if ( ! $ browser && strpos ( $ agent , 'Gecko' ) ) return 'Browser based on Gecko' ; Вот более полная версия, позволяющая определять экзотические, устаревшие, а также те браузеры, которые построены на основе Firefox и IE:preg_match ( "/(MSIE|Opera|Firefox|Chrome|Version|Opera Mini|Netscape|Konqueror|SeaMonkey|Camino|Minefield|Iceweasel|K-Meleon|Maxthon)(?:\/| )([0-9.]+)/" , $ agent , $ browser_info ) ; // регулярное выражение, которое позволяет отпределить 90% браузеров list ( , $ browser , $ version ) = $ browser_info ; // получаем данные из массива в переменную if ( preg_match ( "/Opera ([0-9.]+)/i" , $ agent , $ opera ) ) return 'Opera ' . $ opera [ 1 ] ; // определение _очень_старых_ версий Оперы (до 8.50), при желании можно убрать if ( $ browser == 'MSIE' ) < // если браузер определён как IE preg_match ( "/(Maxthon|Avant Browser|MyIE2)/i" , $ agent , $ ie ) ; // проверяем, не разработка ли это на основе IE return 'IE ' . $ version ; // иначе просто возвращаем IE и номер версии if ( $ browser == 'Firefox' ) < // если браузер определён как Firefox preg_match ( "/(Flock|Navigator|Epiphany)\/([0-9.]+)/" , $ agent , $ ff ) ; // проверяем, не разработка ли это на основе Firefox if ( $ ff ) return $ ff [ 1 ] . ' ' . $ ff [ 2 ] ; // если да, то выводим номер и версию if ( $ browser == 'Opera' && $ version == '9.80' ) return 'Opera ' . substr ( $ agent , - 5 ) ; // если браузер определён как Opera 9.80, берём версию Оперы из конца строки if ( $ browser == 'Version' ) return 'Safari ' . $ version ; // определяем Сафари return $ browser . ' ' . $ version ; // для всех остальных возвращаем браузер и версию
Примеры работы
В таблице приведён результат работы двух функций — в первом столбце браузер, в котором вызывались функции, во втором — ответ функции, учитывающей малоизвестные браузеры, в третьей — результат работы сокращённой функции.
Красным цветом отмечены браузеры, которые функция не смогла определить.
А здесь вы можете проверить работу функций в своём браузере.
Надеюсь, что эти функции будут кому-то полезны.
Удачи.
или на сайте автора:
Еще раз отдельное спасибо автору!
Определяем мобильные браузеры
Еще из комментариев на сайте автора нашел, как определить мобильные устройстка:
Кроссбраузерность – это способность веб-ресурса отображаться одинаково и работать во всех популярных браузерах, без перебоев в функционировании и ошибок в верстке, а также с одинаково корректной читабельностью контента. Из-за стремительного развития технологий, сайт рекомендуется делать кроссбраузерным только по отношению к новейшим версиям браузеров.
Данный термин был впервые использован в 90-х годах, когда наблюдался самый разгар соперничества браузеров. В те времена кроссбраузерными считались ресурсы, одинаково работающие в Netscape Navigarot (браузер прекратил свое существование в 2007 году) и в Internet Explorer. Со временем производители приложений начали реализовывать функции, характерные только для одного из браузеров. В результате этого они стали отличаться друг от друга способами отображения страниц и их работой.
Особенности
Любой современный браузер применяет собственные алгоритмы обработки исходного HTML и CSS кода. В связи с этим разработчики ресурсов встречаются с проблемами совместимости сайта с тем или иным браузером. Чтобы сделать проект кроссбраузерным, вам не обойтись одними лишь стандартными инструментами CSS. Здесь также потребуются специальные CSS-селекторы (хаки), присущие лишь конкретному браузеру, поэтому их придется прописывать для каждого приложения отдельно.
Есть немало эффективных методов, с помощью которых можно добиться корректного отображения страниц даже на старых версиях браузеров. Однако прибегать к таким процедурам разумно только в том случае, если вы уверены, что большая часть посетителей сидит на вашем сайте именно с них.
В последние годы оптимизаторы все меньше сталкиваются с проблемами кроссбраузерности, потому что разработчики программного обеспечения перестают поддерживать старые версии своих браузеров. Так, например, компания Microsoft уже в открытую заявляет о необходимости использования обновленного Internet Explorer, призывая отказываться от устаревших версий продукта.
На заметку. Сегодня многие сайтостроители устанавливают специальную страницу, известную как «заглушка», которая появляется на экране пользователей браузеров, не поддерживаемых сайтом. Такая страница предлагает заменить их на новые версии или популярные браузеры, чтобы контент отображался корректно.
Стоит отметить, что элементы веб-ресурса не должны быть абсолютно идентичны во всех браузерах, которые только существуют на сегодняшний день. Соответствующим можно считать сайт, если:
- информация на странице читабельная;
- сохранена структура;
- нет ошибок в верстке;
- текст не «накладывается» поверх другого текста и изображений, если только это не предусмотрено автором контента.
Тестируя веб-ресурс на кроссбраузерность, необходимо применять самые новые версии популярнейших браузеров:
- Google Chrome.
- Mozilla Firefox.
- Opera.
- Internet Explorer.
- Netscape.
- Safari.
По той причине, что в последнее время процент мобильного трафика существенно вырос и Google внедрил Mobile-First Index, вебмастера все чаще занимаются обеспечением совместимости страниц с планшетами и смартфонами. Дисплеи у данных устройств куда меньше, чем у мониторов персональных компьютеров, поэтому они нуждаются в адаптации к мобильным устройствам.
Как сделать сайт кроссбраузерным?
Есть несколько действующих методов, с помощью которых вы сможете добиться кроссбраузерности своего веб-ресурса.
Применение CSS хаков
CSS hacks – это фрагменты кода, которые понимает только один браузер. Например, если ваш сайт отображается правильно в трех браузерах, а в остальных трех видны какие-то «косяки», то проблема решается отдельным прописыванием соответствующих хаков для каждого из трех браузеров, которые неправильно интерпретируют содержимое страницы.
На заметку. Хаки – не самый лучший способ исправления ошибок в коде, так как они делают его некрасивым и неправильным. Однако он продолжает выполнять свои функции.
Внедрение универсальных элементов
Подобные элементы работают в большей части браузеров одинаково успешно, поэтому на них рекомендуется заострить особое внимание. С помощью одних лишь универсальных элементов исходный код для вашего сайта будет эстетичным, коротким и понятным, при этом соответствовать всем часто используемым браузерам.
Вендорные префиксы
Они являются пережитком браузерных войн, особенно WebKit. Этот метод эффективнее и «чище», чем применение хаков.
Любому браузеру характерны уникальные свойства, имеющие вендорный префикс. Рассматривая случай с Google Chrome, элемент border-radius представлен здесь свойством -webkit-border-radius. А в Mozilla Firefox добавляется префикс -moz-. Подобные свойства изменяют функции элемента только в конкретном браузере, и никак не влияют на другие браузеры.
Сервисы проверки кроссбраузерности
Если ваш веб-сайт недостаточно кроссбраузерный, то большей части посетителей будет сложно одинаково воспринимать его содержимое, а это повлечет за собой ухудшение поведенческих факторов, которые обязательно учитываются поисковыми системами в процессе ранжирования результатов выдачи.
Поэтому важно узнать кроссбраузерность вашего веб-ресурса. Протестировать данный показатель можно с помощью огромного количества сервисов, доступных как онлайн, так и после установки на устройство. Представляем вашему вниманию самые удобные платные и бесплатные сервисы.
№1. CrossBrowserTesting
Данный сервис тестирования является платным, работает в режиме онлайн. Он поддерживается практически всеми версиями операционных систем, браузерами, подходит для большей части мобильных устройств и разрешений экрана.
Проверить сайт на соответствие различным браузерам можно следующими способами:
- «Живой» тест. Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
- Тест Selenium. Подразумевает автоматическую проверку в соответствии со скриптом, сделанным предварительно. Разрешается записывать результаты в формате видеофайла.
- Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
- Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.
Несмотря на то, что сервис платный, в течение 7 дней вам доступен лимит 60 минут для его использования, чтобы оценить функции и возможности приложения перед тем, как оформить платную подписку.
№2. Browsershots
Еще один онлайн сервис, где есть возможность сохранять скриншоты сайта, который проверяется на кроссбраузерность, со многих браузеров и их сборок (более 200 штук), в числе которых устаревшие и малопопулярные.
Тут доступна как бесплатная, так и платная версия. В бесплатной плохо то, что ваш запрос становится в очередь, и скриншоты начнут подгружаться на сервер поочередно после высвобождения сайтов. Данная процедура может занять от 10 минут до 2-3 часов, что довольно долго.
Оформив платную подписку, ваши запросы на тестирование кроссбраузерности будут в приоритете. Еще вы сможете выбрать разрешение экрана, JavaScript и Flash различных версий, а также глубину цвета.
№3. IE NetRenderer
Подразумевает бесплатную проверку, доступную в онлайн режиме. Сервис отличается тем, что проверять соответствие сайта можно только для Internet Explorer, начиная от версии 5.5, и заканчивая 11-й. Указать здесь можно только версию браузера и адрес тестируемого ресурса.
№4. IE Tester
Является специальным браузером, где можно проверять различные версии IE. Это локальное приложение, которое доступно для использования после установки на компьютер. Основные функции приложения – имитация функционирования выбранной версии браузера и заработок в сети на просмотре интернет-страниц.
№5. Browserling
Посредством данного сервиса вы получаете возможность работать с проверяемым ресурсом не в эмулируемом, а в реальном окне браузера, который установлен в виртуальной машине программы. Проверку возможно осуществлять для 5 популярнейших браузеров (Chrome, Opera, IE, Safari, Firefox), для 5 версий ОС Windows и 4 версий ОС Anrdoid. Можно настраивать разрешение экрана и создавать скриншоты. Все функции сервиса платные, бесплатные только первые 3 минуты тестирования, с разрешением 1024x768 и ОС Windows Vista.
№6. Spoon Browser Sandbox
Предлагает проверку совместимости сайта с точными версиями Chrome, IE, Opera, Safari и Firefox. Последние версии браузеров тестируются бесплатно, но если вы захотите проверить старые версии, вам придется заплатить определенную сумму.
Выбрав браузер, он откроется в новом окне, а дальше в адресной строке необходимо указать URL страницы, после чего протестировать ее. В инструменте доступно тестирование всех параметров кроссбраузерности. Однако для его использования потребуется загрузить специальный плагин.
№7. MultiBrowser
Платная программа проверки кроссбраузерности. Она работает со всеми доступными на сегодняшний день версиями Firefox и Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов с самыми разными разрешениями экранов.
Приложение способно применять браузеры, уже установленные на ПК, либо загружать версии, которые нужны пользователю. Огромным преимуществом сервиса является функция, которая дает возможность тестировать сайт в различных браузерах в оффлайн режиме, если сохранить интернет-файлы.
Благодаря разнообразию режимов, вы сможете:
- работать с ресурсом в нужном браузере;
- смотреть сайты на эмулированных смартфонах и планшетах, записывать видео;
- автоматически сохранять скриншоты с различных браузеров и устройств, в соответствии с изобилием размеров экранов.
Для начала можно установить демо-версию программы, доступную в течение 2 недель.
№8. Sauce Labs
Онлайн сервис тестирования кроссбраузерности. Пробная версия у него довольно ограниченная, а вот при оформлении платной подписки станет доступна автоматическая проверка. Здесь есть около 700 комбинаций браузеров, разрешений и устройств.
№9. Browsera
Приложение проверки кроссбраузерности доступно и в платном, и в бесплатном варианте. Функции второго, естественно, существенно ограничены числом проверяемых страниц сайта и доступных браузеров.
№10. Litmus
Онлайн приложение, пользоваться бесплатно которым можно только первые 3 дня. Поддерживает многие новые версии популярных браузеров и мобильные устройства.
№11. Equafy
Это эффективнейшая программа не только для тестирования кроссбраузерности веб-ресурса в онлайн режиме, но и для автоматического сканирования и поиска ошибок верстки в процессе отображения документов в самых разных браузерах.
Перед проверкой, которую можно сохранять в видеоформате, вы можете осуществить изобилие настроек, которых нет во многих других подобных сервисах. Единственная проблема – английский язык, но с помощью переводчика разобраться в функционале будет совсем не трудно.
Посмотреть скриншоты можно в списке страниц готового отчета, нажав на стрелку Show в крайней колонке.
№12. Browserstack
Платное приложение, демо-версию которого можно опробовать в первые 30 минут. Тестирование кроссбраузерности сайта можно производить с 7 современными браузерами различных версий, изобилием эмулированных смартфонов и планшетов, а также с установленным на компьютере ПО.
В браузерном окне появляется браузер, который вы выбрали для тестирования ресурса. Интернет в нем доступен полноценно, также есть возможность создавать скриншоты.
Отличный сервис для проверки отображения ресурса с разными расширениями. Это отличный вариант, если вы хотите протестировать внешний вид веб-сайта и узнать степень его адаптивности.
Еще инструмент позволяет получить рекомендации касательно правил юзабилити. К примеру, есть ли на сайте плохо распознаваемый размер шрифта и применяются ли в нем плагины. Затем вы получите скриншоты страниц тестируемого веб-ресурса в разных разрешениях.
№14. Ghostlab
Бесплатно-платная многофункциональная программа тестирования. Первые 7 дней доступна триал-версия.
Все вышеперечисленные сервисы проверки кроссбраузерности веб-сайта в некоторой степени отличаются друг от друга определенными возможностями, которые присущи только им. Поэтому лучше всего для тестирования использовать сразу несколько приложений, чтобы произвести полноценную проверку ресурса и получить все необходимые данные.
Заключение
Кроссбраузерность оказывает большое влияние на показатели поведенческих факторов и, как итог, позиции сайта при ранжировании поисковиками. От того, насколько хорошо и как много браузеров поддерживает ваш проект, зависит количество посетителей и заинтересованность пользователей в его контенте.
Не нужно быть опытным специалистом, чтобы понимать, что, зайдя на сайт со смартфона, человек с большой вероятностью покинет его, если дизайн и структура на его устройстве будет выглядеть неразборчиво и неэстетично. Также не забывайте, что поисковики поощряют адаптированные веб-ресурсы, оформление которых соответствует правилам верстки, поднимая их внутренний рейтинг и, тем самым, улучшая конверсию.
Оцените эту статью. Чтобы мы могли делать лучший контент! Напишите в комментариях, что вам понравилось и не понравилось!
Читайте также: