Вчимося розуміти одиниці «em» у CSS
Зважаючи на поширену звичку серед розробників використовувати піксельні значення, нам здається, не всі розуміють справжнього призначення параметрів em, і того, як вони працюють у CSS.
Складаючи деякі посібники, нам так чи інакше доводилося стикатися з цими значеннями, тож сьогодні нам є що вам розповісти. Сподіваємося, що наш сьогоднішній посібник допоможе вам відсунути завісу, яка накрила таку зручну і продуману техніку, призначену для розробки веб-проектів.
У специфікації представлено просте пояснення параметру em:
Іншими словами, якщо у нас буде наступний код CSS:
Це означає, що 1em, встановлений у тому елементі або в будь-якому з його дочірніх елементах, дорівнюватиме 20 пікселів. Ось доказ.
Якщо ви використовуєте наступний код:
Це означає, що ширини та висота елемента (вказані тут як 4em x 4em) становитимуть 80px x 80px (20px * 4 = 80 px).
Ключом до запам'ятовування є призначення em та походження даного параметра. Дотримуючись матеріалів з Wikipedia:
Документація продовжена поясненням те, що, хоча назва спочатку і було засновано на ширині букви М, це вже немає значення. Оскільки на сьогоднішній день одиниця виміру em пов'язана з точковим розміром шрифту.
Використовуючи даний метод обчислення, у CSS-файлі немає точного визначення тому, що є таке em. Значення цієї одиниці залежить від того, як складено ваші каскадні таблиці стилів. Теоретично, якщо ви вказали значення довжини всіх елементів в одиниці вимірювання em, то зміни лише розміру шрифту буде достатньо, щоб «знищити» всю вашу точну до пікселя розмітку.
А що якщо я не використовую параметр font-size?
У прикладі, наведеному вище, і JSBin, на який ми послалися, точно вказано параметр font-size. Одиниця em згодом виводиться із параметра «base». Але якщо в елементі не вказано точний параметр font-size?
У такому випадку, оскільки параметр font-size успадковується по всьому дереву документа, значення одиниці em буде виведено з параметра, який був успадкований. Якщо у всьому документі жодного разу не згадується параметр font-size, то значення окремої одиниці em дорівнюватиме 16 пікселям, що є значенням за замовчуванням (і нам здається, що це не відрізняється у всіх браузерах).
«rem» має бути автоматичним для людей
Настав час залучити і нове додавання CSS: одиницю rem . Ця одиниця (назва отримана від root em) відмінно підтримується у всіх браузерах: IE9+, FF3.6+, Chrome, Safari 5+ і Opera 11.6+.
Загалом дана одиниця дуже проста до розуміння. Вона дає можливість зробити так, щоб значення одиниць em у всьому HTML-документі були засновані на одному «головному» значенні, вказаному в «html»-елементі. Таким чином, ви можете забути про параметр font-size, тому що всі em-одиниці, використані в документі, будуть ґрунтуватися на головному значенні rem, наприклад:
І, як і у випадку з em, якщо ви не вказуєте значення font-size в «html»-елементі, то «головна» одиниця (root em) дорівнюватиме 16 пікселів за замовчуванням.
Можна вигадати ще цілу купу виразів з em:)
Пропрацювавши в розробці веб-сайтів багато років, ми можемо відмовитися від фіксованих значень ширини. Хоча багато хто вже перейшов на розробку адаптивних дизайнів, все, як і раніше, час від часу використовують піксельні значення. Хоча цього може бути достатньо для елементів шаблону, нам здається, що саметипографіку варто повністю перекладати значення em.
Незважаючи на те, що ми можемо створити цілий шаблон з використанням одиниць em, нам здається, що в адаптивних шаблонах все одно краще використовувати піксельні значення та відсоткове співвідношення і, як було зазначено, для друкарні використовувати em.
Отже, сподіваємося, вам сподобалося наше сьогоднішнє керівництво, і ви знайдете застосування здобутих знань.