Начало работы с математическими функциями CSS 4 уровня

Функциональные обозначения являются частью модуля CSS Values and Units, который также является основой для полезных математических функций, таких как calc(), и с 4 уровня min() и max(). Эти мощные функции открывают невероятные возможности для авторов CSS, которым требуются математические логические возможности в CSS. В этой статье мы обсудим calc(), min() и max(), а также то, как все они могут быть полезны в вашей работе прямо сейчас. Давайте начнем!

Что такое Функциональные обозначения?

Функциональные обозначения - это один из девяти родительских разделов (точнее, восьмой раздел) модуля W3C CSS Values and Units. Начиная с Черновика редактора уровня 4, Функциональные нотации теперь содержат дополнительные подразделы, такие как toggle(), который позволяет переключаться между значениями и ссылками атрибутов с помощью attr(). Есть также еще один интересный подраздел под названием "математические выражения", который включает в себя наши дружественные математические функции calc(), min() и max().

Давайте обратимся к определению W3C, чтобы понять, что такое Функциональные обозначения:

"Функциональная нотация - это тип значения компонента, который может представлять более сложные типы или вызывать специальную обработку. Синтаксис начинается с имени функции, за которым следует левая круглая скобка, за которой следует аргумент(ы) для обозначения, за которым следует правая круглая скобка.”

В терминах непрофессионала говорят, что это ”имя функции", такое как calc, а затем открывающие ( и закрывающие ) скобки. Но что между ними происходит?

Введение в Математические Выражения

Как уже упоминалось, "математические выражения" являются подразделом "функциональных обозначений", но что они собой представляют и чем занимаются? Опять же, давайте обратимся к W3C, где они определены как:

"Математические функции calc(), min() и max() позволяют использовать в качестве значений компонентов математические выражения со сложением (+), вычитанием (-), умножением (*) и делением (/)."

Это означает, что calc(), min() и max() являются “математическими функциями”, которые позволяют “выражениям” в скобках “вычислять значения”. Хорошо, теперь все понятно. Термин "выражения“ - это просто причудливый способ сказать: "математическая логика полностью разрешена в скобках".

Внесение в уровень 4 - это обновленное определение, дополняющее то, что мы знали до сих пор:

"Компонентами математической функции могут быть литеральные значения, другие математические функции или другие выражения, например, attr(), имеющие допустимый тип аргумента (например, <length>)."

Чтобы уточнить, "другие математические функции", упомянутые здесь, это calc(), min() и max(), но также функции могут быть вложены друг в друга. Вы можете написать calc(min()), min(calc()), calc(max(min())), calc(min(attr())) и так далее. Тем не менее, мое предложение состоит в том, чтобы сделать все возможное и избежать вихря вложенности, даже при возможности сделать это, как предлагает спецификация.

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

Добро пожаловать min() и max()

Функции min() и max() - это две математические функции, оставившие свой след, но только после того, как они были почти удалены из проекта редактора уровней значений и единиц 4 уровня. Благодаря Lea Verou, ветры перемен заставили их войти, благодаря чему я счастлив.

"Возможно, теперь, когда значения 3 перешли в CR, пришло время пересмотреть добавление min() и max() обратно в значения 4?

Авторы делают чрезвычайно странные хаки с calc(), чтобы использовать их как font-size и line-height, они их называют «CSS locks». Если вы загуглите CSS locks, вы увидите, насколько широко распространены эти хаки, что указывает на явную потребность.

Более того, по мере того, как переменные CSS становятся более широко используемыми, потребность в min() и max() станет еще больше. Я вспоминаю, что некоторые из проблем, которые заставили нас отказаться от них 6 лет назад, теперь могут быть решены с помощью недопустимой концепции времени вычисляемого значения, которое вводили переменные". - Lea Verou

После предложения Lea на GitHub, min() и max() были официально добавлены обратно в редакторский проект CSS 4 уровня значения и единицы, включая раннее принятые от WebKit. Разработчики могут лично экспериментировать и исследовать используя WebKit Nightly (по состоянию на 10/24/17). Вот единственный коммит WebKit для любопытства, где поддержка была магически предоставлена для min() и max().

