Коли використовувати REM

20 порад для написання сучасного CSS

На відміну від інших властивостей, вертикальні відступи (margin) при зустрічі конфліктують. Це означає, що коли нижній відступ одного елемента зустрічається з верхнім відступом іншого, спрацьовує лише найбільший. Ось приклад:

Замість очікуваних 70px між червоним та синім квадратами в нас лише 40px, відступ синього квадрату просто проігнорувався. Є декілька шляхів обійти це, але найкращим варіантом буде просто використовувати один з вертикальних відступів. Я рекомендую margin-bottom .

2. Використовуйте flexbox

Flexbox створили не просто так. Звісно, float та інлайн-блоки працюють, але це по суті інструменти для стилізації документів, а не сайтів. Flexbox, в свою чергу, спеціально розроблений для створення макетів. Набір властивостей, що використовуються з flexbox дають розробнику дуже гнучкий механізм створення адаптивних сторінок. З flexbox ви полюбите адаптивну верстку. На сьогодні він має дуже гарну підтримку в браузерах, так що вас нічого не повинно зупиняти.

Якщо це вас зацікавило, в нас є стаття, де описано 5 різних випадків використання flexbox.

3. Завжди скидайте CSS

Хоча за останні роки ситуація поліпшилася, відображення елементів в різних браузерах все ще досить відрізняється. Найкращий спосіб виправити це — скинути стилів для всіх елементів.

Для цього є вже готові бібліотеки: normalize.css, minireset та ress. Якщо ви не хочете використовувати бібліотеку, ви можете зробити це самі. Наприклад, так (це дуже зверхній приклад):

Виглядає суворо, так. Але насправді анулювання всіх відступів робить вашу роботу легшою і приємнішою. Іншою властивістю, котру слід скинути є box-sizing: border-box; , більше про неї в наступному пункті.

4. Border-box для всіх, і нехай ніхто не піде ображеним

Більшість новачків не знають про властивість box-sizing . А дарма, вона дуже важлива. Кращим способом зрозуміти її значення буде розглянути два можливі значення:

• content-box (за умовчуванням) — коли ми задаємо ширину чи висоту елемента, змінюється розмір контенту всередині, а padding і рамка (border) додаються до цього значення. Тобто, якщо ми задамо div'у з padding: 10px ширину 100px, то в макеті він займе 120px (100 + 10*2).
• border-box — в цьому випадку padding та рамка вже включені в розміри блока, і тепер div з шириною 100px займе рівно стільки ж місця в макеті.

Встановлення border-box для всіх елементів робить вашу роботу простіше, позбавляючи необхідності кожен раз рахувати.

5. Зображення як фон

Коли потрібно додати зображення до вашого макету (особливо, якщо він адаптивний), використовуйте тег і CSS-властивість background замість .

Вам може здатися, що це лише зайва робота, але насправді це полегшує їх стилізацію, збереження оригінальних розмірів та пропорцій. А все завдяки властивостям background-size , background-position та іншим.

Мінусом такого підходу є невелике зниження доступності, адже зображення не будуть коректно розпізнаватися скрін рідерами та пошуковими системами. Це можна виправити за допомогою object-fit, але він ще не має достатньої підтримки.

6. Кращі рамки для таблиць

Таблиці в HTML так собі. В них заплутана логіка, їх важко стилізувати, а зробити адаптивними ще важче. Наприклад, ви хочете додати рамку до ваших клітинок в таблиці. Скоріше за все, вийде щось на зразок цього:

Як бачите, у нас з'явилася купа повторюваних рамок, це виглядає жахливо. Як це виправити? Просто додайте border-collapse: collapse; до таблиці.

7. Пишіть корисні коментарі

Хоча CSS - не мова програмування, це все ще код, і він повинен бути документований. Прості коментарі, що допомагають розібратися в структурі коду стануть у пригоді вашим колегам, або вам самим у майбутньому.

