Верстка Pixel Perfect за дизайн-макетом
Pixel Perfect — це методологія верстки, при якій реалізований HTML/CSS візуально збігається з дизайн-макетом з точністю до пікселя. На практиці абсолютна точність недосяжна (різні браузери рендерять шрифти по-різному, системи антиаліасингу відрізняються), але професійна верстка за макетом дає результат з похибкою 1–3px — непомітною в реальних умовах.
Що таке Pixel Perfect на практиці
Pixel Perfect — не про збіг пікселів на скриншотах, а про дотримання системи. Хороша верстка за макетом:
- Точно відтворює відступи, розміри, кольори з дизайну
- Використовує ті ж шрифти з тим же weight та size
- Коректно реалізує компоненти у всіх станах (hover, focus, disabled, active)
- Відповідає макету на всіх брейкпоінтах (не тільки desktop)
Погана верстка «за мотивами макету» — коли верстальник «на око» виставляє відступи, втрачає проміжні брейкпоінти та ігнорує стани.
Інструменти для роботи з Figma-макетами
Figma Dev Mode (вимагає Professional підписку від дизайнера) — показує точні розміри, відступи, CSS-властивості, експортує assets. Розробник кліка на елемент і бачить готовий CSS.
Figma Inspect — безплатна альтернатива з обмеженим функціоналом. Для базових завдань достатньо.
Розширення для браузера:
- PerfectPixel (ChromeExtension) — накладає PNG скриншота як напівпрозорий шар поверх сторінки. Дозволяє порівнювати верстку та макет візуально з регульованою прозорістю.
- PixelPerfect Pro — аналог з додатковими функціями позиціонування оверлею.
Робочий процес: експортуємо PNG сторінки з Figma з потрібним scale, завантажуємо в PerfectPixel, накладаємо на відкриту сторінку в браузері, зменшуємо прозорість до 30–50% — видні всі розбіжності.
Типові розбіжності та їх причини
Шрифти. Один і той же шрифт рендерится по-різному в macOS (субпіксельний антиаліасинг) та Windows (ClearType). Figma використовується переважно на macOS — верстка може виглядати не ідентично на Windows. Це нормально: завдання — дотримуватися системи, а не добиватися збігу на конкретній платформі.
line-height. У Figma line-height задається в пікселях або відсотках. У CSS — в відносних одиницях (1.5) або пікселях. Перерахунок: якщо у Figma текст 16px з line-height 24px → у CSS line-height: 1.5.
Box model. Figma розміри — як box-sizing: border-box (padding включен в розмір). Якщо CSS використовує content-box (за замовчуванням) — розміри зїдуть. Перший рядок будь-якого CSS-файлу:
*, *::before, *::after { box-sizing: border-box; }
Тені. Figma shadow: X: 0, Y: 4, Blur: 16, Spread: 0, Color: #000 @ 10% → CSS: box-shadow: 0 4px 16px rgba(0,0,0,0.1). Spread у Figma — це spread-radius у CSS (4-й параметр).
Border radius. При різних сторонах: border-radius: 8px 8px 0 0 (top-left, top-right, bottom-right, bottom-left за годинниковою стрілкою).
Адаптивна верстка за кількома макетами
Pixel Perfect застосовується для кожного брейкпоінту, під який надан макет. Стандартний набір: 375px (mobile), 768px (tablet), 1440px (desktop). Верстальник не «вгадує» проміжні стани — проектує плавний перехід між брейкпоінтами так, щоб на будь-якому проміжному розмірі екрану виглядало коректно.
Техніка: CSS clamp() для плавної зміни розмірів, min() та max() для гнучких відступів, grid та flexbox з gap замість фіксованих margin.
Кросс-браузерна сумісність
Pixel Perfect верстка повинна працювати у цільових браузерах. Для 2024–2025 років мінімальний стандарт:
- Chrome/Edge 120+
- Firefox 121+
- Safari 17+
- Mobile Safari (iOS 16+)
- Android Chrome
CSS Grid, Flexbox, CSS Variables, aspect-ratio, gap — все це підтримується у всіх актуальних браузерах. Перевіряйте через caniuse.com перед використанням експериментальних властивостей.
Строки
| Обсяг | Час |
|---|---|
| Лендинг (1 сторінка, 3 брейкпоінти) | 2–4 дні |
| 5–10 сторінок з компонентами | 7–14 днів |
| 20+ сторінок, дизайн-система | 3–5 тижнів |
Швидкість залежить від складності компонентів, наявності анімацій та кількості станів. Верстка з нуля за готовим Figma-макетом з Dev Mode — швидше, ніж за PDF або скриншотами.