7 единиц измерения CSS, о которых вы могли не знать

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

Легко ограничиться техниками CSS, которые нам хорошо знакомы. Но это ставит нас в невыгодное положение при появлении проблем, с которыми мы не сталкивались.

С постоянным развитием интернета увеличивается также и потребность в новых решениях. Более того, как веб-дизайнерам и фронтенд-разработчикам, у нас нет выхода, кроме как знать наш набор инструментов, и знать его хорошо.

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

Сегодня я познакомлю вас с некоторыми CSS инструментами, о которых вы могли не слышать. Каждый из них является единицей измерения, такой как, например, пиксели или em, но о тех, что я хочу рассказать, вы могли даже и не слышать! Давайте начнем.

rem

Начнем с чего-то, что вам может показаться отдаленно знакомым. em всегда равен font-size. Так что если вы зададите размер шрифта элементу body, значение em каждого вложенного в body элемента будет пропорционально меняться.

1	<body>
2	<div class="test">Test</div>
3	</body>

1	body {
2	font-size: 14px;
3	}
4	div {
5	font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
6	}

Вот, мы задали font-size контейнера div 1,2em. Это в 1.2 раза больше, чем любой заданный размер шрифтп, в этом случае 14px. Результат – 16.8px.

Но что случится, если вы вложите друг в друга контейнеры с размером шрифта, заданным в em? В следующем примере мы использовали тот же CSS код, что и в предыдущем. Каждый div контейнер наследует размер шрифта от своего родителя, тем самым каждый раз увеличая шрифт все сильнее и сильнее.

1	<body>
2	<div>
3	Test <!-- 14 * 1.2 = 16.8px -->
4	<div>
5	Test <!-- 16.8 * 1.2 = 20.16px -->
6	<div>
7	Test <!-- 20.16 * 1.2 = 24.192px -->
8	</div>
9	</div>
10	</div>
11	</body>

Когда в некоторых случаях это может быть необходимо, довольно часто хочется, чтобы значение, от которого отталкивается единица измерения, было одним. В такой ситуации подойдет rem. Буква "r" в rem означает root (корень); то есть размер шрифта задается относительно корневого элемента; в большинстве случаев это будет html элемент.

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

В каждом из трех вложенных элементов в прошлом примере, шрифт будет равен 16.8px.

Удобно в случае с сетками.

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

1	.container {
2	width: 70rem; // 70 * 14px = 980px
3	}

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

Могу ли я это использовать?

Rem (root em) units на caniuse.com

vh и vw

Адаптивный веб-дизайн полностью полагается на процентные соотношения. Но использование процентов CSS не всегда является лучшим решением. CSS ширина всегда относительна ближайшего родительского элемента. Но что если вы хотите использовать ширину или высоту viewport вместо таковых родительского элемента? Это как раз тот случай, когда стоит использовать vh и vw.

1vh равен 1/100 высоты viewport. Например, если высота браузера 900px, 1vh будет равен 9px. Таким же образом, если ширина равна 750px, то 1vw будет равен 7.5px.

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

1	.slide {
2	height: 100vh;
3	}

Представьте, что вам необходимо сделать заголовок, который займет всю ширину экрана. Чтобы сделать это, следует задать размер шрифта в vw. Этот размер будет увеличиваться вместе с размером экрана.

Могу ли я это использовать?

Viewport units: vw, vh на caniuse.com

vmin и vmax

В то время как vh и vm всегда относятся к высоте и ширине viewport, vmin и vmax относятся к минимальной и максимальной ширине или высоте viewport, в зависимотсти от того, какая из величин больше, а какая меньше. Например, если ширина окна браузера задана в 1100px, а высота в 700px, 1vmin будет равен 7px, а 1vmax 11px. Но, если ширина будет установлена в 800px, а высота в 1080px, то vmin будет равен 8px, а vmax – 10.8px.

Итак, как можно воспользоваться этими значениями?

Представьте, что вам нужно создать элемент, который всегда будет находиться в видимой части экрана. Используя значения высоты и ширины vmin, заданные меньше 100, вы сможете это осуществить. Например, элемент квадратной формы, который всегда касается как минимум двух краев экрана может быть задан так:

1	.box {
2	height: 100vmin;
3	width: 100vmin;
4	}

Если вам нужен квадратный блок, который будет покрывать весь viewport (касаться четырех сторон экрана одновремнно), используйте те же правила, но с vmax.

1	.box {
2	height: 100vmax;
3	width: 100vmax;
4	}

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

Могу ли я это использовать?

Viewport units: vmin, vmax на caniuse.com

ex и ch

Единицы ex и ch, по аналогии с em и rem, соотносятся с текущим шрифтом и размером шрифта. Но, в отличие от em и rem, они также соотносятся c font-family.

ch или character является продвинутой единицей измерения ширины от нуля, 0. Наиболее интересные обсуждения того, что это может значить, можно найти в блоге Эрика Мейерса. Вкратце, если мы возьмем моноширинный шрифт, контейнер с шириной из N букв, тогда, например, width: 40ch; всегда будет содержать выражение из 40 единиц этого конкретного шрифта. Когда стандартным использованием этого правила является пример шрифта Брайля, возможности творческого подхода существенно расширяют его функционал.

ex обозначается как "x-высота текущего шрифта ИЛИ половина 1em". x-height выбранного шрифта называется высота буквы x нижнего регистра этого шрифта. Часто эта высота оказывается срединной точки всей высоты шрифта.

X-высота; высота буквы x нижнего регистра (читайте больше про структуру веб типографики)

Для этой единицы измерения существует множество вариантов использования, большинство из них являются небольшими дополнениями к основной типографике. Например, элемент sup, который обозначает надстрочные символы, может быть приподнят относительно своей позиции, если ему задать position: relative и значение свойства bottom 1ex. Таким же образом вы можете опустить подстрочные буквы еще ниже. Стандартные настройки браузера использует свои правила vertical-align надстрочных и подстрочных символов. Но если вам нужна более тонкая настройка, вы можете сделать ее следующим образом:

sup {
    position: relative;
    bottom: 1ex;
}
sub {
    position: relative;
    bottom: -1ex;
}

Могу ли я это использовать?

Единица ex существует примерно со времен CSS1, а вот для ch такой поддержки вы не найдете. Для ознакомления со спецификацией по поддержке свойств, ознакомьтесь со значениями и единицами CSS в блоге Эрика Мейерса.

Заключение

Следя за постоянным развитием и расширением CSS, важно быть в курсе всех возможностей, которые доступны на текущий момент. Возможно вам встретится нетипичная проблема, которая будет требовать от вас нетипичного решения с использованием одной из этих малопонятных единиц измерения. Самое время почитать про новые спецификации. Подписывайтесь на рассылки от таких замечательных ресурсов, как, например, cssweekly. И не забывайте подписываться на еженедельные обновления, курсы, бесплатные уроки, такие как этот, по веб-дизайну на Tuts+!

Дальнейшее чтение

Еще информация по единицам CSS.