Для великих ділянок, таких як стилі основних компонентів або медіа-запити, використовуйте стилізований коментар і залишіть декілька пустих ліній після:

/*--------------- #Header ---------------*/ header < >header nav < >/*--------------- #Slideshow ---------------*/ .slideshow

Деталі, або просто менш важливі компоненти можна помічати однією стрічкою:

/* Footer Buttons */ .footer button < >.footer button:hover

Запам'ятайте, у CSS немає інлайнових коментарів ( // comment ), завжди використовуйте /* . */ .

8. Всі люблять kebab-case

Коли імена класів чи ідентифікатори мають більше одного слова, вони повинні бути записані через дефіс (-). CSS не чутливий до регістру, тому camelCase не використовують, а нижнє підкреслення ( _ ) раніше було заборонений в іменах, тому всі використовують дефіс.

/* не робіть так */ .footerColumnLeft < >.footer_column_left < >/* А так робіть */ .footer-column-left

Коли доходить до найменування, ви можете ще розглянути BEM, що слідує принципу розподілу на компоненти. На CSS Tricks є чудова стаття про це.

9. Не повторюйтесь

Так як таблиці у нас каскадні, то й властивості успадковуються від елемента вище. Наприклад, властивість font , давайте встановимо шрифт відразу для всієї сторінки:

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

10. CSS анімації за допомогою transform

Не анімуйте ваші елементи зміною ширини, висоти чи відступів. Краще використовувати властивість transform , що надає зручний спосіб для зміни вигляду елементу.

Наприклад, ми хочемо анімацію мяча, що вилітає зліва.

.ball < left: 50px; transition: 0.4s ease-out; >/* Не круто */ .ball.slide-out < left: 500px; >/* Круто */ .ball.slide-out < transform: translateX(450px);

Transform може приймати велику кількість функцій ( translate , rotate , scale та інші).

11. Не робіть з себе велосипедиста

Спільнота в CSS просто величезна, і нові бібліотеки виходять дуже часто. Вони допомагають вирішувати купу різних проблем. Вони бувають різні: від маленьких сніппетів до цілих фреймворків. Більшість з них з відкритим кодом (ще б пак, сховати css досить складно — прим. пер.).

Наступного разу, коли в вас виникне якась проблема в CSS, перед написанням велосипедів і милиць, пошукайте рішення на GitHub чи CodePen.

12. Тримайте пріоритет селекторів низьким

Не всі селектори в CSS рівні. Новачки зазвичай думають, что селектори, що знаходяться найнижче — перезапишуть решту. Але це не завжди так. Погляньте на приклад:

Ми хочемо, щоб при додаванні класу .active до будь-якої кнопки вона ставала червоною. Це не спрацює, так як наша кнопка вже має вказаний фоновий колір з використанням ID, який має більший пріоритет. Якщо спростити, то виглядає так:

ID (#id) > Клас (.class) > Тип (наприклад, header)

Зауважте, що a#button.active має вищий пріоритет, ніж a#button І чим більший пріоритет у ваших селекторів — тим важче ними управляти.

13. Не використовуйте !important

Зовсім. Те, що спочатку здається швидким рішенням проблем, стає великою проблемою в майбутній підтримці коду. Не лініться і знайдіть проблему в селекторі і чому він не працює, та виправте.

Єдиний випадок, коли можна використовувати !important , це перезаписання інлайн стилів, що вказані в HTML ( ).

14. Caps Lock для акцентів, text-transform для стилю

Верхній регістр за допомогою Caps Lock в HTML слід робити лише щоб акцентувати якесь слово чи словосполучення, коли ви хочете виділити його:

Employees MUST wear a helmet!

Якщо верхній регістр - частина вашого стилю (наприклад, заголовок), то слід використовувати CSS-властивість text-transform , так зручніше і виглядає краще.

Якщо вам потрібен не верхній, а нижній регістр? Чи велика літера на початку речення? text-transform все це вміє.

15. Em, Rem та пікселі

Розробники вже давно холіварять (і будуть продовжувати) про те, що слід використовувати для встановлення розмірів елементів та шрифтів: em, rem чи px. Правда в тому, що всі три важливі і мають свої плюси (і мінуси теж).

Всі розробники та проекти різні, тому не може бути встановлено жорстких правил що слід використовувати. Але можна дати загальні рекомендації:

• em — Розмір одного em дорівнює font-size батьківського елемента. Зазвичай використовується в медіа-запитах і дуже зручний для адаптивності, але іноді при частому використанні стає заплутаним (1.25em від 1.4em від 16px = ?)
• rem — Розмір одного rem дорівнює font-size у елемента. Rem дуже зручний, один раз задавши відносні розміри ви можете пропорційно збільшувати заголовки та параграфи, потрібно лише задати абсолютний (px) розмір і змінювати його коли потрібно.
• px — Пікселі дають вам найбільший контроль за розмірами, але при їх частому використанні ви втрачаєте можливість легкого масштабування. Вони надійні, легкі для розуміння і наближені до реального значення (можливе відхилення в 1-2 пікселі).

Але це лише рекомендації, не бійтеся експериментувати і знаходити оптимальні рішення для себе.

16. Використовуй препроцесори, Люк

Ви вже чули про них: Sass, Less, PostCSS (насправді це постпроцесор — прим. пер.), Stylus. Препроцесори - наступна ланка в еволюції CSS. Вони дозволяють використовувати змінні, функції, вкладені селектори і інші круті речі, що роблять написання CSS дійсно приємним.

Наприклад, ось так в Sass використовуються змінні і функції:

$accent-color: #2196F3; a < padding: 10px 15px; background-color: $accent-color; >a:hover

Єдиним мінусом є те, що код на препроцесорах повинен збиратися в звичайний CSS. Проте, якщо ви вже використовуєте збиральники проектів (Grunt, Gulp, WebPack) - це не буде проблемою. А якщо не використовуєте, то слід почати.

Якщо ви вирішили спробувати, але не знаєте що саме, то в нас є порівняння Sass vs Less vs Stylus. Якщо ж вже вирішили, то в нас є статті про LESS і про Sass, і ще одна.

17. Автопрефікси для кращої сумісності

Написання префіксів для кожного браузера — це одна з найдратівливіших речей в CSS. Вони неоднакові і ви ніколи напевно не знаєте які саме вам потрібні.

Але на щастя є інструменти, що роблять це за вас.

• Онлайн Autoprefixer
• Плагіни для редакторів: Sublime Text, Atom
• Бібліотека Autoprefixer (PostCSS)

18. Використовуйте мініфікований код в продакшені

Щоб поліпшити швидкість завантаження вашого сайту ви завжди повинні мініфікувати код, що зменшить його розмір (іноді зміни дуже помітні). Звісно, це робить код незрозумілим для подальшої розробки, тому завжди потрібно мати дві версії: для розробки та мініфіковану.

Зжати CSS можна декількома шляхами:

• Онлайн інструменти CSS Minifier (є API), CSS Compressor
• Плагіни для редакторів: Sublime Text, Atom
• Бібліотеки Minify (PHP), CSSO та CSSNano (PostCSS, Grunt, Gulp)

19. Не забувайте про Caniuse

Різні браузери підтримують різні нововведення по різному. Використовуйте caniuse або інший схожий сервіс щоб перевірити глобальну підтримку тієї чи іншої фічі. Чи потрібні префікси, чи не спричиняє вона багів на якійсь платформі?

Але перевірки на caniuse недостатньо, ви повинні проводити тест: вручну чи автоматично, бо інколи макети ламаються без явної причини.

20. Валідація

Можливо, валідація CSS не така важлива як валідація HTML чи JS, але перевірка ваших стилів через CSS Linter вкаже на помилки, попередить про використання поганих практик і підкаже як ваш код можна поліпшити.

Зробити це теж можна різними шляхами:

• Онлайн інструменти W3 Validator, CSS Lint
• Плагіни для редакторів: Sublime Text, Atom
• Бібліотеки stylelint (Node.js, PostCSS), CSSO та css-validator (Node.js)

postcss sass frontend less css

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter

Правила резюмної веб-типографії

Відповідальна веб-типографія є жорсткою - вам потрібно мати обидва дизайнерські відбитки, так і технічні ноу-хау. Але, однак, хитрі це може бути, не так не є варіантом, оскільки типографія є наріжним каменем веб-дизайну.

Як ви отримуєте як дизайн, так і код? Як ваші розробники спілкуються з дизайнерами Pixel-pushing? Як ваші дизайнери можуть доглядати за типографікою Найшвидшим і найпростішим способом є отримання ваших дизайнерів та розробників, щоб говорити на тій же мові, поважають один одного для їхнього ремесла, і прагнуть зрозуміти як принципи, так і обмеження веб-типографії.

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

Що таке хороша типографія?

«Добре» завжди суб'єктивні; Це не фіксований анкер, який ми можемо вирізати комунікації. Для розробників та розробників ефективно спілкуватися, ми повинні почати говорити про загальний знаменник, що обидві сторони можуть зрозуміти. Що знаменник є метою типографії.

Типографія - це поява тексту; Ми одягаємо текст. Мета одягання полягає в тому, щоб зробити власника привабливим, щоб залучити розмову, але не привертає до уваги, що інша сторона відволікається від розмови.

Аналогічно, метою типографії полягає в тому, щоб дозволити читачам зосередитись і зануритися у вміст тексту. Хороша типографія, за визначенням, є типографікою, яка допомагає текст виконувати свою мету спілкування.

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

• Сім'я шрифту
• Розмір шрифту
• Висота лінії (також називається провідним)
• Ширина тексту (також називається текстовою мірою)

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

Мистецтво читабельного тексту

Перший крок у будь-якому проекті є встановлення розмір шрифту , висота лінії і ширина тексту вашого тіла. Цей процес називається навантаженням. Почніть з набору на сторінку, яка містить інформацію, що потребує користувачів. Наскільки це можливо, ця сторінка повинна містити декілька елементів, таких як H1, H2, H3, текст тіла та підписи, для яких ви повинні зробити свідомий вибір щодо того, що працює для вашого дизайну. Більше елементів ваша сторінка містить, тим краще ваші шанси встановити схему типу, яка працює по всій дошці.

Коли ви виберете розмір шрифту , висота лінії і вимірювати текст вашого тіла, переконайтеся, що ви використовуєте реальний вміст. Якщо у вас немає фактичного вмісту, використовуйте текст з Wikipedia замість Lorem Ipsum.

Вам також потрібно поставити себе в ту ж силу, яку ви набираєте, тому що відстань між очима читача та екраном відрізняється від різних пристроїв. Якщо ви набираєте для мобільного пристрою, подивіться на свій вихід через телефон. Якщо ви набираєте для ноутбука, сидіть за столом з ноутбуком тощо.

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

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

Ось деякі швидкі керівні принципи, які допоможуть вам забезпечити хороший розмір шрифту, ведучий та вимірювання.

Ваш шрифт занадто малий, якщо:

• Ви повинні зосередитися, щоб прочитати текст
• Ви повинні писати ваші очі
• У вас є бажання збільшити

Ваш шрифт занадто великий, якщо:

• Ви починаєте помічати букви, а не читати вміст
• Ви можете лише прочитати один до трьох слів за один раз
• Ви маєте бажання зменшити

Ваш текст занадто довгий, якщо:

• Ви повинні перетворити голову, щоб прочитати текст
• Ви втрачаєте концентрацію на півдорозі

Ваш текстовий захід занадто короткий, якщо:

• Ви відчуваєте роздратування, коли текст переривається до наступного рядка
• Ваші очі втомилися від підстрибуючи ліворуч і швидко швидко

Ваш провідний занадто вузький, якщо:

• Текст відчуває себе щільним і переважним
• Ви читаєте неправильну лінію тексту

Ваш провідний занадто великий, якщо:

Завжди пам'ятайте визначення хорошої типографії: ви не після досконалості, ви просто вилучаєте для тексту, який легко читати. При цьому ви хочете перевірити ваш вибір набору з вашою аудиторією (друзями та співробітниками роблять великі тестувальники), щоб переконатися, що ви маєте рацію. Тільки рухатися далі, щоб встановити розміри інших елементів, коли ви закінчите набір тексту тіла.

Набір інших елементів

Багато дизайнерів і розробників вибрали розмір шрифту Для елементів, як H1 і H2 візуально, і просто сподіваюся, що ці магічні числа добре працюють у своєму дизайні. Але немає необхідності просто витягти цифри з тонкого повітря; Типографів використовували типографічні ваги протягом століть, щоб допомогти з цим. Що ви робите, це вибрати номер із шкала типографіки як розмір вашого елемента. На жаль, ці ваги не можуть бути безпосередньо використані для Інтернету, оскільки вони побудовані для дизайну друку.

Тім Браун, експерт у галузі типографії, придумав розчин, який називається модульною шкалою. Він функціонує точно як шкала типографіки, за винятком конструкції модульної шкали з текстом тіла, на який ви вирішили.

Щоб створити модульну шкалу, ви приймаєте текст тіла розмір шрифту (Також називається базовим шрифтом) і помножте його за співвідношенням багато разів, поки ви не отримаєте шкалу. Часто, співвідношення, яке ви використовуєте, походить від музики (оскільки музика має коріння в гармонії). Вище є приклад масштабу, створений за допомогою a Калькулятор модульного масштабу .

Коли ви закінчите будівництво модульної шкали, ви можете перейти до набору решти ваших елементів, вибираючи номер з масштабу, як ваш розмір шрифту . Потім встановіть провідний і вимірює з тим самим процесом, поки ви не отримаєте хороший баланс читаних елементів.

Вертикальний ритм

Наступним кроком полягає в тому, щоб допомогти гелю окремих елементів разом, використовуючи техніку, що називається вертикальним ритмом. Для одного елемента, щоб гармонійно протікають у наступний, нам потрібно налаштувати те, що приєднується до них: білий простір. Цей білий простір повинен бути достатньо великим, щоб диференціювати один елемент з наступного чіткості, але це має бути достатньо малим, щоб забезпечити потік.

Скільки білого простору потрібно використовувати? Багато дизайнерів вибирають фігуру, як 10px, який легко розробити. З іншого боку, багато розробників, як правило, збити випадкове число (наприклад, 6PX) або з іншої системи Grid, або стаття, яку вони читали в Інтернеті. Не дивно, що ці два не можуть спілкуватися.

Як ви можете собі уявити, немає необхідності покладатися на магічне число для білого простору; Ми можемо використовувати кілька висота лінії Значення нашого тексту тіла. Це тому, що ми інстинктивно визнаємо візерунки білого простору в тексті. Чим сильніше, шаблон, тим безпечніше ми відчуваємо, і чим легше дозволити нашим розумом блукати в зміст.

Використовувати вертикальний ритм, все, що ви робите, це:

1. Встановіть білий простір між елементами до декількох основ висота лінії
2. Встановлювати висота лінії всіх інших елементів до декількох основ висота лінії

Багаторазові питання не потрібно бути цілим числом. Ви можете використовувати значення, такі як 0.5x та 1.25x бази висота лінії Надати вам більше гнучкістю. Ці цінності працюють, оскільки вертикальний ритм використовує принцип повторення.

Ми інстинктивно визнаємо, що білий простір дорівнює висоті базової лінії, оскільки він вже повторюється сильно

Базова сітка або ні?

Всякий раз, коли ми згадуємо вертикальний ритм, поняття базової сітки неминуче походить у малюнок. Незважаючи на те, що базовою сіткою потенційно може бути корисним, це в основному це аварія поїзда, тому що початківці зосереджується так багато енергії, щоб зробити текст сидіти між (або на) Базеліни, які вони відчувають, що це неможливо, щоб отримати вертикальний ритм.

Чесно кажучи, ви ніколи не отримаєте базові сітки, щоб працювати відмінно в Інтернеті, оскільки математика в типографії завжди містить підпіселі (наприклад, 24.8PX), і всі веб-переглядачі обробляють субпікселі по-різному. Наприклад, деякі браузери викликають кожен елемент на сторінці, щоб бути вимкнено 1PX. Ці помилки 1PX накопичуються та натискають будь-які елементи, розміщені нижче вниз сторінці ще далі з сітки. Як результат, я рекомендую з використанням базової сітки.

Рухаючись, давайте крок у сфері реагування на практику та проектування для декількох екранів.

Типографія для декількох екранів

Проектування типографіки для декількох екранів не є ознакою подвиг. Є три речі, які нам потрібно зробити з точки зору дизайну.

По-перше, відстань між очима користувача та їх екраном залежить від того, який пристрій вони використовують. Як правило, користувач розмістить пристрій далі при використанні більшого екрана. Це явище означає, що вам потрібно збільшити розмір шрифту, оскільки ширина пристрою збільшується.

По-друге, ми хочемо зберегти пропорції між текстом тіла та іншими елементами. Це означає, що ми повинні збільшити розміри всіх елементів, оскільки збільшуємо розмір тексту тіла.

По-третє, на певних точках зупинки ми хочемо збільшити розмір шрифту специфічних елементів (наприклад, H1), вибираючи інше число з модульної шкали. Це дозволяє нам контролювати візуальну ієрархію і гарантує, що елементи Garner достатньо уваги, щоб витягнути користувача для читання.

Кодування для чутливої ​​типографії

Ми знаємо, що нам потрібно збільшити наші текстові розміри пропорційно. Найпростіший спосіб зробити це - збільшити розмір шрифту у межах html селектор. Ми також хочемо використовувати відносні одиниці, щоб поважати користувач розмір шрифту переваги.

HTML @Media (min-ширина: 40em) < html >

Ми також хочемо використовувати відносний блок для інших елементів, тому вони масштабуються відповідно до HTML розмір шрифту (" h2 у прикладі нижче). Якщо вам потрібно змінити розмір шрифту до іншого номера в модульному масштабі, все, що ви робите, це змінити розмір шрифту відповідно ( h1 нижче).

 H1 @Media (min-ширина: 40em) < html > H2

Незважаючи на те, що процес виглядає простим, нові розробники можуть зіткнутися з тоною головних болів через беруть участь у математиці, тому я рекомендую використовувати функції та змії, щоб допомогти. Я часто використовую РС() від Модульна масштабна бібліотека . З цим можна написати MS (4) замість 3.157ЕМ і МС (3) замість 2.369EM .

Приклад функції, який може полегшити навантаження розрахунку вертикального ритму:

Це до Функція дозволяє писати ВР (3) Для декількох трьох базових тварин замість розрахунку його самостійно. Щоб допомогти вам (і себе) навіть далі, я створив чутну бібліотеку типографії Типовий .

Відносні одиниці

Всі обговорення відносних одиниць закінчуються питанням того, чи слід використовувати rem або ем одиниці. Я вірю, що rem і ем мають свої унікальні випадки використання, і ви повинні використовувати їх за різними обставинами. Ось два правила, які можуть допомогти вам вибрати, який пристрій використовувати:

1. Використання ем Якщо властивість має масштабувати розмір шрифту
2. Якщо ні, використовуйте rem

Для отримання додаткової інформації про вибір між цими одиницями, Див .

Підсумовуючи його

У цій статті ви дізналися основи чуйної веб-типографії. Звичайно, ви знайдете більше деталей, коли ви пірнаєте глибше, як у теорії, так і в реалізації, але те, що ви маєте тут, охоплює 80 відсотків того, що вам знадобиться в реальному проекті. Оснащений цим знанням, ви готові почати спілкуватися з обома дизайнерами, так і розробниками, як розробляти та кодувати хорошу типографію для чуйних веб-сайтів.

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

Пов'язані статті:

• Майстер доступна веб-типографія
• Дизайн-реактивний сайт з розміром на основі EM
• 10 правил для створення зручних веб-форм

Функції у CSS: як використовувати calc(), max(), min() та clamp()

У CSS багато різних одиниць вимірювання. Існують пікселі, відсотки, vh, vw, em, rem тощо.

Іноді потрібно отримати значення, об’єднавши дві чи більше одиниць вимірювання. CSS має функцію, яку можна використати для таких розрахунків — calc() . У цій публікації ви дізнаєтесь, як вона працює.

Існують й інші функції, які ви можете використовувати з відповідними одиницями (наприклад, max , min та clamp ) та які використовують доречне значення, коли зустрічаються з різними значеннями. Вони особливо корисні в адаптивних макетах та можуть бути альтернативою медіазапитів.

Якщо ви навчитесь використовувати їх правильно, ви уникнете різкої зміни макету, яка трапляється при зміні розміру вікна, якщо ви використовували медіазапит. І код буде меншим!

Як використовувати функцію calc() у CSS

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

Ви також можете використати дужки, щоб вказати порядок виконання дій, який відрізняється від загальних правил.

У виразі всередині функції calc() ви можете використовувати змінні CSS, значення, отримані з attr() , і значення з функцій max() , min() та clamp() .

calc() дозволяє обчислити значення з комплексних параметрів.

Примітка: завжди залишайте пробіл з обох сторін математичних операторів.

Як використовувати функцію max() у CSS

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

Можна подумати, що функцію max можна використати, щоб знайти найменше число.

Суть цієї функції в тому, щоб зробити текст адаптивним, при тому надавши мінімальне значення розміру.

У такому разі текст становитиме десяту частину висоти вікна (за умови, що висота не стане замалою). Текст завжди матиме font-size зі значенням принаймні 1rem , щоб забезпечити легкість для читання.

Як використовувати функцію min() у CSS

Як і функція max, min приймає декілька аргументів (включно з іншими функціями max , min чи clamp ) та повертає найменше значення.

Можна подумати, що завдяки функції min можна знайти найбільше значення.

Скажімо, ви створюєте форму та хочете, щоб вона була адаптивною. Щоб уникнути розтягнутого екрану, який часто зустрічається на найбільших екранах, потрібно надати максимальної ширини.

Ви б написали щось схоже:

Ваша сторінка матиме ширину, яка дорівнює 90% ширини вікна перегляду, або 600 пікселям, незалежно від найменшого розміру. Якщо ширина вікна перегляду більша за ~670 пікселів, форма не буде розтягуватись горизонтально.

Приклад min() та max() :

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

Як використовувати функцію clamp() у CSS

Функція clamp скріпляє значення між максимальним й мінімальним лімітом та обирає значення між ними.

clamp приймає три значення. Перше значення є мінімальним, друге — переважним, а третє — максимальним.

Функція clamp поверне переважне значення, якщо воно не менше за мінімальне (у такому разі вона поверне мінімальне). Якщо переважне значення більше за максимальне — функція поверне максимальне.

Використовуйте clamp , щоб елементи макету адаптовано змінювали розмір у межах діапазону.

Приклад clamp :

Перегляньте це в дії! Змініть розмір горизонтально. Ви побачите, як різні елементи змінюють розміри.

MDN має детальнішу інформацію щодо цих функцій:

Ви коротко дізнались про чотири чудові функції. Цих знань достатньо, щоб почати використовувати їх, тому до роботи!