Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Початок роботи з CSS Math Functions Level 4

by
Length:LongLanguages:

Ukrainian (українська мова) translation by Pembelight (you can also view the original English article)

Functional notations є частиною модуля CSS Values and Units, який містить корисні математичні функції, такі як calc(), а також рівня 4 min() і max().  Ці потужні функції, які вимагають математичних логічних CSS якостей, відкривають неймовірні можливості для CSS розробників. У цій статті ми обговоримо calc(), min() і max(), а також як всі троє можуть бути корисними у вашій роботі прямо зараз. Давайте розпочнемо!

Що ж таке функціональні позначення?

Functional Notations - це один із дев'яти основних розділів (а точніше розділ 8) модулів W3C CSS Values ​​and Units. Що стосується Level 4 Editor's Draft, Functional Notations тепер містить додаткові підрозділи, такі як toggle(), що дозволяє перемикатися між значеннями, та атрибути посилання через використання attr().  Також є інший цікавий підрозділ “Mathematical Expressions”, який охоплює знайомі нам математичні функції calc(), min() і max().

Давайте звернемося до визначення W3C, який нам пояснить, що таке Functional Notations:

"functional notation - це тип компоненту, який може представляти більш складні типи або викликати спеціальну обробку. Синтаксис починається з імені функції, після чого йде ліва дужка, а потім аргумент (аргументи) до позначення, а потім - права дужка ".

Кажучи простою мовою, це "назва функції", така як calc, з відкриттям ( і закриттям ) круглої дужки. Але що між цими дужками?

Введення математичних виразів

Як уже згадувалося, "Mathematical Expressions" є підрозділом "Functional Notations", але що це за розділи і що вони пропонують? Знову ж таки, повернемося до W3C, де вони назви розділів визначаються як:

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

Це означає, що calc(), min() і max() - це "математичні функції", які дозволяють використовувати "вирази" в дужках для "обчислення значень".  Гаразд, тепер це зрозуміло. Термін "вирази" - це просто привабливий спосіб сказати: "математична логіка повністю допускається в круглих дужках".

Введений в 4-й рівень - це вже нещодавно оновлене визначення, що доповнює те, що ми знали до цих пір:

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

Для подальшого з'ясування, під словами  "інші математичні функції" вважаються calc(), min() і max(), але вони повідомляється, що ці функції можуть бути вкладені один в одне.  Ви можете написати calc(min()), min(calc ()), calc(max (min ())), calc(min(attr ())) і так далі. Однак моя пропозиція полягає в тому, щоб зробити все можливе і уникнути таких вкладень один в одне, попри те, що специфікація надає таку можливість.

Тепер давайте знову привітаємося із кількома  відомими математичними функціями, які практично втратили шанс бути введеним в роботу CSS Working Group.

Ласкаво просимо назад min() та max()

Функції min() і max() є двома найвідомішими математичними функціями, але тільки після того, як вони були майже вилучені з розділу Values and Units посібника Level 4 Editor's Draft. Розробник Lea Verou  запровадив такі зміни, які мене дуже ощасливили.

"Тепер, коли Values 3 вже відійшло в минуле, можливо настав час додати min() і max() у Values 4?

Автори роблять надзвичайно химерні хаки з calc(), щоб їх використати для font-size та line-height, які вони називають "CSS локи". Якщо ви погуглите CSS локи, то ви побачите, як ці поширені хаки вказуюють на чіткі потреби розробників.

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

Після опублікування його пропозиції на GitHub, min() і max() були офіційно повернені до Editor's Draft of CSS level 4 Values and Units, та ще раніше до WebKit.  Розробники можуть особисто експериментувати та досліджувати використання WebKit Nightly (станом на 24.10.14). Ось цікаво поглянути на один із зразків від WebKit, в якому для min() і max() була надана надзвичайна підтримка.

Коротко про clamp()

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

"... Я згоден, що clamp() хоча технічно зайвий, але незважаючи на це, він досить корисний, і певно що, заслуговує на існування".

О так! Це може бути доповненням до математичних виразів. Така функція, як clamp(), на сьогодні є суттєвою проривом для створення адаптивності, і безумовно, буде використовуватися в CSS.

Навколо цієї CSS функції обертаються щоденні дискусії, і я із тих, хто підтримує її використання; бо в цьому є суть і  логіка. Я просто запитую себе, що ж тоді станеться з використанням min() і max(), якщо в майбутньому clamp() широко використовуватиметься.

Відкинемо просту балаканину і зосередьмося на реальних математичних функціях, які ми мали б обговорити; calc(), min() і max().

Час познайомитися з calc()

Це одна з моїх улюблених математичних функцій, яка надає витонченості CSS стилів і може зробити всілякі чарівництва. Окрім акуратного синтаксису у цієї функції є неймовірна підтримка.

У зразку вище ми маємо назву функції (calc), а потім у фігурних дужках  - "дія", або, іншими словами ... математична логіка.

Функція calc() дозволяє використовувати математичні дії з додаванням (+), відніманням (-), множенням (*) та діленням (/), які будуть використовуватися як значення компонентів. " - W3C

Знову ж таки, це просто гарне визначення для простих слів: "ви можете робити математичні дії у фігурних дужках".

Що стосується виразів, то розробники можуть передавати загальні значення, такі як 50%, 2em, 40 і використовувати calc() для позначення тегів <length>, <frequency>, <angle>, <time>, <percentage>, <number> або <integer>.  Мої улюблені одиниці для використання та перевірки адаптивності є одиниці viewport (vh, vw, vmin, vmax). Вони визначають розмір екрану, що особливо зручно для використання шрифтів, що ми зараз і побачимо.

Використання calc() для адаптивності

Наведений вище приклад є лише одним із способів обробки адаптивної типографіки. Використовуючи комбінацію з media queries, Sass, calc() та одиниць viewport , Майк доводить нам, наскільки розмір шрифтів буває гнучким в межах встановлених пікселів.

Ось інша демонстрація шрифтів з використанням calc() та одиниць viewport від розробника Tim Brown. Ця демонстрація була використана в його статті про CSS Locks, яку я рекомендую прочитати, якщо ви цікавитесь типографікою.

Viewport одиниці та calc() також можуть створити деякі з найулюбленіших прикладів шаблону. У наведеній вище демонстрації, calc() використовується для віднімання висоти футера від висоти Viewport (vh).  Це розумне рішення від розробника Chris Coyier для одного з найпоширеніших та постійних запитань "як притиснути футер до низу". Демонстрація також чудово працює з використанням змінних CSS.

Існують, звичайно, й інші випадки для використання calc(), наприклад додатки та адаптивність, як ось у цій демонстрації від  David Khourshid.  David використовує calc() для background, offset, transforms, filters, opacity і навіть width. Це також чудовий приклад для тих, хто хоче поринути в React разом зі змінними CSS.

Тепер давайте подивимося на дві додаткові математичні функції, якими ви, звичайно, користуєтеся, в даний час відомі, як min() і max().

min() і max(): визначення граничних значень

Як згадувалося раніше, ми знаємо про ці функції ще з дитинства, тому їх використання у демо-версіях можуть здатися вам нудними, але не бійтеся експериментувати.  Для того, щоб дослідити min() і max(), вам потрібно буде завантажити WebKit Nightly. Після завантаження ви можете відкрити Nightly (чорний значок) і перейти до роботи.

Згадайте, які вирази ми вивчили? Це був просто привабливий спосіб сказати "математична логіка". Наприклад:

Кожний вираз - це кома, розділена наступним додатковим виразом. Ми також можемо звернутися до специфікації, яка прямо визначає це саме правило:

"Обчислене значення функції min() або max() - список виразів, розділених комами" - W3C

У випадку, якщо ви пропустили в роз’ясненні цю дуже важливу частину, специфікація просто вказала список виразів, розділених комами, за зразком яких ми зробили свій код."

"Функція min() або max() вважається найменший (найбільш негативний) або відповідно найбільший (найбільш позитивний), розділений комами розрахунок". - W3C

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

Давайте тепер поглянемо, як min() і max() показали себе на практиці; поїхали.

min() і max() на практиці

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

У наведеному вище прикладі я обмежую width за допомогою одного рядка.

Використовуючи вищезазначений підхід, я можу додати середнє обмеження, а не тільки мінімум і максимум. Цей код повідомляє браузеру "Спробуй встановити ширину до 70vw, але не менше 200px (100px * 2) або вище 500px". Існує також інший спосіб для досягнення такого ж результату.

Якщо взяти більш детально, тут показано мінімальне, середнє і, нарешті, максимальне обмеження. Вкладені max() у min() допомагає затиснути значення між бажаними обмеженнями.

Якщо б ми використовували властивості min-width і max-width, ми б досягли тих самих результатів, що й з min() і max(). Мені цікаво, чи будуть в найближчі роки такі властивості, як min-width, вважатися застарілими на користь математичних функцій, як min() і max().

Що стосується font-size, то я використовую той же min/max підхід, щоб створити адаптивні й обмежені в розмірах шрифти

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

Коли мова йде щодо обмежень CSS, такі захоплюючі новини надихають розробників.

ви введете в пошук CSS Locks (CSS шлюзи), ви знайдете на цю тему безліч статей та відео. CodePen також відображає різні шорткоди  у пошуці за кодовим словом CSS Locks. Для тих, хто є новим для ідеї CSS шлюзів, дозвольте мені пояснити більш детально..

“Flexible typography with CSS locks” , однак ця техніка була вперше представлена розробником ​​Mike Riethmuller у статті  “Precise control over responsive typography.”>

calc() та одиниць viewport - це практичне рішення для заголовків та тексту, які масштабуються вгору чи вниз залежно від розмірів екрана. І як ми вже знаємо, цей тип обмеження називаються "CSS шлюзи"..

  • 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(), повідомте нас про це в коментарях. Вдалого кодування!!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.