Адаптивный Vertical Rhythm с помощью пользовательских свойств CSS и CSS calc

Адаптивный Vertical Rhythm с помощью пользовательских свойств CSS и CSS calc

От автора: вертикальный ритм (Vertical Rhythm) – важная концепция в веб-дизайне. Она способна собрать дизайн воедино и сделать элементы на странице единообразными. Раньше невозможно было менять в CSS Vertical Rhythm на разных размерах экрана, потому что у нас не было подходящих инструментов. Сейчас такая возможность есть, благодаря CSS calc и пользовательским свойствам. Статья объясняет, как это сделать.

Вычисление rhythm-единиц

Rhytm-единица – это базовый множитель, используемый для Vertical Rhythm на сайте. Значение rhytm-единицы должно равняться высоте строки обычного текста. Вот почему.

/* One rhythm unit would be 20px * 1.4 = 28px */
html { font-size: 20px; line-height: 1.4;
} p { margin: 28px;
}

Вычислять rhytm-единицы легче, если использовать относительные единицы (нужно их использовать). Одна rhytm-единица всегда равна корневому размеру шрифта, умноженному на высоту строки основного текста.

/* 1 rhythm unit, calculated with rem */
html { line-height: 1.4;
} p { margin: 1.4rem;
}

Не стесняйтесь менять количество rhytm-единц при создании пробелов. Можно даже включать нецелочисленные значения.

/* 2 rhythm units */
h2 { margin-top: 2.8rem} /* 0.75 rhythm units */
p { margin-top: 1.05rem }

Зачем менять Vertical Rhythm на разных размерах экрана?

Как правило, большие устройства (десктоп) мы размещаем дальше от себя, а маленькие (смартфоны) – ближе. Чтобы компенсировать ухудшение читаемости из-за увеличенного расстояния, необходимо увеличить размер шрифта. Если пользователю неудобно читать ваш сайт, он уйдет, будет щурить глаза или увеличит размер шрифта браузера (если он достаточно умен).

Еще немного о читаемости.

Читаемость – один из важнейших элементов типографики. На нее влияет 3 фактора – размер шрифта, высота строки (leading) и длина строки (measure). Если меняется что-то одно, остальные тоже необходимо менять для сохранения читаемости.

При изменении размера окна браузера с мобильного вида на десктоп, изменятся measure и размер шрифта. Как результат, leading тоже должен измениться. Эта концепция так важна, что Ешь Brown придумал подход Molten leading. Один из примеров использования метода – запись высоты строки основного текста в вьюпорт единицах.

/* This is a simple example. See the complete example in the link above */
body { font-size: calc(1em + 1vw); line-height: calc(1.2em + 1vw);
}

Проблема в том, что при изменении высоты строки основного текста меняется единица Vertical Rhythm. Использовать Molten leading вместе с Vertical Rhythm невозможно.

Даже если отменить molten leading и использовать стандартную безразмерную высоту строки, вы сойдете с ума от повторений. Оно того не стоит.

/* Change line height at different breakpoints */
html { line-height: 1.4;
} @media (min-width: 600px) { html { line-height: 1.5; }
} /* Calculate rhythm again at each breakpoint */
p { margin-top: 1.4rem;
} @media (min-width: 600px) { p { line-height: 1.5rem; }
}

Изменение rhytm-единиц с помощью пользовательских свойств CSS

Пользовательские свойства CSS (или CSS переменные) можно использовать для создания rhytm-единиц, которые будут меняться на разных вьюпортах.

Чтобы создать CSS переменную, необходимо создать пользовательское свойство, добавив перед ним —.

:root { --color: red;
}

Использовать пользовательское свойство можно так var(—your-custom-property).

p { color: var(--color)
}

Преимущество CSS переменных в том, что их можно динамически обновлять в разных медиа запросах.

:root { --color: red;
} @media (min-width: 30em) { :root { --color: blue; }
} p { color: var(--color)
}

То есть можно создать свойство –baseline, которое соответствует одной rhytm-единице. Используйте –baseline для создания адаптивного Vertical Rhythm.

:root { --baseline: 1.4; line-height: var(--baseline)
} @media (min-width: 30em) { :root { /* a value of 3 used here to exaggerate the changes so you can see it in the demo below */ --baseline: 3; }
}

Для создания rhytm-значений необходимо использовать CSS calc (в CSS все вычисления проводятся через calc).

/* Two rhythm units */
h2 { margin-top: calc(var(--baseline) * 2rem); } /* 0.75 rhythm units */
p { margin-top: calc(var(--baseline) * 0.75rem); }

Упрощаем вычисления с помощью функции

Довольно сложно постоянно при создании rhytm—значения писать calc и var. Можно упростить вычисления, написав функцию в препроцессоре типа Sass.

// rvr stands for responsive vertical rhythm
@function rvr($multiple) { @return calc(var(--baseline) * $multiple * 1rem);
}

Затем можно использовать созданную функцию vr. Намного проще!

/* Two rhythm units */
h2 { margin-top: rvr(2); } /* 0.75 rhythm units */
p { margin-top: rvr(0.75); }

Поддержка

У CSS Custom Properties и CSS Calc замечательная поддержка. Они поддерживаются во всех основных браузерах.

К сожалению, в Opera Mini вообще отсутствует поддержка CSS calc и пользовательских свойств (а также в менее известных браузерах QQ и Baidu). Облом.

Так как Opera Mini не поддерживает CSS Calc и CSS Custom properties, то необходимо обеспечить фолбек свойства при создании rhytm-единиц. Чуть больше работы, но терпимо.

:root { --baseline: 1.4; /* Line-height fallback */ line-height: 1.4; line-height: calc(var(--baseline) * 1rem);
} @media (min-width: 30em) { :root { --baseline: 1.5; }
} p { /* Line-height basic vertical rhythm fallback. */ margin-top: 1.05rem; margin-top: rvr(0.75);
}

Для упрощения также можно создать функцию vr, которая будет вычислять Vertical rhythm на основе значения высоты строки. Ниже представлена простая версия (специально для примера). Более полную версию можно сделать в Typi – моя библиотека, которую я написал для упрощения адаптивной типографики.

@function vr($multiple) { @return 1.4 * $multiple * 1rem;
}

Если создать функцию vr, то rhytm фолбек будет проще:

p { /* Line-height basic vertical rhythm fallback. */ margin-top: vr(0.75); margin-top: rvr(0.75);
}

Заметка: я еще не включил адаптивный vertical rhythm в Type. Надеюсь сделать это, когда будет свободно время.

Заключение

Vertical Rhythm – важный принцип типографики, который мы, как дизайнеры и разработчики, должны учитывать. К сожалению, раньше мы не могли уделять ему достаточно внимания, потому что у нас не было подходящих инструментов.

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

Автор: Zell

Источник: https://zellwk.com/

Редакция: Команда webformyself.