5.1 calc() funksiyası
CSS-funksiyalar stil fayllarında müxtəlif əməliyyatları birbaşa həyata keçirmək üçün effektiv alətlər təqdim edir. calc(), min(), max() və clamp() funksiyaları daha çox adaptiv və çevik dizaynlar yaratmaq üçün faydalıdır, çünki onlar riyazi əməliyyatlar və şərti dəyərləri hesablamağa imkan verir.
calc() funksiyası CSS-də riyazi əməliyyatlar yerinə yetirmək üçün istifadə olunur. Bu funksiya fərqli ölçü vahidlərini, məsələn pikselləri (px), faizləri (%), em, rem və başqalarını bir ifadədə birləşdirməyə imkan verir.
Sintaksis:
selektor {
xassə: calc(ifadə);
}
İstifadə nümunəsi
Bu nümunədə blokun eni, valideyn elementin eninin 50%-i minus 20 piksel kimi hesablanır:
/* Blokun eni - valideyn elementin yarısı minus 20px */
.block {
width: calc(50% - 20px);
}
5.2 min(), max() və clamp() funksiyaları
CSS-də min(), max() və clamp() funksiyaları
min() funksiyası
min() funksiyası bir neçə dəyəri qəbul edir və onlardan ən kiçiyini qaytarır. Kontekstdən asılı olaraq dəyişən elastik ölçülər yaratmaq üçün faydalıdır.
Sintaksis:
selektor {
xüsusiyyət: min(dəyər1, dəyər2);
}
Nümunə
Bu nümunədə konteynerin eni 50% və ya 300 piksel olacaq, hansının kiçik olduğuna əsasən:
.container {
width: min(50%, 300px);
}
max() funksiyası
max() funksiyası bir neçə dəyəri qəbul edir və onlardan ən böyüyünü qaytarır. Minimum ölçülərin təyin olunması və adaptivlik üçün faydalıdır.
clamp() funksiyası
clamp() funksiyası üç dəyəri qəbul edir: minimum, üstünlük verilən (ideal) və maksimum. Dəyəri minimum və maksimum arasında məhdudlaşdırır, üstünlük verilən dəyərə yaxınlaşır.
5.3 CSS-funksiyalarının üstünlükləri
CSS-funksiyalarının üstünlükləri:
- Elastiklik. CSS-funksiyalar daha elastik və uyğunlaşa bilən tərzlər yaratmağa imkan verir, çünki dəyərləri dinamik şəkildə hesablayır.
- Uyğunlaşan dizaynı sadələşdirmək.
min(),max()vəclamp()funksiyaları müəyyən hədlərlə dəyərləri məhdudlaşdırmağa imkan verərək uyğunlaşan dizaynların yaradılmasını əhəmiyyətli dərəcədə sadələşdirir. - Media-sorğulara ehtiyacın azalması. Bu funksiyaların istifadəsi tərzlərin fərqli ekran ölçülərinə uyğunlaşdırılması üçün lazım olan media-sorğuların sayını azalda bilər.
5.4 Tam tətbiqin nümunəsi
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-funksiyaların istifadəsi nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">width calc(50% - 20px) olan blok</div>
<div class="block">width min(300px, 100%) olan blok</div>
<div class="block">width max(200px, 50%) olan blok</div>
<p class="text">font-size clamp(12px, 2vw, 24px) olan mətn</p>
</div>
</body>
</html>
GO TO FULL VERSION