Беглый взгляд на clamp()

Еще одна интригующая часть сплетен в той же самой теме GitHub, начатой Lea Verou, была комментарием, где Tab Atkins предлагает фактическую функцию clamp(). clamp() буквально «зажимает» значение между граничными значениями.

"...Я согласен с тем, что clamp(), хотя технически излишен, полезен достаточно часто, что он, вероятно, заслуживает существования."

О боже! Это было бы довольно хорошее дополнение к математическим выражениям. Такая функция, как clamp(), является несомненной победой для сегодняшних потребностей и, безусловно, будет желанным другом языка.”

1

clamp(minN, midN, maxN)

Текущие обсуждения вращаются вокруг этого типа синтаксиса выше, и я согласен с этим предложением; это имеет смысл и читается логически. Мне просто интересно, что произойдет с использованием min() и max(), если clamp() действительно появится в будущем.

С нашей болтовней мы немного отвлеклись, давайте сосредоточимся на математических функциях, которые мы сюда пришли обсудить; calc(), min() и max().

Теперь встречайте calc()

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

1

.my-element {

2

    width: calc(50% - 10rem);

3

}

В этом примере выше у нас есть имя функции (calc), за которым следуют наши скобки, содержащие “выражения”, или, другими словами...математическая логика.

«Функция calc() позволяет использовать математические выражения со сложением (+), вычитанием (-), умножением (*) и делением (/) в качестве значений компонентов». - W3C

Опять же, прикольно говорить: «Вы можете делать математику в круглых скобках».

Что касается выражений, авторы могут передавать общие значения, такие как 50%, 2em, 40, и могут использовать calc() везде, где разрешены значения <length>, <frequensy>, <angle>, <time>, <percentage>, <number> или <integer>. Мои любимые единицы для использования и изучения в дикой природе - это единицы viewport (vh, vw, vmin, vmax). Это значения размера экрана, которые особенно удобны в отношении типографики и макета, как мы сейчас увидим.

calc() В дикой природе

Приведенный выше пример - это всего лишь один способ обработки отзывчивой типографики. Используя комбинацию медиа-запросов, Sass, calc() и единиц viewport, Майк доказывает, насколько отзывчивая типографика может отлично масштабироваться между конкретными значениями пикселей.

Вот еще одна потрясающая демонстрация типографики с использованием calc() и единиц viewport от Тима Брауна. Эта демонстрация была использована для его статьи, обсуждающей CSS locks, которую я рекомендую вам прочитать, если типографика - это то, о чем вы заботитесь.

Единицы Viewport и calc() могут также помочь создать некоторые из наших самых любимых шаблонов. В демо выше, calc() используется, чтобы вычесть высоту футера из высоты viewport (vh). Умное решение Криса Койера для нашего старого друга «The Sticky Footer», которое так часто просят. Эта демонстрация также отлично работает в сочетании с переменными CSS.

Конечно, есть и другие случаи, когда речь идет о приложениях и динамических состояниях, показанных в этой демонстрации Дэвида Харшида. Дэвид использует calc() для фона, значений смещения, преобразований, фильтров непрозрачности и даже ширины. Это также отличная демонстрация для тех, кто хочет погрузиться в React вместе с переменными CSS.

Теперь давайте посмотрим на две дополнительные математические функции, которые вам наверняка понравятся, в настоящее время известные как min() и max().

min() и max(): Определение ограничений

Как упоминалось ранее, эти функции все еще находятся в зачаточном состоянии, поэтому демонстрационные примеры использования являются мрачными, но не позволяйте этому отпугнуть вас от экспериментов. Чтобы исследовать min() и max(), вам нужно будет загрузить WebKit nightly. После загрузки вы можете открыть Nightly (черный значок) и приступить к работе.

1

min(expression, [expression])

2

max(expression, [expression])

Помните, когда мы узнали, что такое выражения? Это был просто причудливый способ сказать "математическая логика". Например:

1

min(1 * 10vw, 2 / 50vw)

2

max(1 * 10vw, 2 / 50vw)

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

«Вычисленное значение функции min() или max() представляет собой список выражений, разделенных запятыми» - W3C

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

