CSS від А до Я: переваги одиниць вимірювання rem і em

1

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з одиницями вимірювання rem і em.

R значить rem і em

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

Форми, валідація та стилізація станів – дуже великі теми, і в перший раз ми вже досить багато дізналися про псевдоклас :required. Тому давайте в цей раз розберемо кілька корисних порад по роботі з одиницями вимірювання rem. Однак спочатку давайте розглянемо інші відносні одиниці вимірювання – em.

Плюси і мінуси одиниць вимірювання em

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

Такі одиниці вимірювання дозволяють створювати систему пропорцій, в якій зміна значення властивості font-size на одному елементі каскадно впливає на всі дочірні елементи. Система пропорцій, звичайно, добре, але в одиницях виміру em є і недоліки. Розберемо невеликий шматок HTML коду:

  • lorem ipsum
  • dolor sit
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum

Такий вкладений список не найпопулярніша річ, але щось схоже можна зустріти на сторінках умов та положень або інших офіційних документах. Якщо ми захочемо виділити елементи списку, ми можемо збільшити їх font-size в 1.5 рази по відношенню до базового розміру шрифту в 16px.

li {
font-size: 1.5 em; /* 24px/16px */
}

В такому випадку виникне проблема. Вкладені li теж збільшаться в 1,5 рази, так як вони теж є дочірніми елементами. Вкладені елементи списку будуть збільшені в 1.5 рази від 24px, а не від 16px. В результаті з кожним рівнем вкладеності елементи списку будуть рости по експоненті. Дизайнер, швидше за все, не хотів цього!

Схожа проблема виникає з вкладеними елементами і значенням em менше 1. В такому випадку з кожним рівнем вкладеності елементи списку будуть зменшуватися по инкременту. Що ж можна зробити?

Задавайте розмір тексту через одиниці виміру rem

Замість можливого ризику постійного збільшення або зменшення властивості font-size можна скористатися іншими одиницями виміру.

Можна було б взяти звичайні пікселі, проте відносні одиниці вимірювання набагато більш гнучкі, як вже говорилося раніше. Замість цього ми можемо взяти одиниці виміру rem, які обчислюються за властивістю font-size кореневого елемента. Зазвичай кореневим елементом на сайті або веб-додатку є тег html. В .svg і .xml документах кореневий елемент може відрізнятися, але це не тема нашої сьогоднішньої статті.

Якщо ми будемо ставити font-size з допомогою rem одиниць, це не означає, що потрібно повністю відмовитися від em. Я, як правило, використовую em одиниці для padding’ов, так як відступи завжди обчислюються щодо розміру тексту.

Використовуйте Sass для підтримки rem у браузерах

Одиниці виміру rem підтримуються тільки в IE9 і вище. Якщо є необхідність у підтримці IE8 і нижче, можна скористатися JS полілфілом або прописати фолбэк в пікселях:

li {
font-size: 24px;
font-size: 1.5 rem;
}

Якщо ви використовуєте Sass, то можна створити міксин і функцію для обчислення потрібного розміру в rem одиницях і автоматичного створення фолбэка.

@function rem-calc($font-size, $base-font-size: 16) {
@return ($size/$base-font-size) *1rem;
}
@mixin rem-with-px-fallback($size, $property:font-size) {
#{$property}: $size * 1px;
#{$property}: rem-calc($size);
}
li {
@include rem-with-px-fallback(24);
}

От і все. Пара порад по роботі з rem одиницями вимірювання. Якщо ви не використовуєте їх у своїх поточних проектах, настійно рекомендую спробувати.