0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Мы уже знаем, что сайт может по-разному отображаться на устройствах. Если он корректно адаптируется под разные разрешения экранов, то такой сайт называется адаптивным.</p>
1
<p>Мы уже знаем, что сайт может по-разному отображаться на устройствах. Если он корректно адаптируется под разные разрешения экранов, то такой сайт называется адаптивным.</p>
2
<p>Разные устройства могут различаться не только разрешениями экранов, но и браузерами, с которых происходит выход в интернет. Их огромное количество, например: Google Chrome, Firefox, Safari, Edge, Opera, Vivaldi. Эти браузеры могут по-разному отображать одни и те же элементы на странице.</p>
2
<p>Разные устройства могут различаться не только разрешениями экранов, но и браузерами, с которых происходит выход в интернет. Их огромное количество, например: Google Chrome, Firefox, Safari, Edge, Opera, Vivaldi. Эти браузеры могут по-разному отображать одни и те же элементы на странице.</p>
3
<p>В этом уроке мы узнаем, что такое кроссбраузерность, и посмотрим на примеры отображения одинаковых элементов в разных браузерах. Также разберем, где тестировщику можно проверить корректное отображение страницы.</p>
3
<p>В этом уроке мы узнаем, что такое кроссбраузерность, и посмотрим на примеры отображения одинаковых элементов в разных браузерах. Также разберем, где тестировщику можно проверить корректное отображение страницы.</p>
4
<h2>В чем отличия браузеров</h2>
4
<h2>В чем отличия браузеров</h2>
5
<p>Основное отличие браузеров - движки, то есть сердце любого браузера.<strong>Движок</strong>- это код, который обрабатывает страницы, определяет загрузку, рисует сайт, анимирует элементы и определяет стандартные стили для элементов.</p>
5
<p>Основное отличие браузеров - движки, то есть сердце любого браузера.<strong>Движок</strong>- это код, который обрабатывает страницы, определяет загрузку, рисует сайт, анимирует элементы и определяет стандартные стили для элементов.</p>
6
<p>Обычно современные браузеры различаются отображением функциональных элементов: окно выбора даты, ввода пароля и так далее. Например, так выглядит элемент выбора значения из диапазона, который по умолчанию есть в HTML, для разных браузеров:</p>
6
<p>Обычно современные браузеры различаются отображением функциональных элементов: окно выбора даты, ввода пароля и так далее. Например, так выглядит элемент выбора значения из диапазона, который по умолчанию есть в HTML, для разных браузеров:</p>
7
<p>На этом примере установлены только стандартные стили браузеров, но отображение разное. Это касается не только цвета, но и размера элемента. Это может сломать отображение части страницы у пользователя.</p>
7
<p>На этом примере установлены только стандартные стили браузеров, но отображение разное. Это касается не только цвета, но и размера элемента. Это может сломать отображение части страницы у пользователя.</p>
8
<p>Не все элементы меняются настолько кардинально, что могут помешать отображению соседних блоков. Большинство из стилистических отличий не являются критичными, так как функциональность и размеры сохраняются.</p>
8
<p>Не все элементы меняются настолько кардинально, что могут помешать отображению соседних блоков. Большинство из стилистических отличий не являются критичными, так как функциональность и размеры сохраняются.</p>
9
<p>Одна из задач разработчика - сделать отображение и работоспособность сайта в разных браузерах одинаковым или близким к этому. Сайт, который одинаково отображается и работает в разных браузерах, называется<strong>кроссбраузерным</strong>.</p>
9
<p>Одна из задач разработчика - сделать отображение и работоспособность сайта в разных браузерах одинаковым или близким к этому. Сайт, который одинаково отображается и работает в разных браузерах, называется<strong>кроссбраузерным</strong>.</p>
10
<p>Задача тестировщика - проверка сайта в разных браузерах и на разных устройствах. Разберем, на что обращает внимание тестировщик при тестировании кроссбраузерности.</p>
10
<p>Задача тестировщика - проверка сайта в разных браузерах и на разных устройствах. Разберем, на что обращает внимание тестировщик при тестировании кроссбраузерности.</p>
11
<h2>Кроссбраузерность и CSS</h2>
11
<h2>Кроссбраузерность и CSS</h2>
12
<p>Чтобы сайт корректно отображался в разных браузерах, разработчику следует учитывать:</p>
12
<p>Чтобы сайт корректно отображался в разных браузерах, разработчику следует учитывать:</p>
13
<ul><li>Стандартные стили разных браузеров</li>
13
<ul><li>Стандартные стили разных браузеров</li>
14
<li>Работоспособность свойств в разных браузерах</li>
14
<li>Работоспособность свойств в разных браузерах</li>
15
</ul><p>За эти пункты отвечает язык CSS - таблица стилей, которая определяет, как правильно визуально должна выводиться информация. К этому относятся шрифт, размеры, цвета, расположение.</p>
15
</ul><p>За эти пункты отвечает язык CSS - таблица стилей, которая определяет, как правильно визуально должна выводиться информация. К этому относятся шрифт, размеры, цвета, расположение.</p>
16
<h3>Стандартные стили браузера</h3>
16
<h3>Стандартные стили браузера</h3>
17
<p>В примере выше один и тот же элемент имел разные стили в зависимости от браузера. Это не критичная ситуация, но разные стили могут изменить дизайн, что не хорошо.</p>
17
<p>В примере выше один и тот же элемент имел разные стили в зависимости от браузера. Это не критичная ситуация, но разные стили могут изменить дизайн, что не хорошо.</p>
18
<p>Чтобы исправить эту ситуацию, разработчики используют сброс стилей - приводят все элементы к единому стилю. Это можно сделать как вручную, так и с помощью уже готовых CSS-стилей, например,<a>Normalize CSS</a>.</p>
18
<p>Чтобы исправить эту ситуацию, разработчики используют сброс стилей - приводят все элементы к единому стилю. Это можно сделать как вручную, так и с помощью уже готовых CSS-стилей, например,<a>Normalize CSS</a>.</p>
19
<p>При тестировании определяется, насколько критично изменение элементов в разных браузерах.</p>
19
<p>При тестировании определяется, насколько критично изменение элементов в разных браузерах.</p>
20
<h3>Работоспособность свойств в разных браузерах</h3>
20
<h3>Работоспособность свойств в разных браузерах</h3>
21
<p>Язык CSS активно развивается и в нем появляются новые свойства. Пока свойство пройдет путь от задумки до окончательной реализации, могут проходить года. Разработчики браузеров стараются вводить в свои движки новые свойства даже до их попадания в окончательную документацию.</p>
21
<p>Язык CSS активно развивается и в нем появляются новые свойства. Пока свойство пройдет путь от задумки до окончательной реализации, могут проходить года. Разработчики браузеров стараются вводить в свои движки новые свойства даже до их попадания в окончательную документацию.</p>
22
<p>Это приводит к тому, что тестировщикам необходимо проверять сайт не только в разных браузерах, но и в разных версиях одного и того же браузера.</p>
22
<p>Это приводит к тому, что тестировщикам необходимо проверять сайт не только в разных браузерах, но и в разных версиях одного и того же браузера.</p>
23
<p>В качестве примера посмотрим на<a>поддержку новой возможности в CSS</a>, которая находится в стадии разработки:</p>
23
<p>В качестве примера посмотрим на<a>поддержку новой возможности в CSS</a>, которая находится в стадии разработки:</p>
24
<p>Фиолетовым цветом выделены версии браузеров, которые не поддерживают эту возможность. Например, версия Safari<em>15.6</em>вышла в конце июля 2022 года, то есть поддержка появилась в последние полгода. Firefox добавил поддержку только в самой последней версии, на которую еще не все пользователи успели перейти.</p>
24
<p>Фиолетовым цветом выделены версии браузеров, которые не поддерживают эту возможность. Например, версия Safari<em>15.6</em>вышла в конце июля 2022 года, то есть поддержка появилась в последние полгода. Firefox добавил поддержку только в самой последней версии, на которую еще не все пользователи успели перейти.</p>
25
<p>Проверка стилей браузера позволяет убедиться в том, что сайт будет корректно отображаться в разных браузерах. Необязательно чтобы сайт совпадал на все сто процентов, но нужно учитывать требования компании к сайту или приложению.</p>
25
<p>Проверка стилей браузера позволяет убедиться в том, что сайт будет корректно отображаться в разных браузерах. Необязательно чтобы сайт совпадал на все сто процентов, но нужно учитывать требования компании к сайту или приложению.</p>
26
<p>Разберем, в каких браузерах проверять сайт или приложение, и какие инструменты помогут тестировщику при тестировании кроссбраузерности.</p>
26
<p>Разберем, в каких браузерах проверять сайт или приложение, и какие инструменты помогут тестировщику при тестировании кроссбраузерности.</p>
27
<h2>В каких браузерах проверять кроссбраузерность</h2>
27
<h2>В каких браузерах проверять кроссбраузерность</h2>
28
<p>Для проверки кроссбраузерной страницы не надо скачивать все известные браузеры во всех версиях. Достаточно поддерживать самые популярные браузеры:</p>
28
<p>Для проверки кроссбраузерной страницы не надо скачивать все известные браузеры во всех версиях. Достаточно поддерживать самые популярные браузеры:</p>
29
<ul><li>Google Chrome</li>
29
<ul><li>Google Chrome</li>
30
<li>Safari</li>
30
<li>Safari</li>
31
<li>Firefox</li>
31
<li>Firefox</li>
32
</ul><p>Если сайт хорошо работает в этих браузерах, то с остальными проблем быть не должно. Дело в том, что эти три браузера работают на трех разных движках:</p>
32
</ul><p>Если сайт хорошо работает в этих браузерах, то с остальными проблем быть не должно. Дело в том, что эти три браузера работают на трех разных движках:</p>
33
<ul><li>Google Chrome - Blink</li>
33
<ul><li>Google Chrome - Blink</li>
34
<li>Safari - WebKit</li>
34
<li>Safari - WebKit</li>
35
<li>Firefox - Gecko</li>
35
<li>Firefox - Gecko</li>
36
</ul><p>Эти движки являются самыми распространенными, и почти все браузеры работают на них, например:</p>
36
</ul><p>Эти движки являются самыми распространенными, и почти все браузеры работают на них, например:</p>
37
<ul><li>Yandex Browser, Microsoft Edge, как и Google Chrome работают на движке Blink</li>
37
<ul><li>Yandex Browser, Microsoft Edge, как и Google Chrome работают на движке Blink</li>
38
<li>Gnome Web, как и Safari, работает на движке WebKit, что очень удобно при тестировании сайта без устройств от компании Apple</li>
38
<li>Gnome Web, как и Safari, работает на движке WebKit, что очень удобно при тестировании сайта без устройств от компании Apple</li>
39
</ul><p>Поэтому нет необходимости держать все браузеры на своем компьютере. Достаточно установить один-два браузера на самых популярных движках.</p>
39
</ul><p>Поэтому нет необходимости держать все браузеры на своем компьютере. Достаточно установить один-два браузера на самых популярных движках.</p>
40
<p>Не стоит гнаться за очень старыми версиями браузеров. Достаточна поддержка версий до года-двух, так как они обновляются в автоматическом режиме. Посмотрите на главную страницу Хекслета в браузере Internet Explorer 11, который вышел в 2013 году:</p>
40
<p>Не стоит гнаться за очень старыми версиями браузеров. Достаточна поддержка версий до года-двух, так как они обновляются в автоматическом режиме. Посмотрите на главную страницу Хекслета в браузере Internet Explorer 11, который вышел в 2013 году:</p>
41
<p>Результат выглядит страшно, но полноценная поддержка этого браузера не нужна. Поэтому сайт все равно считается кроссбраузерным, ведь он поддерживает все основные браузеры последних версий.</p>
41
<p>Результат выглядит страшно, но полноценная поддержка этого браузера не нужна. Поэтому сайт все равно считается кроссбраузерным, ведь он поддерживает все основные браузеры последних версий.</p>
42
<p>Кроссбраузерность важна для всех устройств. У мобильных браузеров тоже много специфичных моментов. Например, мобильные браузеры могут автоматически удалять рекламные блоки или сокращать время загрузки страницы. При удалении частей сайта браузер может ошибиться и удалить важный контент.</p>
42
<p>Кроссбраузерность важна для всех устройств. У мобильных браузеров тоже много специфичных моментов. Например, мобильные браузеры могут автоматически удалять рекламные блоки или сокращать время загрузки страницы. При удалении частей сайта браузер может ошибиться и удалить важный контент.</p>
43
<h2>Что тестировать при проверке кроссбраузерности</h2>
43
<h2>Что тестировать при проверке кроссбраузерности</h2>
44
<p>Не существует строгих критериев того, как сайт должен работать в разных браузерах. Обычно тестировщику нужно проверить работоспособность в определенных версиях. Эти версии определяются в зависимости от пользователей.</p>
44
<p>Не существует строгих критериев того, как сайт должен работать в разных браузерах. Обычно тестировщику нужно проверить работоспособность в определенных версиях. Эти версии определяются в зависимости от пользователей.</p>
45
<p>Например, государственная организация может использовать очень старые версии браузеров. Если ваш сайт нацелен на эту аудиторию, то необходимо поддерживать работу этих браузеров, даже в ущерб современным тенденциям и технологиям.</p>
45
<p>Например, государственная организация может использовать очень старые версии браузеров. Если ваш сайт нацелен на эту аудиторию, то необходимо поддерживать работу этих браузеров, даже в ущерб современным тенденциям и технологиям.</p>
46
<p>При тестировании кроссбраузерности проверяется:</p>
46
<p>При тестировании кроссбраузерности проверяется:</p>
47
<ul><li><strong>Дизайн</strong>. Элементы страницы не должны переноситься, исчезать, менять свою ширину, если это не предусмотрено в дизайне</li>
47
<ul><li><strong>Дизайн</strong>. Элементы страницы не должны переноситься, исчезать, менять свою ширину, если это не предусмотрено в дизайне</li>
48
<li><strong>Функциональность</strong>. Все интерактивные элементы должны адекватно работать в разных браузерах: кнопочки нажиматься, меню раскрываться, поля у форм обрабатывать введенный текст</li>
48
<li><strong>Функциональность</strong>. Все интерактивные элементы должны адекватно работать в разных браузерах: кнопочки нажиматься, меню раскрываться, поля у форм обрабатывать введенный текст</li>
49
</ul><p>Если у сайта нет конкретных требований по версиям браузеров, то используйте<a>статистику</a>. Поддерживайте те версии, у которых количество пользователей более 3-5%.</p>
49
</ul><p>Если у сайта нет конкретных требований по версиям браузеров, то используйте<a>статистику</a>. Поддерживайте те версии, у которых количество пользователей более 3-5%.</p>
50
<h2>Как тестировать кроссбраузерность</h2>
50
<h2>Как тестировать кроссбраузерность</h2>
51
<p>Чтобы протестировать разные версии браузеров, используют следующие способы:</p>
51
<p>Чтобы протестировать разные версии браузеров, используют следующие способы:</p>
52
<ul><li><strong>На своем устройстве</strong>. Можно установить себе на устройство самые популярные браузеры и проверить работу в них</li>
52
<ul><li><strong>На своем устройстве</strong>. Можно установить себе на устройство самые популярные браузеры и проверить работу в них</li>
53
<li><strong>Онлайн-сервисы</strong>. Самый популярный сервис -<a>BrowserStack</a>предлагает открытие сайта в самых разных комбинациях "Операционная система + браузер". Сервис платный, но есть бесплатная версия. Она урезанная, но вы можете зарегистрироваться и посмотреть, как это работает</li>
53
<li><strong>Онлайн-сервисы</strong>. Самый популярный сервис -<a>BrowserStack</a>предлагает открытие сайта в самых разных комбинациях "Операционная система + браузер". Сервис платный, но есть бесплатная версия. Она урезанная, но вы можете зарегистрироваться и посмотреть, как это работает</li>
54
<li><strong>Виртуальные машины</strong>. Если ваш сайт нужно тестировать в одних и тех же браузерах, то можно установить виртуальные машины. Плюс данного способа - вы полностью контролируете окружение, в котором работает сайт</li>
54
<li><strong>Виртуальные машины</strong>. Если ваш сайт нужно тестировать в одних и тех же браузерах, то можно установить виртуальные машины. Плюс данного способа - вы полностью контролируете окружение, в котором работает сайт</li>
55
</ul><h2>Выводы</h2>
55
</ul><h2>Выводы</h2>
56
<p>В этом уроке мы узнали, что такое кроссбраузерность, посмотрели на примеры отображения одинаковых элементов в разных браузерах. Также узнали, где тестировщику можно проверить страницу на кроссбраузерность. Повторим важные моменты:</p>
56
<p>В этом уроке мы узнали, что такое кроссбраузерность, посмотрели на примеры отображения одинаковых элементов в разных браузерах. Также узнали, где тестировщику можно проверить страницу на кроссбраузерность. Повторим важные моменты:</p>
57
<ul><li>Браузеры могут по-разному отображать одинаковые, с точки зрения разработки, элементы</li>
57
<ul><li>Браузеры могут по-разному отображать одинаковые, с точки зрения разработки, элементы</li>
58
<li>Разработчики CSS постоянно работают над новой функциональностью, а разработчики браузеров добавляют эту функциональность к себе. Из-за этого код, который работает в одном браузере, может не работать в другом</li>
58
<li>Разработчики CSS постоянно работают над новой функциональностью, а разработчики браузеров добавляют эту функциональность к себе. Из-за этого код, который работает в одном браузере, может не работать в другом</li>
59
<li>Протестировать сайт на кроссбраузерность можно с помощью трех способов:<ol><li>Использование разных браузеров на своем устройстве</li>
59
<li>Протестировать сайт на кроссбраузерность можно с помощью трех способов:<ol><li>Использование разных браузеров на своем устройстве</li>
60
<li>Использование онлайн-сервисов, например,<a>BrowserStack</a></li>
60
<li>Использование онлайн-сервисов, например,<a>BrowserStack</a></li>
61
<li>Использование виртуальных машин. Этот способ хорош, если сайт должен работать в определенной среде</li>
61
<li>Использование виртуальных машин. Этот способ хорош, если сайт должен работать в определенной среде</li>
62
</ol></li>
62
</ol></li>
63
</ul>
63
</ul>