Какие знаешь виды верстки?

Виды веб-верстки в контексте тестирования

Как QA Engineer, я рассматриваю виды верстки не только с точки зрения их технической реализации, но и с позиции тестирования, поскольку каждый подход создает уникальные риски и требует специфичных проверок. Основные виды можно разделить по историческому развитию и применяемым технологиям.

1. Табличная верстка (Table-based Layout)

Это исторически первый и сейчас практически deprecated подход, где структура страницы строится на HTML таблицах (<table>).

<table width="100%" border="0">
  <tr>
    <td colspan="2" class="header">Шапка сайта</td>
  </tr>
  <tr>
    <td width="20%">Меню</td>
    <td width="80%">Основное содержимое</td>
  </tr>
</table>

Ключевые точки для тестирования:

• Семантичность и доступность: Таблицы для верстки нарушают семантику HTML, что критично для screen readers и SEO. Проверяем с помощью инструментов типа axe-core.
• Адаптивность: Верстка крайне негибкая. Необходимо проверять поведение на разных разрешениях — элементы часто «разваливаются».
• Производительность: Может быть низкой из-за сложной и глубокой структуры таблиц.
• Поддержка современных CSS: Часто встречаются inline-стили, трудные для модификации.

2. Блочная верстка (Div-based Layout) с Float

Эволюция от таблиц к использованию блочных элементов (<div>) и технологии CSS Float для размещения.

.header { width: 100%; }
.sidebar { float: left; width: 20%; }
.content { float: left; width: 80%; }
.clearfix { clear: both; }

Ключевые точки для тестирования:

• «Выпадение» элементов из потока: Элементы с float могут непредсказуемо перекрывать друг друга. Тестируем визуальный рендеринг на всех ключевых страницах.
• Сложность поддержки сложных сеток: Особенно вертикальных. Проверяем целостность макета при динамическом изменении содержимого.
• Адаптивность: Требует написания множества медиа-запросов. Необходимо тщательное кросс-браузерное тестирование, особенно в старых IE.

3. Верстка на Flexbox (Flexible Box Layout)

Современный CSS модуль, предназначенный для создания одномерных (по строке или колонке) гибких и эффективных layout.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item { flex-grow: 1; }

Ключевые точки для тестирования:

• Браузерная поддержка: Хотя поддержка отличная, нужно проверять крайние случаи в старых браузерах (например, IE11 с частичной поддержкой).
• Направление оси (flex-direction): Неправильное применение может «сломать» порядок элементов на мобильных. Проверяем логический порядок фокуса для accessibility.
• «Сжатие» содержимого (flex-shrink): Элементы могут непредвиденно уменьшаться. Тестируем с контентом разной длины.

4. Верстка на CSS Grid Layout

Самый мощный и современный двухмерный модуль CSS для создания сложных сеток любого типа.

.page-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

Ключевые точки для тестирования:

• Сложность конфигурации: Ошибки в grid-template-areas или grid-column могут полностью разрушить layout. Акцент на визуальном регрессионном тестировании.
• Адаптивность через Grid: Проверяем, как переопределяются grid-template-columns в медиа-запросов — часто точка сбоя.
• Сочетание с Flexbox: Часто используются вместе. Тестируем взаимодействие, особенно вложенные контейнеры.

5. Адаптивная (Responsive) и Отзывчивая (Adaptive) верстка

Это не отдельные технологии, а параметры подходов, реализуемых через вышеуказанные методы (чаще Grid/Flexbox).

• Responsive: Один fluid layout, который непрерывно адаптируется через медиа-запросы (media queries) и относительные единицы (%, fr, vw).
• Adaptive: Несколько фиксированных макетов («брейкпоинтов»), которые переключаются при определенных ширинах.

Ключевые точки для тестирования (общие):

• Тестирование брейкпоинтов: Не только на стандартных ширинах (320px, 768px, 1024px), но и между ними, чтобы избежать «провалов».
• Контент и функциональность: Убедиться, что на всех разрешениях доступен весь необходимый контент и рабочие элементы управления (нет скрытых кнопок, нечитаемых текстов).
• Performance: Медиа-запросы и скрытие/показ элементов могут влиять на скорость загрузки и отрисовки. Проверяем в Chrome DevTools Performance Tab.

Как QA Engineer, я фокусируюсь на:

1. Визуальном регрессионном тестировании (с помощью Pixelmatch, Applitools) для любого типа верстки.
2. Accessibility testing, поскольку семантичность HTML напрямую зависит от выбранного метода верстки.
3. Кросс-браузерном и кросс-платформенном тестировании, учитывая разную поддержку CSS свойств (особенно Grid и Flexbox).
4. Тестировании производительности рендеринга — сложные Grid-конструкции могут вызывать layout thrashing.

Понимание этих видов позволяет QA не просто находить баги типа «кнопка не на своем месте», но и предвидеть категории проблем, связанные с архитектурой верстки, и эффективно планировать тестовое покрытие.