email: delievabg@gmail.com
Преди няколко години, когато за първи път записах курс по HTML/CSS, лекторът препоръча един много як хак, с който да се промени цялостния размер на буквите, а и другите елементи в html документа, така че да се смята по-лесно в rem мерна единица, а именно:
html {
font-size: 62.5%;
}
Идеята зад този „трик“ е проста – да се направи така, че 1rem да бъде равен на 10px, вместо стандартните 16px. Това улеснява значително преобразуването на стойности от пиксели към rem.
Аз разбира се, веднага тествах този трик и всичко изглеждаше супер.
Но дали е добра практика? Наскоро се зачудих по този въпрос, след като попаднах на някои „недостатъци“, които front-end разработчици споделят във връзка с този хак. И се оказва, че все повече девелопъри са започнали да избягват този подход.
Преди да разгледаме, защо, обаче, нека обясня:
Как работи rem в CSS
В началото, в ранните версии на CSS (Cascading Style Sheet) – говорим за годините около 1996, когато е разработен, програмистите използвали предимно пиксели, проценти и em – като em е първата относителна единица за текст.
И всичко си е било наред, докато не започнали да се появяват сложни layout-и. Тогава използването на em се усложнило, тъй като em се изчислява спрямо родителският елемент.
Например, ако body font-size = 16px, div font-size, който се намира в body = 1.2em, а p font-size, който се намира в div-a = 1.2em, то се получава, че div = 19.2px, a p = 23.04px.
Тоест, размерите започват да се натрупват „каскадно“ като водопад, който пада от скала на скала в езеро.
Това води до няколко проблема.
- Трудно се предвижда крайният размер;
- Сложни layout-и стават трудни за контрол;
- Компонентите стават зависими един от друг.
С други думи, CSS започва да става много сложен.
И така, с течение на времето и обновяването на CSS и по-точно с появата на CSS3 се създава огромен набор от нови модули, целящи да подобрят езика. Един от тях е така наречения „CSS Values and Units Module Level 3“, където се появява rem. А името на тази единица идва от Root em. Разликата с em, обаче е, че rem = em спрямо root елемента html.
Основната идея е проста. Вместо да става натрупване като при em, размерът се изчислява спрямо коренния елемент на документа – html, който по подразбиране е 16px.
Така дори да имаме html font-size = 16px, div font-size = 2rem и p font-size = 1rem, това ще означава, че div-а = 32px, a p-то на 16px.
И така, да се върнем на темата с промяната на кореновия елемент.
Защо изобщо се появява този 62.5% hack?
Проблемът възниква, когато дизайнерски файлове (например във Figma или Photoshop) използват pixel стойности.
Например:
- 24px padding;
- 32px margin;
- 18px font-size;
Ако използваме стандартният размер на rem трябва да направим преобразуване от сорта:
- 24px -> 1.5rem;
- 32px -> 2rem;
- 18px -> 1.125rem;
За някои девелопъри, това са неудобни изчисления и затова се появява следният трик:
html {
font-size: 62.5%;
}
И тъй като тези проценти от 62.5% от 16px = 10px, резултатът е, че 1rem = 10px и така изчисленията стават по-лесни:
- 24px -> 2.4rem;
- 32px -> 3.2rem;
- 18px -> 1.8rem;
На пръв поглед това изглежда като удобно решение, но основният проблем е в достъпността.
Как 62.5%-товия хак поражда проблем с достъпността?
Основният проблем се появява заради това, че много хора променят базовия размер на браузъра си поради проблеми със зрението, използване на малки екрани или заради лични предпочитания за по-голям текст.
Така че, когато намалим базовия размер на HTML до 62.5%, на практика променяме начина, по който браузърът очаква да работи страницата.
Това може да доведе до по-малък текст от очакваното, неправилно мащабиране на интерфейса или пък нарушена достъпност на сайта.
А както знаем достъпността (accessibility) е сред най-важните принципи на съвременната уеб разработка.
Други проблеми могат да се появат при използване на външни библиотеки също, защото се предполага, че използват rem в стандартния размер от 16px, което може да доведе до неправилна визуализация.
Някои девелопъри пък изобщо не са чували за този хак, така че това може да породи неяснота в екипа.
Така, че се оказва, че този хак не е толкова добро решение.
Решението
Вместо това, повечето специалисти съветват да се използват други методи като css calc() например.
При използването на тази фунция, не е нужно rem-овете да се смятат „на ръка“. Достатъчно е да се въведе оригиналният размер в пиксели по следната формула – например:
p {
font-size: calc(24 / 16 * 1rem);
}
Тук ясно се вижда, че оригиналният размер в пиксели е 24, което за разработчиците дори е по-ясно, отколкото да се напише 1.5rem.
Обаче пак трябва да се внимава, защото натрупването на много calc() функции, може да доведе до по-бавно зареждане на страницата.
Така, че варианти много – въпрос на проучване е да се намери по-правилно решение за имплементация, в съответствие с добрите практики. За още полезна информация delieva.bg и/или ако искате да работите с мен – за връзка с мен.
