- В чем отличия браузеров
- Кроссбраузерность и CSS
- В каких браузерах проверять кроссбраузерность
- Что тестировать при проверке кроссбраузерности
- Как тестировать кроссбраузерность
- Выводы
Мы уже знаем, что сайт может по-разному отображаться на устройствах. Если он корректно адаптируется под разные разрешения экранов, то такой сайт называется адаптивным.
Разные устройства могут различаться не только разрешениями экранов, но и браузерами, с которых происходит выход в интернет. Их огромное количество, например: Google Chrome, Firefox, Safari, Edge, Opera, Vivaldi. Эти браузеры могут по-разному отображать одни и те же элементы на странице.
В этом уроке мы узнаем, что такое кроссбраузерность, и посмотрим на примеры отображения одинаковых элементов в разных браузерах. Также разберем, где тестировщику можно проверить корректное отображение страницы.
В чем отличия браузеров
Основное отличие браузеров — движки, то есть сердце любого браузера. Движок — это код, который обрабатывает страницы, определяет загрузку, рисует сайт, анимирует элементы и определяет стандартные стили для элементов.
Обычно современные браузеры различаются отображением функциональных элементов: окно выбора даты, ввода пароля и так далее. Например, так выглядит элемент выбора значения из диапазона, который по умолчанию есть в HTML, для разных браузеров:
На этом примере установлены только стандартные стили браузеров, но отображение разное. Это касается не только цвета, но и размера элемента. Это может сломать отображение части страницы у пользователя.
Не все элементы меняются настолько кардинально, что могут помешать отображению соседних блоков. Большинство из стилистических отличий не являются критичными, так как функциональность и размеры сохраняются.
Одна из задач разработчика — сделать отображение и работоспособность сайта в разных браузерах одинаковым или близким к этому. Сайт, который одинаково отображается и работает в разных браузерах, называется кроссбраузерным.
Задача тестировщика — проверка сайта в разных браузерах и на разных устройствах. Разберем, на что обращает внимание тестировщик при тестировании кроссбраузерности.
Кроссбраузерность и CSS
Чтобы сайт корректно отображался в разных браузерах, разработчику следует учитывать:
-
Стандартные стили разных браузеров
-
Работоспособность свойств в разных браузерах
За эти пункты отвечает язык CSS — таблица стилей, которая определяет, как правильно визуально должна выводиться информация. К этому относятся шрифт, размеры, цвета, расположение.
Стандартные стили браузера
В примере выше один и тот же элемент имел разные стили в зависимости от браузера. Это не критичная ситуация, но разные стили могут изменить дизайн, что не хорошо.
Чтобы исправить эту ситуацию, разработчики используют сброс стилей — приводят все элементы к единому стилю. Это можно сделать как вручную, так и с помощью уже готовых CSS-стилей, например, Normalize CSS.
При тестировании определяется, насколько критично изменение элементов в разных браузерах.
Работоспособность свойств в разных браузерах
Язык CSS активно развивается и в нем появляются новые свойства. Пока свойство пройдет путь от задумки до окончательной реализации, могут проходить года. Разработчики браузеров стараются вводить в свои движки новые свойства даже до их попадания в окончательную документацию.
Это приводит к тому, что тестировщикам необходимо проверять сайт не только в разных браузерах, но и в разных версиях одного и того же браузера.
В качестве примера посмотрим на поддержку новой возможности в CSS, которая находится в стадии разработки:
Фиолетовым цветом выделены версии браузеров, которые не поддерживают эту возможность. Например, версия Safari 15.6 вышла в конце июля 2022 года, то есть поддержка появилась в последние полгода. Firefox добавил поддержку только в самой последней версии, на которую еще не все пользователи успели перейти.
Проверка стилей браузера позволяет убедиться в том, что сайт будет корректно отображаться в разных браузерах. Необязательно чтобы сайт совпадал на все сто процентов, но нужно учитывать требования компании к сайту или приложению.
Разберем, в каких браузерах проверять сайт или приложение, и какие инструменты помогут тестировщику при тестировании кроссбраузерности.
В каких браузерах проверять кроссбраузерность
Для проверки кроссбраузерной страницы не надо скачивать все известные браузеры во всех версиях. Достаточно поддерживать самые популярные браузеры:
-
Google Chrome
-
Safari
-
Firefox
Если сайт хорошо работает в этих браузерах, то с остальными проблем быть не должно. Дело в том, что эти три браузера работают на трех разных движках:
-
Google Chrome — Blink
-
Safari — WebKit
-
Firefox — Gecko
Эти движки являются самыми распространенными, и почти все браузеры работают на них, например:
-
Yandex Browser, Microsoft Edge, как и Google Chrome работают на движке Blink
-
Gnome Web, как и Safari, работает на движке WebKit, что очень удобно при тестировании сайта без устройств от компании Apple
Поэтому нет необходимости держать все браузеры на своем компьютере. Достаточно установить один-два браузера на самых популярных движках.
Не стоит гнаться за очень старыми версиями браузеров. Достаточна поддержка версий до года-двух, так как они обновляются в автоматическом режиме. Посмотрите на главную страницу Хекслета в браузере Internet Explorer 11, который вышел в 2013 году:
Результат выглядит страшно, но полноценная поддержка этого браузера не нужна. Поэтому сайт все равно считается кроссбраузерным, ведь он поддерживает все основные браузеры последних версий.
Кроссбраузерность важна для всех устройств. У мобильных браузеров тоже много специфичных моментов. Например, мобильные браузеры могут автоматически удалять рекламные блоки или сокращать время загрузки страницы. При удалении частей сайта браузер может ошибиться и удалить важный контент.
Что тестировать при проверке кроссбраузерности
Не существует строгих критериев того, как сайт должен работать в разных браузерах. Обычно тестировщику нужно проверить работоспособность в определенных версиях. Эти версии определяются в зависимости от пользователей.
Например, государственная организация может использовать очень старые версии браузеров. Если ваш сайт нацелен на эту аудиторию, то необходимо поддерживать работу этих браузеров, даже в ущерб современным тенденциям и технологиям.
При тестировании кроссбраузерности проверяется:
-
Дизайн. Элементы страницы не должны переноситься, исчезать, менять свою ширину, если это не предусмотрено в дизайне
-
Функциональность. Все интерактивные элементы должны адекватно работать в разных браузерах: кнопочки нажиматься, меню раскрываться, поля у форм обрабатывать введенный текст
Если у сайта нет конкретных требований по версиям браузеров, то используйте статистику. Поддерживайте те версии, у которых количество пользователей более 3-5%.
Как тестировать кроссбраузерность
Чтобы протестировать разные версии браузеров, используют следующие способы:
-
На своем устройстве. Можно установить себе на устройство самые популярные браузеры и проверить работу в них
-
Онлайн-сервисы. Самый популярный сервис — BrowserStack предлагает открытие сайта в самых разных комбинациях «Операционная система + браузер». Сервис платный, но есть бесплатная версия. Она урезанная, но вы можете зарегистрироваться и посмотреть, как это работает
-
Виртуальные машины. Если ваш сайт нужно тестировать в одних и тех же браузерах, то можно установить виртуальные машины. Плюс данного способа — вы полностью контролируете окружение, в котором работает сайт
Выводы
В этом уроке мы узнали, что такое кроссбраузерность, посмотрели на примеры отображения одинаковых элементов в разных браузерах. Также узнали, где тестировщику можно проверить страницу на кроссбраузерность. Повторим важные моменты:
-
Браузеры могут по-разному отображать одинаковые, с точки зрения разработки, элементы
-
Разработчики CSS постоянно работают над новой функциональностью, а разработчики браузеров добавляют эту функциональность к себе. Из-за этого код, который работает в одном браузере, может не работать в другом
-
Протестировать сайт на кроссбраузерность можно с помощью трех способов:
-
Использование разных браузеров на своем устройстве
-
Использование онлайн-сервисов, например, BrowserStack
-
Использование виртуальных машин. Этот способ хорош, если сайт должен работать в определенной среде
-
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
