Как тестировать вёрстку на переполнение

Блог Тесты

Как тестировать вёрстку на переполнение

Для тестирования вёрстки мы будем использовать DevTools — там мы сможем наиболее быстрым способом переполнять html-элементы.

Открываем DevTools при помощи комбинации клавиш, которая поддерживается вашим браузером или опции «Просмотреть код».

Вызвать меню можно в любой точке сайта

Чтобы редактировать html-элементы, нужно выбрать нужный и нажать Edit as HTML.

Выбор «Edit as HTML» откроет редактор кода

Переполнение списков

Первое, на что нужно обратить внимание — это списки. Согласитесь, что структура сайта может меняться, а вместе с ней может меняться и меню.

Давайте посмотрим, как может себя вести «неправильное переполнение», например, добавим ещё пункты меню.

Тестирование меню навигации на переполнение

Наша основная цель — чтобы сетка не ломалась. Здесь же явно header не меняет свой размер. Это распространённая проблема, когда разработчик использует свойство height вместо min-height.

Давайте поправим код и посмотрим, как себя должно вести меню при «правильном переполнении», когда родительский контейнер перестраивается вместе с содержимым.

Меню выстраивается в пределах сетки

Ещё один пример переполнения: мы забываем про перенос на новую строку, когда используем флексы. В этом случае меню вылезет за пределы нашей страницы.

Без свойства flex-wrap ломается сетка

Переполнение текстом

Теперь давайте посмотрим, как будут вести себя при переполнении карточки товаров. Как правило, в них часто вносятся изменения, так как такой контент обновляется динамически, то есть через запросы.

Первое, что мы делаем — это проверяем, как карточка реагирует на увеличение текстового контента — заголовок или абзац. На изображении видно сразу несколько ошибок: текст вылез за пределы блока, ломается сетка и текст убегает под кнопку, а также заголовок теряет центрирование.

Переполнение в заголовке

Кажется, что самое быстрое решение — это добавить скролл в блок, но это плохо для пользователя. Например, если человек будет пользоваться сайтом с телефона, то у него возникнут сложности в просмотре информации.

Скролл не подходит для мобильной версии сайта

Правильное поведение карточки — это адаптация под контент. Как мы уже писали ранее, карточка должна растягиваться вместе с ним. Значит, нужно проверить высоту, а также неплохо бы добавить явное центрирование.

Заголовок больше не ломает карточку товара

Теперь давайте посмотрим карточку с несколькими элементами и попробуем переполнить заголовок карточки. Помимо того, что карточка сама по себе не растягивается по контенту, ещё и ломается сетка.

Переполнение в карточке товара

При помощи DevTools мы находим виновника разрушения сетки — правый margin.

Свойство margin у тега rating

Как можно поправить? Мы добавим внутренние отступы для карточки и добавим дополнительный контейнер с флексом, чтобы раздвинуть пространство при помощи justify-content.

Дополнительный контейнер wrp

Но есть решение, которое нам поможет убрать дополнительную обёртку в этом случае: добавим контейнеру с заголовком flex-grow, чтобы всё свободное пространство досталось именно ему.

Свойство flex-grow занимает свободное место

Тема переполнения текстом очень актуальна для кнопок, так как чаще их оформляют через ширину и высоту, а для простоты центрируют флексами.

Переполнение в кнопке

И здесь по опыту мы уже знаем, что можем сделать параметры c минимальным значением. Но тогда мы столкнемся с другой проблемой — отсутствием внутренних отступов, при которых текст будет прилипать к краям кнопки.

У текста в кнопке нет отступов

Поэтому самым лучшим решением является задание размеров и внутренних отступов, чтобы у нас не ломалась сетка, и внутренний контент смотрелся аккуратно. При использовании этого подхода не забывайте про полезное свойство border-box, которое позволяет включить в расчёт внутренние отступы padding помимо ширины элемента width.

Кнопке заданы размеры и отступы

Теперь давайте поговорим про текстовые блоки. В их случае частая ошибка — это выпадение текста из блока height. Посмотрим пару примеров, как это может выглядеть на живой вёрстке.

