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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

Поддержка

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

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

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

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

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

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

Заключение

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

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

Автор: Zell

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree