Размерности в CSS, стиль 2011

Годами при создании сайтов мы использовали пикселы как единицу измерения. Затем пришел Em, который заменил пиксел при построении резиновых макетов. И вот, нынче (2011), все ломанулись изучать плавающую компоновку (responsive grids), использовать проценты и гибкие макеты.

Все эти методы появлялись и каждый отменял предыдущый. Я считаю, тем не менее, что правильный метод заключается в использовании всех единиц.

Проценты

Забудем на секунду об отзывчивом?(responsive) дизайне. Responsive design это довольно сложная штука но сейчас нас интересует только плавающая компоновка. Плавающая компоновка (fluid layout) ведет себя как жидкость которая заполняет пропорционально доступную область.

Резиновая сетка (fluid grids) это немного более хитрая штука потому что она основана на полной системе сеток (не понял:)). Я сделал калькулятор который может в этом немного помочь.

К примеру дизайнер присылает вам макет двухколончатого сайта, ваша задача как верстальщика определить соотношение колонок между собой, а не их размеры. Скажем, область содержания занимает 600px и боковая панель 300px, значит содержание в два раза больше боковой панели. Проценты будут работать в этом случае идеально вне зависимости собираетесь ли вы делать responsive design или нет.

Дизайн вообще то строится вокруг пропорций а не абсолютных значений, поэтому игнорирование пикселов в размерах является адекватной практикой.

Может вообще без?

Самый лучший способ “отзывчивого” дизайна это не присваивать размеры совсем. Они должны быть ограничены всегда областью которую отдает им родитель. Поэтому везде где возможно надо стараться не использовать ширины для элементов.

Ems

Em это наш старый друг. Это лучшая размерность для шрифтов. Но я не использую em, почему – немного позже, я использую вместо них – rem, собрат em но слегка улучшенный. Em стоит использовать как размерность для элементов зависящих от размера шрифта, к примеру – отступы и маржины параграфов, заголовков, списков и тп.

Цель – чтобы вид этих элементов оставался достойным когда пользователь масштабирует размер шрифта. Попробуйте масштабировать этот пример.

JS Bin

Обратите внимание, когда я говорю о масштабировании я не имею в виду использование браузерного зума Ctrl+/-, я имею в виду пользовательские стили или какие то возможные изменения дизайна в будущем.

Межстрочное расстояние

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

Межстрочное логичнее задавать в процентных единицах, но как выяснялось еще лучше оставлять line-height совсем без размерности. Eric Meyer обьсянил это в своей статье.

Rem

Несмотря на то что раньше я думал по другому, я начал использовать rem для шрифтов, с обратной совместимостью конечно.

Rem дает надежность пиксела и масштабируемость em. Это очень здорово. Rem избавляет от нудных расчетов текущего наследуемого размера для каждого элемента. Вместо этого вы просто наследуете от одного размера, размера шрифта для html элемента.

JS Bin Rem удобен для того чтобы выдерживать вертикальный ритм, если назначать маржинам значения в rem.

Пикселы

Пикселы не так уж мертвы как может показаться. Да, их потеснили другие единицы измерения, но тем не менее есть место и для них. Пикселы необходимы там где присутствуют обьекты с изначальной пиксельной размерностью, типа картинки, аватары, иконки и тп. Если вам надо сделать отступ для ссылки чтобы поместить иконку фоном, то пикселы это единственная правильная размерность.

Пример

Примером обсуждаемого тут подхода может быть мой сайт – hry.rbrts.me. Если вы откроете сайт и проанализируете инспектором то вы увидите что я использую:

проценты

Для body и article, для структуры страницы.

Ничего

p Компонент с социальными иконками, всегда будет занимать отведенное место.

Em

Отступы для ul, ol, dd и отступы между секциями

Межстрочные

Все межстрочные расстояния определены без размерности, за исключением заголовка сайта.

Rem

Все шрифтовые стили

Пиксели

Социальные иконки и логотип.

Если есть желание поанализировать глубже можно посмотреть стили с подробными комментариями.

Итог

  • Для структуры использовать проценты. Область с содержанием, боковая панель и тд
  • Для шрифтов использовать Rem с добавлением совместимости со старыми браузерами. Это дает хороший контроль над шрифтом плюс масштабируемость.
  • Свойства шрифто-зависимых элементов определять в em и отступы, маржины будут меняться в зависимости от размера шрифта.
  • Межстрочные в относительных единицах или без них вообще – line-height: 1.4
  • По возможности модульные элементы не фиксировать в размерах совсем
comments powered by Disqus