Одиниці вимірювання в CSS

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

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

Дехто із вас, певно, захоче сказати «десять пікселів». І така розмірність дійсно інсує. Але це лише один спосіб вимірювання. Є багато інших.

Яких саме — розповідаємо в цій статті.

Абсолютні та відносні одиниці

Але перш ніж познайомитись безпосередньо з одиницями вимірювання, варто зазначити, що всі вони поділяються на два типи: абсолютні одиниці вимірювання і відносні.

Абсолютні одиниці вимірювання мають сталу розмірність. Якщо говорити простою мовою, вони завжди мають той самий розмір. Це сантиметри, міліметри, дюйми та пікселі. І сантиметр завжди сантиметр, а десять сантиметрів — завжди десять сантиметрів. Якщо ви напишете в стилі «ширина елементу має бути 10 пікселів» (або ж “width: 10px;”), то отримаєте ширину 10 пікселів відповідно. Передбачуваний, конкретний результат.

А от з відносними одиницями, все трохи складніше. Їх, наприклад, можна описувати за допомогою відсотків. І якщо ви напишете «ширина елементу має бути 10 відсотків» (“width: 10%;”), то який конкретно розмір ви отримаєте? Правильна відповідь: «залежить від того, відносно чого вимірюються ці 10 відсотків». Тому такі одиниці і називаються відносними.

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

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

Абсолютні одиниці вимірювання

Пікселі (px) — найпоширеніша одиниця вимірювання в сучасному CSS. Один піксель в CSS відповідає одному пікселю на екрані вашого пристрою. Точніше, так це працювало раніше. А після появи екранів високої роздільної здатності в сучасних смартфонах або ультрабуках, принцип обчислення трохи змінився. Ви, певно, помітили, що зображення на сучасних смартфонах набагато чіткіші. Так відбувається тому, що вони здатні відображати в межах квадратного дюйма набагато більше пікселів, ніж в старих смартфонів. В одному пікселі можуть уміститися чотири, дев’ять чи навіть шістнадцять пікселів. Але зараз в світі є купа екранів з різною щільністю фізичних пікселів, тому в CSS описуються не реальні, а умовні пікселі. На екранах з низькою щільністю їхній розмір виходить приблизно один до одного, а на екранах з підвищеною щільністю один піксель в CSS може відповідати кільком (чотирьом, дев’яти, шістнадцяти) фактичним пікселям екрана. До того ж, існують принтери, які взагалі не використовують пікселі, але якось мають друкувати вебсторінки. Для таких випадків використовується формула 1 піксель = 1/96 дюйма.

Сантиметри (cm) та міліметри (mm) — це одиниці вимірювання, які зручно застосовувати під час роботи з таблицями стилів для друкованих матеріалів. У випадку застосування для екранів, 1 сантиметр = 96 пікселів / 2.54, а 1 міліметр, відповідно, 1/10 сантиметра.

Дюйми (in) — одиниця вимірювання, поширена на теренах США. 1 дюйм = 2.54 сантиметра, а у випадку екранів — 96 пікселів.

Пункти (pt) — 1/72 дюйма.

Піки (pc) — одна шоста дюйма або 12 пунктів.

Відносні одиниці вимірювання

Ем (em) — одиниця вимірювання, що дозволяє задавати розміри у співвідношенні до розмірів шрифту. 1 ем відповідає поточному розміру шрифта. У випадку застосування одиниці вимірювання у властивості font-size, використовується наслідуваний розмір шрифта. Таким чином, font-size: 0.5em установить розмір шрифта вдвічі менший за наслідуваний.

Рем (rem) — одиниця вимірювання, аналогічна до емів, але в якості вихідної величини використовує розмір шрифту не поточного, а корінного елемента — тобто <html>. Не рекомендується застосовувати для задання розмірів шрифту на самому корінному елементі, так як в такому випадку в якості вихідного значення буде використаний розмір шрифта браузера за замовчуванням, який може бути різним для різних браузерів.

Відсотки (%) — дозволяє задавати розміри в частках від іншої величини. Яка саме вихідна величина використовується — залежить від властивості. Наприклад, у випадку властивості font-size наслідується розмір шрифта. Це означає, що для властивості font-size 100% = 1em. Для описання розмірів в якості вихідної величини можуть використовуватися ширина сторінки або певного елемента. Але зверніть увагу, що не всі властивості, що мають значення з одиницями вимірювання, дозволяють задавати значення у відсотках.

ch (читається як «сі-ейч», від англійського «character» — «літера», «символ») — одиниця вимірювання, що в якості вихідної величини використовує ширину або висоту цифри 0, в залежності від напрямку написання тексту. Так, для традиційних для нас горизонтальних мов написання текстів використовується ширина, натомість для деяких східних мов буде використана висота. У випадках, коли розміри цифри неможливо чи непрактично рахувати, використовуються значення 0.5em і 1em для ширини і висоти відповідно.

ex (читається «екс») — одиниця вимірювання, що в якості вихідної величини використовує висоту латинської літери x. В більшості випадків, відповідає висоті рядкових літер шрифту.

vw (читається як «ві-дабл’ю», від англійського «viewport width» — «ширина вікна перегляду») — одиниця вимірювання, що дозволяє задавати розміри відносно ширини вікна браузера користувача. 1vw це 1% від ширини вікна. Якщо ширина вікна 1200 пікселів, то 1vw буде дорівнювати 12 пікселям, 10vw — 120 пікселям, а 100vw — повній ширині у 1200 пікселів.

vh (читається як «ві-ейч», від англійського «viewport height» — «висота вікна перегляду») — одиниця вимірювання, аналогічна до vw, але в якості вихідної величини використовується не ширина, а висота вікна браузера.

vmin (читається «ві-мін», від англійського «viewport minimum» — «мінімум вікна перегляду») — одиниця вимірювання, яка в якості вихідної величини використовує менший з вимірів вікна браузера. У випадках, коли ширина більша за висоту, ця одиниця вимірювання буде аналогічною до vh, а в інших випадках — до vw.

vmax (читається «ві-макс», від англійського «viewport maximum» — «максимум вікна перегляду») — аналогічна до vmin, але використовує не менший, а більший з двох вимірів.

На завершення

Одиниці вимірювання відіграють важливу роль в каскадних таблицях, тому їх треба знати і розуміти.

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

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