Переполнение в текстовом блоке

Чтобы поправить такое поведение, нужно заменить height на min-height или же вообще отказаться от высоты и задать отступы при помощи padding. При таком подходе мы можем столкнуться с проблемой выравнивания блоков: если при однородном контенте одинаковой высоты всё смотрелось аккуратно, то при переполнении сетка поломалась.

Текст больше не выходит за границу блока

Чтобы избежать такого неявного поведения лучше добавить ещё и выравнивание по дополнительной оси для флекс-контейнера — align-items. Идеальный вариант для адаптации переполнения будет таким:

Все проблемы переполнения решены

Переполнение блоками

Теперь давайте посмотрим, как будет вести себя вёрстка, если мы добавим ещё немного блоков. Первое, что мы видим — это переполнение основного контейнера, второе — ломается сетка.

Переполнение контейнера с блоками

Наш контейнер с ul оформлен как флексбокс, поэтому мы можем задать ему перенос flex-wrap и сделать центрирование текста text-align.

Блоки выровнялись по сетке

Проверка на «недополнение»

Если с переполнением блоками всё понятно, то ситуация с недополнением не совсем очевидна. Представим себе ситуацию, когда у нас есть два контейнера с отступом между друг другом:

Часть сайта с двумя контейнерами

Если мы не будем задавать ширину для контейнеров, то столкнёмся с проблемой поломанной сетки.

Размер контейнеров подстроился под контент

Для примера мы будем использовать фиксированную ширину, но если вы планируете делать адаптивную вёрстку, то лучше перевести пиксели в проценты.

Контейнеры с фиксированной шириной

Протестируем карточку на недополнение: уменьшим контент в заголовке и уберём кнопку. В примере у нас сдвинется блок, потому что margin задан фиксировано.

Блок с рейтингом сдвинулся влево

Чтобы это поправить, нужно задать левому отступу значение auto, тогда оно автоматически прижмёт нужный нам блок к правому краю:

Свойство margin-left автоматически выровняло блок

Обратимся к не совсем стандартному примеру навигации и уберём в нём пункт меню с раскрывающимся списком.

Меню навигации проекта Девайс

С размерами всё отлично, а вот сетка поломалась. Логичное поведение — это оставить пункт меню справа.

Весь блок сместился к левому краю

Для этого нам нужно использовать свойство justify-content.

Меню прижалось к правой части сайта

Переполнение изображениями

Теперь давайте посмотрим, как ведёт себя вёрстка при наполнении картинками разных размеров. Размер изображения в макете — 800х256. Если мы вставим картинку строго нужных размеров, то всё будет органично. Но на практике не всегда удается вырезать точные размеры. Сделаем аналогичную картинку, увеличенную в 2 раза — 1600х512, и уменьшенную в 2 раза — 400х128.

Фотографии разных размеров
Ширина и высота чётко заданы

Видим, что размеры у изображений совсем не такие, как нужно по макету. Решить эту проблему можно, задав атрибуты тегу img. А для адаптивной вёрстки можно сделать класс, в котором значения атрибутов будут переопределяться.

Фотография шириной 800px

Попробуем изменить пропорции, уменьшив ширину изображения до 600 пикселей.

Фотография шириной 600px

В таком случае добавление атрибутов width и height приведёт к тому, что картинка исказится. Чтобы этого избежать можно использовать свойство object-fit.

Высота блока увеличилась

Рассмотрим пример, когда мы делаем декоративную картинку псевдоэлементом. Чтобы уменьшить её, изменим размер фона и самого элемента. Если мы использовали фиксированные отступы, то можем столкнуться с тем, что сломается сетка.

Иконка уменьшилась, но сломала сетку

Чтобы исправить такое поведение, можно использовать лайфхак с позиционированием по оси — transform: translateX(-50%).

Элемент встал на место

Ваша вёрстка не должна ломаться при добавлении новых элементов, увеличении текста или изменении размеров страницы.

Вернуться наверх