Когда-то хороший верстальщик отличался умением заставить одну и ту же страницу выглядеть одинаково в Netscape, Internet Explorer, Opera и ещё каком-нибудь браузере, установленном у главного бухгалтера потому, что «сын поставил».
Сейчас хороший верстальщик всё чаще отличается умением не подключить React туда, где достаточно HTML, CSS и одной формы обратной связи. Прогресс, конечно, налицо, но иногда он почему-то ходит кругами.
После заметки «На смерть Netscape» я периодически возвращаюсь к мысли, насколько сильно изменилась верстка. Технически стало несравнимо легче. Психологически — местами даже тяжелее, потому что инструментов стало слишком много, а здравого смысла больше не завезли.
Как это было
Старую верстку сейчас можно показывать студентам как археологический слой. Таблицы для раскладки, пустые прозрачные gif-картинки для распорок, инлайновые стили, нарезка макета на такие кусочки, что потом без карты местности не разобраться.
Отступы жили своей жизнью. Цвета в разных браузерах иногда выглядели так, будто их согласовывали разные дизайнеры. Поддержка стандартов была похожа на обещания подрядчика «сделаем завтра»: формально есть, практически лучше проверять.
Особым видом магии были хаки под конкретные версии Internet Explorer. Человек, который знал, где поставить подчёркивание, звёздочку, лишний div и комментарий для условного подключения стилей, считался почти шаманом. Только бубен заменяли валидатором и пачкой распечатанных макетов.
Что стало
Сегодня базовая верстка цивилизованнее. Нормальный CSS, Flexbox, Grid, медиазапросы, переменные, calc(), clamp(), нормальные единицы измерения. Большинство браузеров ведёт себя предсказуемо. Safari иногда напоминает, что расслабляться не надо, но это уже не та мясорубка в которой мы выживали.
Блоки выравниваются без таблиц. Сетки — средствами CSS, а не шаманством. Адаптивность стала нормой, а не отдельной строкой в смете. Изображения отдаются в разных размерах. Типографика управляемая.
Если бы всё это показать верстальщику из 2001 года, он бы сначала обрадовался, потом спросил бы где подвох. И был бы прав.
Потому что подвох теперь другой. Лендинг на пять экранов требует сборщик, фреймворк, набор зависимостей, препроцессор, постпроцессор, менеджер пакетов и человека, который знает почему это всё перестало собираться после обновления Node.js. При этом результат — заголовок, картинка, три преимущества, форма и кнопка «Оставить заявку». И весит это счастье как архив фотографий с отпуска. Ну и зачем?
Раньше мы ставили костыли, потому что браузеры были слабые. Сейчас ставим костыли, потому что архитектура родилась раньше понимания задачи. Плюс ещё старое доброе «пиксель в пиксель». В эпоху фиксированных макетов это хотя бы можно было обсуждать. Сегодня у пользователя может быть телефон, планшет, ноутбук, монитор с ретиной, браузер с увеличенным масштабом, системные настройки доступности и скорость интернета, от которой плакал бы модем 28800 bps. Современная верстка должна быть не пиксельной, а устойчивой. Не ломаться от длинного заголовка. Не разваливаться при увеличении шрифта. Не превращать мобильную страницу в горизонтальный свиток отчаяния.
И ещё. Старая школа до сих пор помогает — хоть это и звучит как дедовское «а вот в наше время». Когда ты помнишь тяжёлые картинки, медленные соединения и странные браузеры, автоматически думаешь о весе страницы, порядке загрузки, структуре документа и том, что пользователь пришёл получить информацию, а не любоваться сборкой. HTML — не подложка под JavaScript. CSS — не украшательство после «настоящей разработки». Нормальная разметка и аккуратная верстка до сих пор влияют на скорость, доступность, SEO и удобство поддержки. И если вы думаете что это очевидно — откройте любой средний проект на React ради трёх карточек, и вам станет грустно.
А таблицы пусть лежат в музее. Хотя для писем их ещё рано хоронить — там свой маленький Netscape до сих пор жив и шевелится.