На что ориентируются при проверке корректности верстки веб-страницы?

Эталоном для сравнения служит дизайн-макет, созданный в инструментах вроде Figma, Adobe XD или Sketch. Проверка включает несколько аспектов:

Основные критерии проверки:

1. Pixel-Perfect соответствие (где требуется): Точное совпадение размеров, отступов, цветов и шрифтов с макетом. Инструменты: PixelPerfect-плагины для браузеров, ручное измерение.
2. Адаптивность и отзывчивость: Корректное отображение и поведение на разных разрешениях экрана (мобильные, планшеты, десктоп). Проверка через DevTools или реальные устройства.
3. Кросс-браузерная и кроссплатформенная совместимость: Отображение и функциональность в основных браузерах (Chrome, Firefox, Safari, Edge).
4. Доступность (Accessibility): Соответствие стандартам WCAG (контрастность, семантическая разметка, работа с клавиатуры, ARIA-атрибуты).
5. Юзабилити: Логичность и удобство интерфейса, даже если он технически соответствует макету.

Пример проверки критичных стилей через DevTools Console:

// Проверка соответствия ключевых стилей элементу
const button = document.querySelector('.primary-btn');
const styles = window.getComputedStyle(button);
console.log('Цвет фона:', styles.backgroundColor); // Должно быть #4CAF50
console.log('Отступы:', styles.padding); // Должно быть 12px 24px
console.log('Ширина:', styles.width); // Должно быть 120px

Важно: Полное pixel-perfect соответствие часто требуется только для ключевых страниц. Для остальных важнее сохранение общего вида, адаптивность и функциональность.