"функция min() или max() представляет наименьшее (самое отрицательное) или наибольшее (самое положительное), соответственно, вычисление, разделенное запятыми, которое она содержит." - W3C

Вы все поняли? Они просто сказали наименьший (самый отрицательный) или самый большой (самый положительный). W3C просто дал нам разрешение писать отрицательные числа как часть наших выражений.

На этот раз посмотрим, как min() и max() проявляют себя в рабочей демонстрации; держитесь за свои шляпы.

min() and max() В реальной жизни

Вот демонстрация, показывающая несколько вариантов использования min() и max() с использованием width и font-size. Width имеет минимальное ограничение и максимальное ограничение, в то время как font-size нашего компонента также зажимается с минимальным и максимальным значением. Помните, что это будет работать только в WebKit Nightly на момент написания этой статьи; если вы хотите увидеть анимацию в действии, посмотрите на этот GIF (честно говоря слишком тяжелый, чтобы быть встроенным в страницу).

В приведенном выше примере я начинаю с того что, ограничиваю width и делаю это в одной строке.

1

width: min(max(100px * 2, 70vw), 500px);

Используя подход выше, я могу включить среднее ограничение против минимума и максимума. Эта строка кода говорит браузеру: "попробуйте установить ширину 70 vw, но не позволяйте ей идти ниже 200px (100px * 2) или выше 500px." Есть еще один путь, по которому можно пойти, чтобы добиться подобного результата.

1

min(max(minN, midN), maxN)

Чтобы объяснить более подробно, это приравнивается к минимуму, середине и, наконец, максимальному значению ограничения. Вложенность max() в min() помогает зажать между желаемыми ограничениями.

1

min-width: 200px

2

max-width: 500px

Если бы мы использовали min-width и max-width, мы бы пришли к эквивалентному пункту назначения, которого мы достигли через min() и max(). Мне любопытно, станут ли такие свойства, как min-width, устаревшими в пользу математических функций, таких как min() и max() в ближайшие годы.

Что касается font-size, я использую тот же подход, что использовал с min/max для создания отзывчивой и блокирующей типографики.

1

font-size: min(max(1rem, 4vw), 2rem);

Я говорю браузеру: "попробуйте установить размер шрифта на 4 vw, но не позволяйте ему опускаться ниже 1rem или выше 2rem." К сожалению, нет эквивалента, такого как min-font-size и max-font-size, как у нас для width, но по спецификации CSS Fonts Module Level 4 это может стать реальностью.

Это, безусловно, захватывающие новости, и авторы так же рады, когда дело доходит до ограничения значений в CSS.

Наличие min() и max() означает отсутствие “CSS Locks”! Вы можете сделать зажим по вложенности min(max()) ☛ font-size: min(max(30px, 10vw), 60px); pic.twitter.com/hMxAt0iu2K

- Tommy H🎃dgins (@innovati) Сентябрь 19, 2017>

используете поисковую систему для поиска CSS-Locks, вы найдете кучу статей и демонстраций. CodePen также отображает различные примеры при поиске CSS Locks. Для тех, кто не знаком с идеей CSS Locks, позвольте мне объяснить более подробно..

"Гибкая типографика с CSS locks", однако эта техника была впервые представлена Майком Ритмуллером в его статье "Точный контроль над отзывчивой типографикой".>

calc() и единиц viewport для заголовков и копий тела, которые масштабируются вверх или вниз в зависимости от размеров экрана. Этот тип ограничения - это то, что мы узнали как “CSS-Locks”..

• Viewport Unit Based Typography Zell Lieww
  
• The math of CSS locks Florens Verscheldee
  
• CSS “locks” Chris Coyierr
  
• Fluid Typography Geoff Grahamm
  
• Responsive And Fluid Typography With vh And vw Units Michael Riethmullerr
• Fluid Responsive Typography With CSS Poly Fluid Sizing Jake Wilsonn

font-size с JavaScript у руля, в то время как CSS находится на заднем сиденье. Я позволю вам самим решить, как Вы относитесь к смешиванию JavaScript и CSS..

calc() или экспериментировали с min() и max(), пожалуйста напишите об этом в комментариях. Удачного кода!!