Проверка сайта на кроссбраузерность

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

Внимание! Материал рассчитан для общего ознакомления владельцев бизнеса и понимания того, как оценить работу наёмного верстальщика в общих чертах. О том, как исправлять найденные ошибки, можно написать книгу, ведь большинство случаев уникальны. Вопросы можете задавать в комментариях.

Для проведения проверки потребуется установить на компьютер минимум 6 основных браузеров, которые могут использовать посетители сайта: Mozilla Firefox, Opera, Google Chrome, Yandex, Safari и Internet Explorer.

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

Справка. В 2012 году было модно верстать «пиксель-в-пиксель». Такой подход предполагает, что на любом из существующих браузеров и типах устройств все элементы дизайна будут оставаться на своих местах. Без смещений, даже малейших. Пиксель - это точка на мониторе, из которых формируется изображение. В те времена я работал в веб-студии верстальщиком и оценил на практике, как это реализуется. На момент 2021 года этого не использую, т.к. долго, дорого и не имеет смысла: этим можно увеличить чек разработки, но абсолютно не влияет на конверсию и оборот с продаж.

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

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

Если возникли проблемы

При обнаружении недоработок вёрстки для их обнаружения в коде и последующей нейтрализации используется панель вебмастера. На момент осени 2021 года практически все актуальные версии браузеров по-умолчанию ею оснащены. Для активации заходим на проверяемый сайт и нажимаем на клавиатуре клавишу F12. Снизу появится окно с кодом html-разметки. Там же можно посмотреть структуру DOM, CSS, протестировать скрипты и изучить выявленные ошибки отображения.

Панель вебмастера в браузере Mozilla Firefox.

Где найти панель вебмастера, если на F12 ничего не открылось

В ранних версиях браузеров панель вызывается иначе:

• В Сафари это называется «Веб-инспектор» и вызывается нажатием комбинации Ctrl+Alt+I.
• В Опере достаточно щелкнуть правой кнопкой мыши в любом месте на сайте и выбрать из выпадающего контекстного меню пункт «Проинспектировать элемент».
• В Firefox ранних версий всё немного сложнее: чтобы стала доступна панель веб-мастера, нужно было зайти в меню в Инструменты - Дополнения, там выбрать расширения и найти Firebug. Нужен тот, что с жуком на иконке (скриншот ниже). Устанавливаем плагин и панель станет открываться.

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

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