В уроке про вёрстку и адаптивность вы разбирали, как продукт подстраивается под разные РАЗМЕРЫ экрана: телефон, планшет, десктоп. Но экран одного и того же размера может отрисоваться по-разному в разных БРАУЗЕРАХ — Chrome, Firefox, Safari, — потому что у каждого браузера свой движок отрисовки, который переводит HTML и CSS в картинку на экране. Один и тот же CSS-код каждый движок может понять чуть иначе.
Чему научишься за этот урок:
— отличать кроссбраузерность от адаптивности и понимать, что значит «работает одинаково»;
— замечать типичные проблемы локализации, микротекстов и навигации;
— строить тест-матрицу браузер×устройство и расставлять приоритет проверки не поровну, а по факту использования.
Кроссбраузерность: одинаково — не значит пиксель в пиксель
Кроссбраузерность — это когда продукт одинаково КОРРЕКТНО работает в основных браузерах: любая кнопка нажимается, форма отправляется, текст читается. Это не значит, что в Chrome и Safari страница выглядит абсолютно идентично до пикселя — у разных движков отрисовки (Blink в Chrome, Gecko в Firefox, WebKit в Safari) чуть отличаются шрифты по умолчанию, отступы, поведение отдельных CSS-свойств. Дефект кроссбраузерности — это когда различие МЕШАЕТ пользоваться продуктом (кнопка съехала так, что не видна, или форма вообще не отправляется), а не когда просто чуть иначе выглядит тень у карточки курса.
Локализация: язык и региональные форматы
Не путать с локализацией дефекта из главы 6 — там про шаги воспроизведения, здесь — про язык и региональные форматы. Локализация — корректность языка интерфейса и региональных форматов данных для конкретной аудитории. Одна и та же дата может быть записана как 31.12.2026 (российский формат: день.месяц.год) или как 12/31/2026 (американский формат: месяц/день/год) — если продукт настроен на одну локаль, а показывает дату в формате другой, пользователь может прочитать её неверно. То же с разделителем дробной части: «1500,50 ₽» (запятая) против «1500.50» (точка) — а также с положением и символом валюты.
Микротексты: мелкие детали, которые расходятся между экранами
Микротексты — короткие фрагменты интерфейса: подписи кнопок, текст в пустых полях (плейсхолдеры), сообщения об ошибках. Их часто копируют с одного экрана на другой не глядя, и получаются нестыковки. Пример с нашего полигона: на экране записи на курс кнопка называется «Отправить заявку», а на очень похожем по смыслу экране оплаты — «Подтвердить». Обе кнопки выполняют одно и то же действие — переход к следующему шагу, — но названы по-разному, и пользователь может засомневаться, точно ли это один и тот же тип действия.
Ссылки и навигация
Отдельная зона проверки — ссылки и переходы между экранами. Три типичных дефекта: битая ссылка (ведёт на несуществующую страницу или показывает ошибку), тупик (пользователь попал на экран, откуда нет очевидного пути ни назад, ни дальше), несоответствие текста ссылки её реальному назначению (ссылка называется «Все курсы», а на самом деле ведёт на страницу промокодов).
Тест-матрица: браузер × устройство
Проверить продукт во ВСЕХ браузерах на ВСЕХ устройствах при ограниченном времени нереально. Тест-матрица — таблица, где по одной оси браузеры, по другой — типы устройств, а на пересечении — приоритет проверки. Приоритет распределяется не поровну между ячейками, а по тому, чем реально пользуется аудитория продукта: если основная масса пользователей заходит с мобильных устройств через Safari и Chrome, а Firefox на десктопе — редкость, то и приоритет проверки должен быть выше именно там, где реальные пользователи, а не одинаковым по всей таблице.
Десктоп Мобильный
+---------------+---------------+
Chrome | Высокий | Высокий |
+---------------+---------------+
Safari | Средний | Высокий |
+---------------+---------------+
Firefox | Низкий | Низкий |
+---------------+---------------+
Матрица — не про то, чтобы проверить всё поровну, а про то, чтобы не потратить одинаковое время на редкий Firefox на десктопе и на популярный Chrome на мобильном.
Итог:
— кроссбраузерность — это функциональная корректность в разных движках отрисовки, а не пиксельная идентичность;
— локализация — про корректность языка и региональных форматов: дата, разделитель дробной части, валюта;
— микротексты — мелкие фрагменты интерфейса, которые из-за копирования без проверки расходятся между похожими экранами;
— ссылки и навигация проверяются на битые переходы, тупики и несоответствие текста ссылки её назначению;
— тест-матрица браузер×устройство расставляет приоритет проверки по реальной популярности у аудитории, а не поровну по всем ячейкам.
Контрольный вопрос. Что означает «кроссбраузерность» продукта?
Подсказка: Ключевое слово — «корректно», а не «идентично».
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Почему одна и та же страница может отрисовываться по-разному в Chrome и Safari при одинаковом размере экрана?
Подсказка: Дело не в размере экрана — подумай, что технически отличается в самих браузерах.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какой пример иллюстрирует проблему локализации?
Подсказка: Локализация — про язык и региональные форматы данных, а не про названия кнопок или битые переходы.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что такое микротекст в интерфейсе?
Подсказка: Речь про очень короткие фрагменты текста интерфейса, не про программный код.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Как называется дефект, когда пользователь попадает на экран, с которого нет очевидного пути ни назад, ни дальше? Ответь одним словом.
Подсказка: Слово описывает ощущение «дальше идти некуда».
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Как называется таблица, где по одной оси браузеры, по другой — типы устройств, а на пересечении — приоритет проверки? Ответь двумя словами: «тест-…».
Подсказка: Второе слово — термин из математики, обозначающий прямоугольную таблицу данных.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что из перечисленного — пример битой ссылки?
Подсказка: Битая ссылка — про то, куда РЕАЛЬНО ведёт переход, а не про совпадение текста.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какие из утверждений про приоритет в тест-матрице браузер×устройство верны (выбери все подходящие)?
Выберите все верные варианты.
Подсказка: Смысл матрицы — расставить приоритеты по факту использования, а не перечислить всё существующее или проверять поровну.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. На полигоне на экране регистрации кнопка называется «Зарегистрироваться», а на очень похожем по смыслу экране записи на курс аналогичная по действию кнопка (тоже переход к следующему шагу) называется «Продолжить». Это не про поломанную функцию — обе кнопки работают. Ответь одним словом (в единственном числе), к какой категории дефектов из урока это относится.
Подсказка: Вспомни термин про короткие фрагменты интерфейса, которые расходятся между похожими экранами.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Ученик тестирует полигон в Safari на iPhone и находит: дата заказа показана как «12/31/2026» вместо ожидаемого «31.12.2026». Объясни в 2-3 предложениях, к какой категории дефектов (кроссбраузерность, локализация или микротекст) это относится и почему не к двум другим.
Критерий приёмки: указано, что это локализация — несоответствие регионального формата даты, а не поломка кнопки/текста и не разница отрисовки между браузерами; объяснено, что дефект не в том, что что-то не работает технически (значит не кроссбраузерность), и не в подписи короткого элемента интерфейса (значит не микротекст), а именно в формате данных под регион пользователя.
Подсказка: Подумай, что именно не так: КАК работает элемент, КАК он назван, или В КАКОМ ФОРМАТЕ показаны данные.
✅ Готово, если: ответ раскрывает то, что просит критерий приёмки в задании выше.
Онлайн-проверка ответа появится позже
Задание. Составь тест-матрицу для полигона: 3 браузера (Chrome, Safari, Firefox) × 2 типа устройств (десктоп, мобильный) — 6 ячеек. Известно из аналитики полигона: около 70% пользователей заходят с мобильных устройств, из них большинство — через Safari (iPhone) и Chrome (Android); Firefox используют меньше всего, и почти всегда с десктопа. Расставь приоритет (высокий/средний/низкий) для каждой из 6 ячеек и обоснуй в 2-3 предложениях, почему именно так, а не поровну.
Критерий приёмки: указаны все 6 комбинаций браузер×устройство; приоритет для Chrome-мобильный и Safari-мобильный — высокий (совпадает с данными о большинстве мобильных пользователей на этих браузерах); приоритет для Firefox-мобильный — низкий (аналитика говорит, что Firefox используют почти всегда с десктопа, то есть на мобильном он практически не встречается); обоснование опирается на данные аналитики, а не на произвольное предпочтение.
Подсказка: Обоснование должно опираться на то, где по данным аналитики реально находятся пользователи, а не идти поровну по всем 6 ячейкам.
✅ Готово, если: ответ раскрывает то, что просит критерий приёмки в задании выше.
Онлайн-проверка ответа появится позже
Что дальше
Мы разобрали, как проверять продукт за пределами одного браузера и одного языка: кроссбраузерность, локализацию, микротексты, ссылки и приоритеты тест-матрицы. Дальше — доступность: как убедиться, что продукт работает не только мышью и не только для пользователя без ограничений по зрению.
