Основы верстки: создаем надежный фундамент для веб-страницы
Веб-страница без стилизации напоминает чистый холст. Возможности здесь безграничны, и легко потратить время впустую, экспериментируя с различными макетами, цветами и шрифтами. Однако стандартные стили браузеров далеки от идеала, поэтому для создания качественного дизайна необходима предварительная работа. Представленные ниже приемы помогут заложить надежную основу, на которую вы сможете опираться в дальнейшем. Решив вопросы юзабилити и внедрив базовые принципы дизайна, вы сможете сосредоточиться непосредственно на контенте или продолжить совершенствовать оформление.
Более логичная модель размеров (box-sizing)
Если вы изучали CSS с нуля, то наверняка понимаете суть «блочной модели» (box model). Однако, если вы не знакомы с этой концепцией, она может показаться запутанной. Даже когда вы понимаете принцип работы, стандартная модель браузера часто доставляет неудобства, поэтому рекомендуется сбросить настройки box-sizing следующим образом:
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
По умолчанию для свойства box-sizing установлено значение content-box. При таких настройках любые свойства ширины (width) и высоты (height), применяемые к элементу, не включают в себя отступы (padding), границы (border) или внешние отступы (margin). Например, вы хотите, чтобы элемент занимал половину ширины страницы:
#about { width: 50%; padding: 8px; }
Результатом станет общая ширина, равная половине ширины контейнера плюс 16 пикселей (по 8 пикселей с каждой стороны). Значение border-box гарантирует, что свойства ширины и высоты уже включают в себя padding и границы, что значительно упрощает создание элемента, ширина которого будет составлять ровно половину страницы. Короче говоря, border-box — это более интуитивно понятный способ указания размеров, который в долгосрочной перспективе спасет вас от лишних проблем. Применяя это к элементу html и устанавливая для всех остальных элементов наследование этого значения, вы сможете легко переопределить его в случае необходимости.
Оптимальная длина строки
Существует причина, по которой большинство книг и журналов имеют книжную ориентацию: длинные строки сложны для чтения. Когда глаз доходит до конца строки и переходит к началу следующей, ему необходимо быстро перефокусироваться. Чем дальше приходится перемещать взгляд, тем сложнее это сделать. Руководства по типографике обычно рекомендуют длину строки от 45 до 75 символов.
Вы можете использовать свойство max-width, чтобы гарантировать, что строки не будут содержать более определенного количества символов, используя единицу измерения ch:
html { max-width: 70ch; }
Единица ch малоизвестна, но ее значение постоянно растет. Она представляет собой ширину символа «0» в соответствующем шрифте, поэтому это отличный способ задать примерное количество знаков в строке. Указать точное количество символов невозможно из-за использования шрифтов переменной ширины, но такого приближения в большинстве случаев более чем достаточно.
Горизонтальное центрирование контента
Как только вы установите длину строки, контент будет выровнен по левому краю страницы. Если размер шрифта невелик, это часто выглядит несбалансированно, особенно для пользователей широкоформатных мониторов. Читателю гораздо комфортнее смотреть прямо перед собой, чем поворачивать голову. Простое решение — выровнять контент по центру окна браузера, установив равные внешние отступы (margin) слева и справа:
html { margin: auto; }
Это работает только в том случае, если элемент (в данном случае тег html) имеет ограниченную ширину. Если это полноширинный элемент, то не будет отступов для балансировки. Свойство max-width, установленное ранее, означает, что при любом расширении окна контент будет центрирован с равными горизонтальными отступами.
Комфортный интерлиньяж
В типографике под «лидингом» (leading) понимают вертикальное расстояние между строками текста. В CSS это называется line-height; по умолчанию установлено значение normal, которое браузеры обычно интерпретируют как 1.2. Другими словами, к высоте строки текста добавляется около 10% пространства сверху и снизу. Термин «лидинг» происходит от свинцовых полосок (lead), использовавшихся для разделения строк текста в традиционных печатных станках.
Значение по умолчанию приемлемо, но, как и в случае с длиной строки, оно может вызвать проблемы с читаемостью. Итоговое значение должно зависеть от шрифта, длины строки и среднего количества слов в абзацах, но хорошим компромиссным вариантом является 1.4 — примерно в два раза больше пространства, чем при стандартных настройках:
html { line-height: 1.4; }
Более читаемый размер шрифта
Размер шрифта по умолчанию в большинстве браузеров составляет 16px, и так остается уже долгое время. Поскольку экраны получают все более высокое разрешение, это приводит к тому, что текст становится все меньше, что в какой-то момент становится некомфортным для большинства пользователей. Однако значение по умолчанию остается прежним. Следующая декларация использует относительные единицы (em), чтобы увеличить размер шрифта относительно того, каким он был бы в ином случае.
Масштабирование шрифтов и типографика
В стандартном случае задание размера шрифта html { font-size: 1.25em; } увеличивает его с 16px до 20px. Важно отметить преимущество этого подхода перед фиксированным значением font-size: 20px. Использование em означает, что если пользователь изменит настройки браузера, выбрав шрифт больше или меньше стандартного, ваша страница масштабируется пропорционально.
Стиль и гармония заголовков и основного текста
По умолчанию браузеры отображают текст с использованием шрифтов с засечками (serif). Хотя это подходит для основного текста, общепринято, что заголовки без засечек (sans-serif) сочетаются с ним лучше. Многие шрифтовые семейства включают пары из стилей с засечками и без, специально для таких целей.
Хороший шаблон должен использовать общие семейства шрифтов: serif и sans-serif. Они гарантированно доступны, и, как в случае с размером шрифта, пользователь может выбрать предпочитаемый вариант в настройках браузера, например в Chrome. Используя эти стили как базовые, можно добавить нюансов с помощью стека шрифтов, выбирая уникальные начертания, дополняющие дизайн, при этом сохраняя общие семейства в качестве резервных:
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
Адаптивные изображения и контроль верстки
Изображения, выходящие за пределы своих контейнеров, могут выглядеть неприглядно или даже нарушить верстку сайта. Если вы не контролируете изображения на сайте — особенно если их могут загружать пользователи — попасть в эту ловушку очень легко. Самая простая страховка — убедиться, что все изображения на странице не шире своего контейнера. Свойство max-width позволяет это реализовать:
img { max-width: 100%; height: auto; }
Обратите внимание: свойство height: auto необходимо для сохранения исходного соотношения сторон, если вы указываете размеры в тегах изображений, например: . С такой разметкой max-width может ограничить ширину, но не повлияет на высоту, из-за чего изображение будет растянуто без использования height: auto.
Цветовой контраст и комфорт для глаз
Хороший контраст — залог читаемости. Если цвет текста слишком близок к цвету фона, текст становится трудно читать. Это особенно актуально для людей с нарушениями цветовосприятия. Рекомендации по обеспечению доступности веб-контента (WCAG) требуют контрастности не менее 7:1.
Для справки: контрастность черного текста (#000000) на белом фоне (#ffffff) составляет 21:1, что с огромным запасом проходит тест. Однако такой резкий контраст имеет недостаток: он может вызвать утомление глаз из-за необходимости постоянно адаптироваться к разнице в яркости. Очень незначительное изменение может иметь значение: оно почти незаметно, но глазам будет комфортнее:
html { color: #333; }
Этот темно-серый цвет имеет контрастность 12.63:1 на чисто-белом фоне — это почти в два раза меньше, чем у чисто черного, но все еще значительно выше требуемых 7:1.
Управление подчеркиванием ссылок
С момента появления HTML в начале 1990-х годов существовала аксиома: ссылки синие и подчеркнутые. Это стандартное поведение, которое хорошо работало как функция удобства использования, сообщая читателю, какие части документа кликабельны. Однако подчеркивание ссылок может конфликтовать с дизайном, выглядеть неэстетично и даже вредить читаемости.
Когда CSS стал популярным, закрепился другой подход: дизайнеры начали отключать подчеркивание ссылок. Решение остается за вами, но распространенный метод заключается в том, чтобы скрывать подчеркивание по умолчанию и отображать его при наведении курсора:
a:link { text-decoration: none; }
a:hover { text-decoration: underline; }
Ссылки останутся синими и узнаваемыми. Если навигация осуществляется с клавиатуры, подчеркивание не появится, но сработает стандартный стиль контура браузера, позволяя идентифицировать элемент.
Итоговая таблица стилей
Представленные стили не обязательно применимы к любому дизайну, но они являются хорошей базой, делающей простые документы привлекательными:
html { box-sizing: border-box; max-width: 70ch; margin: auto; font-size: 1.25em; color: #333; line-height: 1.4; }
* { box-sizing: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
img { max-width: 100%; height: auto; }
a:link { text-decoration: none; }
a:hover { text-decoration: underline; }
Эти стили улучшают базовый вид типичного HTML-файла, повышая читаемость и общую верстку. Попробуйте применить их к своим документам или сайтам и продолжайте изучать CSS, чтобы оттачивать свои навыки и улучшать дизайн.
Стоит отметить важную деталь, касающуюся доступности при работе с ссылками. Если вы решили отказаться от постоянного подчеркивания, важно учитывать пользователей, предпочитающих навигацию с помощью клавиатуры. В текущем варианте, при использовании a:link { text-decoration: none; }, при перемещении по элементам с помощью клавиши Tab подчеркивание не появится. Однако браузеры по умолчанию применяют стиль контура (outline), который остается видимым. Это критически важный механизм, позволяющий идентифицировать активный элемент, поэтому не стоит полностью отключать outline в стилях, чтобы не нарушить доступность сайта для всех категорий пользователей.
Также напомним, что приведенный выше CSS-код представляет собой не догму, а лишь отправную точку. В реальных проектах эти правила можно дополнять или менять в зависимости от конкретных шрифтовых пар, цветовой палитры вашего бренда и специфики контента. Например, после внедрения базового line-height: 1.4 вы можете обнаружить, что для выбранного вами шрифта это значение требует небольшой корректировки, так как «комфортный интерлиньяж» — это всегда баланс между выбранным гарнитуром, длиной строки и плотностью текста на странице.
Наконец, использование ch — это современный и гибкий подход, но помните, что это лишь приближение. Из-за вариативности начертаний шрифтов невозможно добиться математически точного количества символов в строке, но использование этой единицы измерения на сегодняшний день остается самым надежным способом оптимизации типографики для чтения. Использование этих базовых настроек позволит вам не тратить время на борьбу со стандартными дефектами браузерной верстки, сразу перейдя к созданию уникального визуального языка вашего сайта.
