Pixel Perfect — вёрстка, совпадающая с макетом

1. Что значит «точно» по макету

Типовые проверки «на глаз» подводят: разница в 4–8 px почти не видна по отдельности, но «наползает» на все элементы разом. Потому и вводят инструментальное сравнение.

• совпадение размеров блоков и расстояний между ними;
• идентичная типографика: размер шрифта, межстрочное, цвет;
• правильные состояния: hover, focus, active;
• корректное поведение на нужных ширинах экрана.

2. Подготовка: экспорт превью из Figma

Сверяться удобно по прозрачному превью макета, наложенному на страницу:

1. в Figma выбери фрейм → Export → PNG с прозрачностью;
2. ширина экспорта = ширине контента страницы (например, 1440 px);
3. экспортируй и держи картинку рядом;
4. используй расширение сравнения (PerfectPixel и аналоги, см. ниже).

Figma → Dev Mode → выделить элемент
Размеры:  W 320 · H 84 · X 48 · Y 96
Цвет:     #2563EB
Текст:    20px/28 Inter SemiBold

3. Инструмент сравнения

Расширения для браузера (например, PerfectPixel) накладывают скриншот макета поверх сайта с настраиваемой прозрачностью (начни с 50%):

• включи расширение → загрузи превью макета;
• полупрозрачный макет лежит поверх страницы;
• двигай его и правь CSS, пока всё не совпадёт.

4. Логика сетки и позиционирования

Не «летай» по пикселям случайными числами. Сначала разбери логику макета:

.container {
  max-width: 1200px;      // центр: margin: 0 auto
  padding: 0 24px;        // поля — по макету, не «на глаз»
}

.row {
  display: grid;
  grid-template-columns: 2fr 1fr;   // если карточка занимает 2/3
  gap: 24px;
}

5. Анатомия отступов: margin vs padding

Где стоит какой:

.card {
  padding: 24px;            // внутренние поля карточки
}
.cards {
  display: grid;
  gap: 16px;                // расстояния между карточками
}

6. Точность типографики

Шрифты — самая видимая часть Pixel Perfect. Настрой точно:

h1 {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.5px;
  color: #0f172a;
}

• подключай те же шрифты, что в макете (WebFont, Google Fonts);
• следи за line-height, letter-spacing;
• системные шрифты работают по-разному в разных ОС — учти это.

7. Состояния и интерактив

Сверь не только «спокойное» состояние:

.btn:hover       { background: #1d4ed8; }
.btn:focus-visible { outline: 2px solid #93c5fd; }
.btn:active      { transform: scale(0.98); }

// переключение состояний прямо в DevTools
// Elements → правая панель → :hov → включить hover

8. Адаптивность: не ломай при резине

Pixel Perfect начинается с десктопа, но жить должен и на других экранах:

@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .menu { display: none; }        // или меню-бургер
}

Мобильная проверка: Device Mode в Chrome DevTools (курс) + CSS-правила из курса CSS.

Практический чек-лист

1. один и тот же viewport (1440 px) и зум 100%;
2. загружено цветное превью макета с прозрачностью 50%;
3. совпадают: размеры секций, поля, сетка, колонки;
4. точно сбита типографика и палитра (hex из макета);
5. проверены hover/focus/active и формы;
6. иконки: размеры не «прыгают», svg замыты в нужном масштабе;
7. прокрутка — без «прыжков» контента (CLS из курса Lighthouse).

9. Приёмы быстрого сравнения

Работа с наложением — это навык, который прокачивается приёмами:

• меняй прозрачность макета горячими клавишами расширения, чтобы «моргать» различиями;
• сравнивай по секциям: приблизься к конкретному отступу, а не держи всю страницу в кадре;
• сверяй не только координаты, но и высоту строки текста — line-height даёт расхождение, незаметное на глаз;
• используй направляющие сетки макета вместо линейки по каждому пикселю.

PerfectPixel: управление слоем
[ ] — показать/скрыть
+ / - — прозрачность
стрелки — сдвиг макета

10. Иконки и изображения

Графика — частый источник расхождений при точной вёрстке:

• SVG-иконки должны иметь одинаковый viewBox и «сидеть» по базовой линии;
• фото обрезай контейнером: object-fit: cover, а не растяжением пропорций;
• давай ретину через srcset: на 2x-экранах «мыльный» вид сразу выдаёт неаккуратность;
• следи за stroke-width однотипных иконок — разница в 0.5 px видна на выравнивании.

// правильная вставка картинки в блок
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   // не ломает пропорции
}

11. Автотесты визуальных регрессий

Pixel Perfect вручную — это база. Для повторяемых проектов подключают визуальные тесты: браузер делает скриншот, а тест сравнивает его с эталоном.

// пример: Playwright + visual regression
test("главная не изменилась", async ({ page }) => {
  await page.goto("/");
  await page.waitForLoadState("networkidle");
  await expect(page).toHaveScreenshot("home.png");
});

• храни эталонные скриншоты в репозитории и обновляй их только осознанно;
• тестируй ключевые ширины: 1440, 1024, 768, 390;
• задавай небольшой порог (threshold) для антиалиасинга, иначе ложные падения.

12. Процесс: чек-лист перед сдачей

Дисциплина важнее инструмента. Перед сдачей макета пройдись по пунктам:

