Флуидна типография със CSS clamp()

Започвам тази статия с … 2025-та сме! Какво значи това ли? Имаме стотици видове устройства и размери – най-разнообразни смартфони, сгъващи/разгъващи се устройства, таблети от всякакъв вид и форма, лаптопи с различни размери, банкомати, стационарни устройства… да продължавам ли? Може би вече се досещаш накъде бия. Точно така, с това разнообразие на хардуер имаме нужда от софтуер, който е адаптивен и отзивчив. А какво по-лошо от 72px font-size на устройство с резолюция 490px по ширина? (може би font-size: 16px; на устройство 4000+ пиксела ширина 😀 )

И ако до съвсем скоро сме разчитали на много описателни media query-та, с които да определим break points, при които да променяме размерът на даден текст, то днес имаме далеч по-съвременен, по-гъвкав и по-адаптивен метод.

Представям ти…

CSS clamp()

clamp() функцията е част от съвременния CSS и е широко използвана, но намира перфектно приложение най-вече за постигане на флуидна типография.

Приема три стойности, а ето и как изглежда (спокойно, ще обясня):

clamp(minimum, preferred, maximum);

Стойността, която тази функция връща, ще бъде предпочитаната стойност, до момента в който тя не стане по-малка от минималната или по-голяма от максималната, в тези два случая ще вземе другите стойности.

Показвам и по-описателен пример (в който съм използвала пиксели с илюстративна цел и по-добро разбиране):

p {
  font-size: clamp(16px, 1.5rem, 32px);
}

В този пример ще имаме стойността на 1.5rem до момента, до който тази стойност не се превърне в по-малко от 16px или пък в повече от 32px.

Казано на по-прост език…

Може да гледаш на clamp() като на средство за задаване на „златна среда“ – минимална (и фиксирана) стойност за най-малките устройства – смартфони, идеална и флуидна стойност за устройства като таблети и лаптопи, и максимална (и фиксирана) стойност за по-големи уствойства (смарт телевизори, 4к монитори).

Защо clamp, а не media query?

Използвайки media queries можем да задаваме специфични break points и на база на тях да подаваме конкретни размери на шрифта. Само че в реалния свят обикновено имаме 3 или 4 такива точки, да речем – за смартфон, за таблет, за лаптоп и за десктоп. Стойността на пикселите между една и друга точка може да е доста голяма, например – от 768px до 1440px за лаптоп. В този диапазон ще имаме, да речем, заглавие, което ще е винаги с един и същ размер. Not cool, right?

Тъкмо тук идва едно от най-големите преимущества на clapm(). Както вече видя, можем да запълним този диапазон с флуидна стойност, която ще се уголемява или смалява в зависимост от устройството.

Други предимства на clamp()

Освен, че можем значително да намалим броя на media query-тата си, с clamp():

• подсигуряваме достатъчно добра четимост при преоразмеряване и отваряне уеб сайта на каквото и да е у-во
• лесен е за научаване и прилагане, благодарение на опростения си синтаксис (минимална с-ст, идеална с-ст, максимална с-ст)

Какво е добре да знаем, преди да използваме clamp()?

Намирам clamp() за най-доброто средство що се отнася до флуидност на текстовете. Но все пак има и down sides, а ето и някои от тях:

• aко работиш с дизайн система, подадена от UX/UI екипа, помисли дали clamp() е правилният избор за постигане на консистентна типография. За определени случаи употребата на добрите „стари“ media query-та може да се окаже по-добър избор за поддържане на строг контрол. С други думи – clamp() е the best fit, когато имаш нужда от по-плавно мащабиране, но media query-тата могат да ти дадат по-предвидими резултати за силно контролирани среди (ако дизайнра каже „не, този текст трябва да е точно 40px на това у-во“ 😀 ).
• по отношение на уеб достъпността (виж повече какво представлява тук), clamp() може да не е най-добрият избор изхождайки от това, че ако използваме пиксели, при промяна на настройките на браузъра от страна на потребителя, реална промяна в големината на текста няма да се отрази

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

С всяка изминала година CSS се превръща във все по-могъща технология, посредством която можем да обезпечаваме отличен UX/UI на всякакъв тип устройства. Първо бяха media query-тата, после container query-тата, а сега вече поддържаме и динамично изчисление на размера на шрифта. clamp() може да бъде от огромна полза, особено когато знаем как да го използваме.