Классика жанра. Верстальщик сдал работу, заказчик принял — у обоих на экране всё идеально. А через пару дней приходит сообщение от клиента: «У вас на сайте кнопка заказа налезает на текст, ничего не нажать». Заказчик в панике открывает сайт — у него по-прежнему всё хорошо. Оказывается, у клиента другой браузер, и в нём вёрстка съехала. Виноватых нет: верстальщик «сделал как договаривались», заказчик «проверял — было нормально», а сайт у части посетителей развалился, и они уходят.
Корень в простой, но неочевидной вещи: один и тот же сайт в разных браузерах и на разных устройствах выглядит по-разному. Браузер — это программа, которая превращает код в картинку, и каждый делает это чуть по-своему. Если вёрстку проверяли только в одном браузере, в остальных вылезают сюрпризы, которых никто не видел до жалоб. Кроссбраузерная вёрстка — это когда верстальщик заранее учёл различия и проверил сайт везде. Разберём, почему так происходит, чем кроссбраузерность отличается от кроссплатформенности и как заказчику застраховаться от съехавшего сайта ещё до начала работы.
Эта статья — часть раздела про вёрстку. Смежные темы: как проверить качество, адаптивная вёрстка, как составить ТЗ.
Что вы узнаете из статьи
- Почему один сайт выглядит по-разному в разных браузерах
- Чем кроссбраузерность отличается от кроссплатформенности
- Где чаще всего ломается вёрстка и почему виноват айфон
- Как самому проверить сайт в браузерах за десять минут
- Что прописать заранее, чтобы не получить съехавший сайт
Почему один сайт выглядит по-разному
Представьте, что вы дали одну и ту же ноту нескольким музыкантам с разными инструментами. Нота одна, а звучит у каждого чуть по-своему — у скрипки так, у пианино иначе. Браузеры устроены похоже: вёрстка задаёт правила, а каждый браузер исполняет их на свой лад. Один и тот же код Chrome, Safari и Firefox могут отрисовать с мелкими различиями — где-то отступ выйдет больше, где-то элемент встанет чуть иначе, где-то самая свежая возможность ещё не поддерживается.
В большинстве случаев различия мелкие и незаметные. Но иногда они накапливаются или попадают в уязвимое место — и сайт, идеальный в браузере верстальщика, в другом разъезжается: блоки наезжают, кнопки уплывают, отступы ломаются. Причём верстальщик об этом может искренне не знать, если проверял только у себя. Он не халтурил — он просто не посмотрел в другой браузер.
Именно поэтому кроссбраузерная вёрстка — это не само собой разумеющееся, а отдельная работа и отдельная ответственность. Верстальщик должен заранее знать про различия браузеров, писать код с их учётом и, главное, проверять результат во всех, где будут ваши посетители. Это входит в понятие качественной вёрстки, но только если об этом договорились, — иначе формально хватит и одного браузера.
Кроссбраузерность и кроссплатформенность: в чём разница
Эти два слова часто путают, хотя речь о разных, пусть и связанных вещах.
Кроссбраузерность — про разные браузеры. Сайт должен правильно выглядеть в Chrome, Safari, Firefox и других популярных браузерах, которыми пользуются люди. Это про программу, через которую человек смотрит на сайт.
Кроссплатформенность — про разные устройства и операционные системы. Компьютер на Windows, макбук, айфон, телефон на Android — везде сайт должен вести себя достойно. Это про железо и систему, на которых человек сидит.
Разница тонкая, но важная: сайт может прекрасно работать в разных браузерах на компьютере и при этом ломаться конкретно на айфоне. Поэтому проверять надо по обеим осям — и в разных браузерах, и на разных устройствах. Тесно связана с этим и адаптивная вёрстка: мало того что сайт должен корректно отображаться в разных браузерах, он ещё должен перестраиваться под разные размеры экранов. Хорошая вёрстка держит в голове все три вещи сразу — браузеры, устройства, размеры.
Где чаще всего ломается и почему айфон — особый случай
На практике у большинства проблем кроссбраузерности есть любимое место — браузер на айфоне. Он устроен иначе, чем большинство остальных, и многие мелкие глюки вёрстки вылезают именно там: где-то иначе считаются размеры, где-то по-особому ведут себя прокрутка и формы, где-то не поддерживается то, что работает везде ещё. Верстальщик, который проверяет только на своём компьютере в одном браузере, этот пласт проблем просто не видит.
Поэтому, когда речь заходит о проверке, айфону уделяют особое внимание. Если у вас или у верстальщика есть айфон — обязательно откройте сайт на нём, а не только на компьютере. Доля пользователей айфонов велика, и съехавший на нём сайт — это реальная потеря посетителей, а не теоретическая.
Хорошая новость: базовую проверку кроссбраузерности заказчик делает сам, без специальных навыков. Установите два-три популярных браузера, откройте сайт в каждом и на телефоне, пройдитесь по страницам: не разъехалось ли что-то, работают ли кнопки и формы. Как встроить это в общую приёмку вместе с другими тестами, разобрано в материале про то, как проверить качество вёрстки. Для большинства сайтов ручного просмотра в нескольких популярных браузерах достаточно; глубокая проверка на десятках версий нужна редко и делается специальными сервисами.
Как застраховаться заранее
Самая надёжная защита от съехавшего сайта ставится не на приёмке, а до начала работы. Если кроссбраузерность не прописана в требованиях, верстальщик формально вправе проверить вёрстку только в своём браузере — и будет прав, а съехавший у клиентов сайт станет вашей головной болью и поводом для спора «кто виноват».
Поэтому в задании на вёрстку стоит прямо перечислить, в каких браузерах и на каких устройствах сайт должен выглядеть и работать правильно. Не «во всех» абстрактно, а конкретно: популярные браузеры на компьютере, браузер на айфоне, телефоны на Android. Тогда кроссбраузерность входит в объём работы, проверяется на приёмке и не всплывает потом сюрпризом. Как грамотно оформить это и другие требования, чтобы ничего не потерялось, — в материале про то, как составить ТЗ на вёрстку.
Это та ситуация, где одна строчка в задании экономит недели нервотрёпки. Прописали браузеры до старта — верстальщик заложил их в работу и проверил, приёмка прошла спокойно. Не прописали — играете в лотерею, где проигрыш оплачиваете жалобами клиентов и поиском, кто будет чинить уже сданный сайт.
Как платформа помогает не получить съехавший сайт
На Где.Эксперт верстальщиков видно по отзывам и проектам, и заметно, кто аккуратно проверяет работу в разных браузерах, а у кого в отзывах мелькают истории про «на айфоне всё разъехалось». Это помогает сразу выбрать того, для кого кроссбраузерность — норма, а не неожиданное дополнительное требование.
Требования к браузерам и устройствам удобно проговорить и зафиксировать до старта, чтобы они вошли в работу. Оплата идёт по факту выполнения, после приёмки, на которой вы сами проверяете сайт в нужных браузерах, — а отзывы прошлых заказчиков страхуют от исполнителя, который тестирует только у себя и сдаёт съехавший у других сайт.
Часто задаваемые вопросы
Что такое кроссбраузерная вёрстка простыми словами?
Вёрстка, которая одинаково правильно выглядит во всех популярных браузерах и на разных устройствах. Браузеры по-своему рисуют код, и без специальной аккуратности сайт, идеальный в одном, разъезжается в другом.
Почему сайт по-разному выглядит в браузерах?
Каждый браузер — отдельная программа со своим способом превращать код в картинку. Одни правила они трактуют чуть по-разному. Если проверяли только в своём браузере, в остальных вылезают сюрпризы.
Чем кроссплатформенность отличается от кроссбраузерности?
Кроссбраузерность — про разные браузеры, кроссплатформенность — про разные устройства и системы. Сайт может работать в разных браузерах на компьютере, но ломаться на айфоне. Хорошая вёрстка учитывает и то, и другое.
Как проверить кроссбраузерность?
Открыть сайт в двух-трёх популярных браузерах, обязательно на айфоне, и пройтись по страницам. Если где-то картинка отличается — недоработка. Для большинства задач ручного просмотра хватает.
Как застраховаться от съехавшего сайта?
Прописать кроссбраузерность в требованиях до старта: какие браузеры и устройства. Тогда это входит в работу и проверяется на приёмке, а не всплывает из жалоб клиентов.
Заключение
Один и тот же сайт в разных браузерах и на разных устройствах выглядит по-разному — это не баг, а устройство веба. Каждый браузер рисует код на свой лад, и вёрстка, идеальная в одном, может съехать в другом, особенно на айфоне. Кроссбраузерность и кроссплатформенность — это отдельная работа и ответственность, а не само собой разумеющееся приложение к любой вёрстке.
Защита проще, чем кажется, и ставится заранее. Базовую проверку — пара браузеров плюс айфон — заказчик делает сам за десять минут. А чтобы не доводить до жалоб клиентов, достаточно одной строчки в задании: перечислить, в каких браузерах и на каких устройствах сайт должен работать правильно. Прописали до старта — это вошло в работу и проверено на приёмке. Не прописали — играете в лотерею, где проигрыш оплачиваете потерянными посетителями. А найти того, для кого проверка в браузерах — норма, проще там, где видны отзывы и проекты.
Найдите верстальщика на Где.Эксперт — пропишите браузеры в требованиях и платите по факту выполнения.