Единици за размери в CSS – rem [част 1️⃣ ]

В тази поредица от този уроци на {dev} blondie; искам да ти разкажа и покажа за видовете размери в CSS и как и кога да ги използваме. Започвам поредицата с първият урок, посветен на rem.

Какво е rem?

Rem е съкращение на root-em – единица, която е релативна на размера на шрифта на root елемента ( html документа). Казано на по-прост език – ако приемем, че зададеният размер на шрифта на цялата уеб страница (или на целият уеб сайт) е 16px, то един rem ще е равен на 16px, 2rem ще са 32px и т.н. Не се притеснявай, ако ти звучи абстрактно от сега, до края на урока ще ти стане съвсем ясно.

Точното определение, зададено от W3C звучи по този начин:

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

Rem единицата може да бъде използвана за задаване размер на текст, за вътрешни и външни отстояния (margin & padding) и за подаване на ширина. В примера по-долу сме задали размер на p елемента от 1.5rem (което би било 24px, ако приемем, че базата на html документа е 16px) и външно отстояние отдолу (margin-bottom) от 2rem (32px):

p { 
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

Защо да използваме rem?

Като начало е добре да осъзнаем концепцията на размерите в CSS, а именно:

• абсолютни (absolute)
• релативни (relative)

Какво означава това? Абсолютните подадените размери ще носят стойността си без значение от големината на устройството, от което уеб сайта се разглежда. Например, ако имаме заглавие с подаден размер 42px, то това заглавие ще е 42px както на десктоп, така и на лаптоп, така и на смартфон. А за последното уствойство 42px заемат значителна големина от екрана.

За разлика от абсолютните размери (казано на жаргонен език – забити), релативните ни дават възможност да променяме стойността им спрямо ширината на уствойството, на което се разглежда уеб сайта. Така ако тези 42px са подадени в rem, на смартфон размерът, който ще се калкулира ще е под 20px.

Как да зададем base размер на html документа?

За да се възползваме от гъвкавостта, която rem ни дава, е необходимо да подадем базов размер на основният елемент – html документа.

:root {
    font-size: 16px; /* recommended */
}

В примерният код snippet горе размерът на root елемента е зададен на 16px. Това означава, че всички останали размери, които се задават за други елементи, използвайки rem, ще бъдат релативни спрямо тази стойност.

Тук е важно да запомним, че ако в даден момент решим да променим базовия размер, например от 16px на 18px, то това ще рефлектира на всички места, на които сме подавали размер в rem единица.

Но е малко объркващо, не мислиш ли?

Представи си, че имаш три основни разбера на текстове – 14, 18 и 20 пиксела. Конвертирани в rem ще изглеждат като:

• 14px = 0.875rem
• 18px = 1.125rem
• 20px = 1.125rem

Тези стойности не са съвсем лесни за запомняне и със сигурност не е трудно да объркаш. Затова и на помощ идва един малък хак, измислен от Хари Робинс (повече в тази статия). Как изглежда този хак? С магическата стойност от 62.5% зададени за font-size на целият html документ ще постигнем размер на текста от 10px, а с 10 е много по-лесно:

html { font-size: 62.5%; } /* =10px */

По този начин примера със стойностите по-горе вече ще изглежда така:

• 14px = 1.4rem
• 18px = 1.8rem
• 20px = 2rem

Доста по-удобно, нали?

Използване на rem в media query-та?

Повече за това какво представляват media query-тата в CSS може да научиш от тази статия, но с една дума и тук – това е свойство на CSS, което ни позволява да имаме различни break points, посредством които да задаваме различни стойности на свойства, отнасящи се до html елементи.

А сега, нека разгледаме как би изглеждала употребата на rem в media query:

@media (min-width: 70rem) {
	/* CSS code here */
}

И ако сега на база на всичко казано по-горе си мислиш: окей, това media query би се превело като „всичко над 700px“ (ако вземем магическото число, което подадохме на html елемента и което ни осугурява, че 1rem = 10px). Да, ама не 😀

Ако разгледаме този пример, даден от Sam Smith, ще видим проблемът съвсем ясно:

html {
	font-size: 10px;
}
@media (min-width: 50rem) {
	/* at browser width of 500px do this */
	/* browser width is 600px, let's do this */
	html {
		font-size: 20px;
		/* oh wait, rem value has changed, breakpoint is now 1000px */
		/* leave the font-size at 10px */
		/* oh in that case the breakpoint is 500px, let's do this */
		/* ok font-size changed to 20px, breakpoint is now 1000px */
		/* leave the font-size at 10px... */
	}
}

И сам виждаш, че задаването на rem стойност в media query прави правилото объркващо и навлизаш в един безкраен цикъл, от който в крайна сметка не е ясно какъв размер ще излезе накрая.

За какво да използваме rem?

Употребата на rem е чудесен начин да подсигуриш добро потребителско преживяване, независимо от устройството и размерът на view port-a, като най-честата употреба на тази единица за размер ще срещнеш при:

• задаване размер на текст – когато задаваме размери на шрифта, обикновено е добра идея да използваме rem единици. Това позволява размерът на шрифта да се мащабира с останалата част от сайта, което го прави по-отзивчив и адаптивен към различни размери на екрана.
• елементи с варираща ширина – ако работим над уеб сайт, който променя ширините на елементите си спрямо ширината на екранът, на който е отворен, то употребата на rem е отличен начин да подсигурим флуидност и отзивчиво поведение при всеки случай.
• достъпност (accessibility) – използването на rem единици може също да подобри достъпността за потребители, които разчитат на екранни четци или имат други зрителни увреждания. Това е така, защото размерът на шрифта може лесно да се увеличи или намали, без това да повлияе на оформлението на сайта.

Вместо заключение

В CSS няма една универсална единица за задаване на размер, с която да разрешим всичките си проблеми и да подсигурим добро потребителско преживяване без значение ширината на екрана. Затова и широките познания и умението за боравене с повече от една единица ти дава възможност да вземаш далновидни решения, базирани на желания краен резултат.

Това бе част 1 от поредицата за видовете размери в CSS. С останалите части ще опитам да разширя познанията ти и да ти дам възможност да експериментираш с тях.

Stay blond 😉