6.1 calc() funksiyasının əsas imkanları
calc() funksiyası CSS-də riyazi əməliyyatlar yerinə yetirmək imkanı verir, bu isə daha çevik və uyğunlaşa bilən üslublar yaratmağa imkan tanıyır. Bu funksiya müxtəlif ölçü vahidlərinin birləşdirilməsi və ölçülərin, boşluqların, sərhədlərin və digər xassələrin dinamik hesablanması kimi əməliyyatlarda xüsusilə faydalıdır.
calc() funksiyası dörd əsas riyazi əməliyyat yerinə yetirməyə imkan verir: toplama, çıxma, vurma və bölmə. Bu əməliyyatlardan müxtəlif ölçü vahidlərini birləşdirmək üçün istifadə etmək olar (piksel, faiz, em, rem və s.), bu isə uyğunlaşa bilən və dinamik üslubların yaradılmasını asanlaşdırır.
Sintaksis:
seçici {
xassə: calc(ifadə);
}
Əməliyyat nümunələri
- Toplama:
calc(100% + 20px) - Çıxma:
calc(50% - 10px) - Vurma:
calc(10px * 2) - Bölmə:
calc(100px / 2)
Nümunə:
<div>
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
div {
width: calc(100% - 50px);
margin: calc(1em + 10px);
background: lightblue;
}
Bu nümunədə:
- Elementin eni
100%minus50pxolaraq hesablanır - Boşluq
1emvə10pxtoplamı kimi hesablanır
6.2 calc() funksiyasından istifadə nümunələri
1. Toplama və çıxma
calc() funksiyası tez-tez dəyərləri toplamaq və ya çıxmaq üçün istifadə olunur, bu isə elementlərin ölçüsü və boşluqlarını daha dəqiq idarə etməyə imkan verir.
Nümunə 1: Faiz və piksel toplaması
Bu nümunədə konteynerin eni valideyn elementinin 100% enindən 40 piksel çıxmaqla hesablanır. Bu, konteynerin daxilindəki boşluq və digər elementləri nəzərə almağa imkan yaradır:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
width: calc(100% - 40px);
margin: 20px;
background: lightgreen;
}
Nümunə 2: Sabit dəyərin çıxılması
Bu nümunədə yan panelin eni valideyn elementin 100% enindən 250 piksel çıxılmaqla hesablanır, bu isə əsas məzmun üçün yer ayırmağa imkan verir:
<div class="sidebar">
<ul>
<li><a href="#"></a>Məqalə 1</li>
<li><a href="#"></a>Məqalə 2</li>
<li><a href="#"></a>Məqalə 3</li>
</ul>
</div>
.sidebar {
width: calc(100% - 250px);
background: tomato;
}
2. Vurma və bölmə
calc() funksiyası həmçinin vurma və bölmə əməliyyatlarını da yerinə yetirməyə imkan verir, bu isə proporsional ölçü və boşluqlar yaratmaq üçün çox faydalıdır.
Nümunə 3: Vurma
Bu nümunədə elementin hündürlüyü 20 pikselin 3-ə vurulması ilə hesablanır, bu isə 60 piksel edir:
<div class="element">Element</div>
.element {
height: calc(20px * 3);
background: lightpink;
}
Nümunə 4: Bölmə
Bu nümunədə blokun eni valideyn elementinin eninin üçdə biri kimi hesablanır, bu isə üç bərabər sütun yaratmağa imkan verir:
<div class="box">
Box
</div>
.box {
width: calc(100% / 3);
background: yellow;
}
6.3 Müxtəlif ölçü vahidlərinin birləşdirilməsi
calc() funksiyasının əsas üstünlüklərindən biri müxtəlif ölçü vahidlərini birləşdirmək imkanının olmasıdır, bu da adaptiv və çevik stillər yaratmağa imkan verir.
Nümunə 5: Faizlər və piksellərin birləşdirilməsi
Bu nümunədə başlığın hündürlüyü baxış sahəsinin (viewport height) 100% hündürlüyü - 50 piksel kimi hesablanır, bu da sabit boşluğu nəzərə almağa imkan verir.
<header class="header">
<nav>
<ul>
<li>Baş Səhifə</li>
<li>Haqqımızda</li>
<li>Əlaqə</li>
</ul>
</nav>
</header>
.header {
height: calc(100vh - 100px);
background: lightgreen;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 10px;
}
Dinamik ölçülərin hesablanması
calc() funksiyası elementlərin ölçülərinin dinamik şəkildə hesablanması üçün faydalıdır, bu da dizaynı daha adaptiv və çevik edir.
Nümunə 6: Genişliyin dinamik hesablanması
Bu nümunədə kontentin eni valideyn elementin 100% enindən hər iki tərəfdəki 20 piksellik cəmi iki dəfə çıxmaqla hesablanır:
<div class="content">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.content {
width: calc(100% - 2 * 20px);
background: lightgreen;
}
6.4 calc()-dan media sorğularında istifadə
calc() funksiyası media sorğuları daxilində adaptiv stillər yaratmaq üçün istifadə edilə bilər.
Nümunə 7: Media sorğularında adaptiv boşluqlar
Bu nümunədə konteynerin boşluqları baxış pəncərəsinin eni nəzərə alınaraq artır ki, minimum eni 600 piksel olsun:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
padding: 10px;
background: tomato;
}
@media (min-width: 600px) {
.container {
padding: calc(10px + 2vw);
}
}
Nümunə 8: Media sorğularında adaptiv ölçülər
Bu nümunədə konteynerin boşluqları 600 pikselədək genişliyə malik ekranlarda iki dəfə azalır ki, bu da dizaynın adaptivliyini yaxşılaşdırır:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
:root {
--main-padding: 20px;
}
.container {
padding: var(--main-padding);
background: yellow;
}
@media (max-width: 600px) {
.container {
padding: calc(var(--main-padding) / 2);
}
}
6.5 Üstünlüklər və mənfi cəhətlər
calc() funksiyasının üstünlükləri:
1. Esneklik. calc() funksiyası müxtəlif ölçü vahidlərini birləşdirərək və riyazi əməliyyatlar həyata keçirərək daha esnek və uyğunlaşa bilən dizaynlar yaratmağa imkan verir.
2. Stillərin dinamik idarə olunması. calc() ilə elementlərin ölçülərini və boşluqlarını dinamik olaraq dəyişmək mümkündür, bu da dizaynı daha reaksiya verən və uyğunlaşa bilən edir.
3. Çətin hesablamaların sadələşdirilməsi. calc() funksiyası birbaşa CSS-də çətin hesablamaları sadələşdirir, bu da sadə riyazi əməliyyatlar üçün JavaScript istifadəsinə ehtiyacı aradan qaldırır.
calc() funksiyasının məhdudiyyətləri və xüsusiyyətləri:
1. Operatorların ətrafında boşluqlar. calc() ifadələrində operatorların ətrafında mütləq boşluqlar olmalıdır. Məsələn, calc(100% - 50px) düzgündür, amma calc(100%-50px) səhvə gətirib çıxarır.
2. Brauzer uyğunluğu. calc() funksiyası müasir brauzerlərin əksəriyyəti tərəfindən dəstəklənir, lakin köhnə versiyalar üçün uyğunluq yoxlanışı tələb oluna bilər.
3. Performans. calc() funksiyasının istifadəsi, xüsusilə çətin hesablamalar və ya dəyərlərin tez-tez dəyişməsi hallarında, səhifənin render vaxtını bir qədər artırmağa səbəb ola bilər.
GO TO FULL VERSION