Перевод статьи Math and front-end: Context is so much more important than degree of difficulty Хуэй Цзин Чэнь в блоге LogRocket.
Если вы были одним из тех детей, которые удивлялись, зачем вам уроки математики и все эти углы и алгебра, ну, вот таким был и я. Признаюсь, я был слишком неугомонным и мне быстро наскучило быть хорошим учеником. Но когда я стал старше, я понял, что определённые математические принципы имеют практическое применение в моей ежедневной работе (не дифференциальные исчисления, я же не ракетостроитель).
Вопрос, нужно ли хорошо знать математику, чтобы быть хорошим веб-разработчиком, сводится к тому, что для вас означает хорошо знать математику. Если хорошее знание математики — это понимание математических понятий, как анализ и дифференциальные исчисления, которые включают в себя много доказательств и теорем, должен сказать, что всё это не используется в веб-дизайне/разработке.
И хотя практические знания требуются, пожалуй, на уровне средней школы, главное — уметь применять эти знания арифметики и геометрии в контексте веб-дизайна.
К примеру, для создания треугольников при помощи манипуляций с border-width нужно знать и то, как браузер рендерит границы элемента, и то, как правильно применить знания тригонометрии, чтобы «хакнуть» это свойство.
Арифметика
Арифметика — это раздел математики, изучающий свойства натуральных (а также целых), дробных чисел и основные операции, применяемые к этим числам.
Кажется, само собой разумеющимся, но если вы делаете адаптивный дизайн, и будем честными, адаптивный дизайн — норма в наши дни, арифметика точно будет полезна.
И какое же отношение арифметика имеет к дизайну, спросите вы? Прямое. Но сначала, рассмотрим единицы измерения CSS и их значения, потому что это то, что мы будем считать.
Числа в CSS встречаются довольно часто, обычно как значения свойств. Спецификацией, которое это определяет, является CSS Values and Units Module Level 3. Ключевая функция в арифметике CSS — это calc(), которая поддерживает четыре основные операции: сложение, вычитание, умножение и деление.
Во времена, когда веб-дизайн был преимущественно с фиксированной шириной, дизайнеры и разработчики делали pixel-perfect вёрстку, которая работала только на определённых разрешениях. Но с увеличением количества экранов с различными разрешениями, которые пользователи использовали для выхода в интернет, дизайн с фиксированной шириной больше не подходил.
Гораздо больше смысла было позволить браузерам вычислять размеры элементов на странице в зависимости от размера окна браузера, используя проценты, относительные единицы em или ch, и, из недавних, единицы измерения относительно размера окна (vh, vw, vmin, vmax). Функция calc работает с комбинацией значений различных единиц, производя за нас сложные вычисления, чтобы мы могли сфокусироваться на дизайне и вёрстке компонентов.
Проблема плавающего подвала
Распространённое требование во многих макетах сделать «прибитый» подвал к низу экрана, даже если недостаточно контента для заполнения всей высоты экрана.
Есть несколько различных способов для достижения такого эффекта, но использование calc достаточно красивый способ заставить подвал остаться внизу экрана и в обычном потоке, даже если недостаточно контента.
Рассмотрим простую разметку, в которой есть элементы header, main и footer.
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
Чтобы заставить подвал остаться внизу страницы, независимо от количества контента внутри элемента main, элемент main должен иметь минимум 100% высоты от высоты размера окна браузера минус высота header и footer:
100% высоты окна – ( высота header + высота footer)
Переводим всё в CSS (тут браузерные стили уже сброшены):
main {
min-height: calc(100vh - 2em);
}
Без дополнительной стилизации, высота шапки и подвала должна быть 1em из-за текста внутри них. Использование min-height вместо height гарантирует, что подвал останется в обычном потоке, если контента будет больше высоты размера окна.
Подвал всегда внизу окна браузера
Типографика с плавной адаптацией
Пока мы не отошли от темы адаптивного дизайна, давайте определим размер шрифта для разных разрешений, также с помощью математики. Размер шрифта можно задавать не только с помощью px и em, можно использовать также единицы измерения относительно размера окна (vh, vw, vmin, vmax). Проблема с таким подходом в том, что если размер окна станет слишком маленьким, то шрифт может уменьшиться настолько, что станет совсем неразборчивым.
Чтобы предотвратить это, можно использовать calc и установить минимальный размер шрифта:
body {
font-size: calc(1em + 1vw);
}
Если требуется больший контроль над размером шрифта, то необходимо добавить больше переменных в формулу. Понятие точной плавной адаптивной типографики был представлен Майклом Ритмюллером в статье Precise control over responsive typography, и было продолжением идеи Тима Брауна о плавном интерлиньяже (molten leading).
Формула Майка Ритмюллера выглядит так:
Флоренс Вёршелд сделал глубокий анализ CSS-шлюзов в статье The math of CSS locks, выразив отношение font-size к line-height как линейную функцию. Линейные функции можно представить в виде графика, который легко позволяет визуализировать отношение font-size/line-height и размером окна.
График из статьи The math of CSS locks, Флоренс Вёршелд
Геометрия
Геометрия — это раздел математики, изучающий свойства геометрических объектов — точки, (прямые) линии и окружности, как самые простые из них.
Рисуем фигуры с помощью CSS
Геометрия помогает понять, как создавать фигуры с помощью CSS. Возьмём, к примеру, простое свойство border-radius, которое используется для округления углов внешних границ элемента. Большинство из нас просто устанавливают одно значение и успокаиваются на этом, но border-radius немного сложнее, чем кажется.
Свойство border-radius на самом деле является сокращением для четырёх border-*-radius свойств, где * — это top-left, top-right, bottom-left или bottom-right. И оно может принимать два значения, разделённые символом /, первое значение — горизонтальный радиус, второе значение — вертикальный радиус. Диаграмма для наглядности:
Когда мы используем проценты как значения, горизонтальный радиус будет равен этому значению в процентах от ширины границы блока, а вертикальный — высоты границы блока. Поэтому border-radius: 50% даёт нам идеальный круг или овал.
Рассмотрим кое-что более интересное, что тоже требует границы — треугольники. Треугольники на чистом CSS возможно сделать, «хакнув» границы элемента. Когда мы создаём границы вокруг элемента, края границ сталкиваются диагонально. Если задать достаточно толстые границы элементу, то можно увидеть, что границы являются трапециями.
Если задать нулевые ширину и высоту элементу, трапеции станут треугольниками, и вуаля, получаем треугольники на чистом CSS.
Обычно нам не нужен набор из четырёх треугольников, поэтому соседние границы нужно будет сделать невидимыми, задав им прозрачный цвет (transparent), и также не устанавливать значения границы напротив.
.triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid gray;
}
Очевидно, нам не всегда требуется равнобедренный треугольник (как раз его мы получаем, установив одно значение для ширины всей границы), поэтому тут также пригодится геометрия. Можно использовать теорему Пифагора, чтобы подсчитать требуемую высоту треугольника:
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: calc(100px \* 0.866) solid gray;
}
Итог
Может показаться, что математика совсем не относится к визуальной стороне веб-дизайна и разработке, но всё же она имеет несколько практических применений. Поэтому почему бы не стряхнуть пыль со школьных тетрадей по математике и посмотреть, не найдётся ли там что-нибудь, что поможет взглянуть на изучение CSS c другой стороны?