1. обновлял ли ты макет в Figma после правок дизайнера?
2. сверены ли состояния hover/focus/disabled на всех интерактивных элементах;
3. проверены ли пустые и крайние состояния (длинный текст, одна карточка в ряду);
4. сделан ли прогон визуальных регрессий на ключевых ширинах;
5. зафиксированы ли эталонные скриншоты для будущих спринтов.

13. Базовая линия и типографический ритм

Типографика в макете почти всегда подчинена «базовой линии»: все строки текста стоят на общей невидимой сетке с шагом (обычно 4 или 8 px). Если подгонять каждый блок отдельно, межстрочные интервалы «пляшут».

// единый вертикальный ритм
:root {
  --base-line: 8px;
  --text-lg: calc(var(--base-line) * 6);   // 48px — заголовок
  --text-md: calc(var(--base-line) * 4);   // 32px — подзаголовок
  --text-sm: calc(var(--base-line) * 3);   // 24px — текст
}

h1 { font-size: 40px; line-height: var(--text-lg); }
p  { margin: 0 0 var(--base-line); }

• line-height держи кратно шагу базовой сетки — тогда строки соседних колонок совпадают;
• проверяй выравнивание текста с соседними элементами по «оптической» середине, а не по контейнеру;
• сверь скругления, толщины линий и тени — они подчиняются тому же шагу.

14. Дизайн-токены: из макета в CSS-переменные

«Магические числа» из макета — источник расхождений: дизайнер поменял цвет, а ты ищешь его по шестнадцати местам. Дизайн-токены выносят палитру, отступы и радиусы в именованные переменные.

// tokens.css — генерируется из Figma Variables
:root {
  --color-primary: #2563eb;
  --color-surface: #ffffff;
  --space-2: 8px;
  --space-3: 12px;
  --radius-md: 12px;
}
.btn { background: var(--color-primary); padding: var(--space-2) var(--space-3); }

• начни с 8–12 токенов: цвет, фон, пространство, радиус, тень;
• поддерживай таблицу «токен → значениe из Figma» рядом с README проекта;
• при обновлении макета правь токен, а не отдельные селекторы.

15. Версии макета и коммуникация с дизайнером

Половина «несовпадений» с макетом — не ошибки вёрстки, а устаревшая версия дизайна. Выстрой процесс фиксации макета:

1. зафиксируй версию макета в Figma (Version History) перед стартом вёрстки;
2. комментируй спорные места прямо в макете (Comment), а не в чате;
3. нормализуй единицы: если дизайнер мерит в процентах/em — договорись о px для сетки;
4. после правок дизайнера переснимай превью и обновляй эталоны регрессий.

// типовой цикл правок
макет v2.1 (зафиксирован) -> вёрстка -> сверка ->
список расхождений -> фикс в макете ИЛИ в CSS -> обновление эталона

16. Производственный чек-лист сверки

Перед сдачей прогони короткий сценарий, который ловит 90% проблем:

17. Кроссбраузерные и кроссплатформенные различия

Один и тот же CSS на Windows, macOS и мобильных выглядит по-разному: рендеринг шрифтов (ClearType на Windows, subpixel-сглаживание на macOS), высота строк, толщина обычного текста и скроллбары, которые «съедают» ширину контейнера.

• проверяй страницу минимум в трёх браузерах: Chrome, Firefox, Safari;
• scrollbar-gutter: stable на body сохраняет сетку при появлении полосы прокрутки;
• line-height системных шрифтов разный — после подключения кастомного шрифта сверись с макетом на обеих ОС;
• subpixel-рендеринг даёт ±0.5 px — закладывай небольшой допуск в автотесты.

body {
  scrollbar-gutter: stable;   // сетка не «прыгает»
}
// допуск в сравнении скриншотов
expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.02 });

18. Плавная адаптивная типографика: clamp()

Между брейкпоинтами размер шрифта часто меняется скачком, а макет нарисован плавно. Функция clamp() задаёт минимум, предпочтительное (от ширины вьюпорта) и максимум. Чтобы попасть «в пиксель», считай формулу по двум точкам макета:

// от 24px на 390px до 40px на 1440px
font-size: clamp(24px, calc(16px + 1.7vw), 40px);

• проверяй крайние точки: на границах промежуточные значения могут «споткнуться»;
• line-height тоже делай плавным, но с минимальным шагом, иначе строки «текут» при resize;
• для героичных заголовков фикс в макете честнее, чем vw-магия без точной формулы.

19. Доступность как часть точной вёрстки

«Точно по макету» включает состояния для людей: фокус-кольца, контраст, крупный текст. Фокус не всегда нарисован в макете — согласуй его один раз и держи одинаковым на всех элементах:

.card:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;   // не «съедает» отступы макета
}

• фокус должен быть виден и на белом, и на тёмном фоне — используй двойной контур или box-shadow двух цветов;
• контраст не ниже AA: проверь серые иконки и плейсхолдеры форм;
• крупный текст (200%) не должен ломать сетку — проверь карточки и кнопки при зумме браузера.

20. Допуски и процесс сверки

Идеального совпадения «в ноль» на всех экранах не бывает. Договорись с командой о допусках заранее — это экономит нервы и споры:

• начни с сетки и отступов — это даёт 80% визуального совпадения;
• правь по одному типу изменений: типографика отдельно, отступы отдельно;
• после каждой правки — новый прогон сравнения, а не «проверю вечером».

Что дальше

Практикуй на курсах HTML и CSS: сверстай карточку товара по макету из Figma и добейся Pixel Perfect. Процесс ускорит Emmet, стили — Sass, а качество проверит Lighthouse.

← Вернуться к курсам