CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
📘 Utangulizi
CSS functions ni kama “tools” maalum zinazoruhusu utendaji wa kisasa zaidi ndani ya styles zako. Kwa kutumia functions hizi, unaweza kufanya mahesabu, kuingiza thamani kutoka kwenye variables, kudhibiti ukubwa kulingana na mazingira ya kifaa, na zaidi — yote haya bila JavaScript.
✅ 1. calc() – Mahesabu ya moja kwa moja
Function ya calc() hutumika kufanya hesabu ya vipimo vya CSS.
🔹 Syntax:
width: calc(100% - 50px);
🔹 Mfano kamili:
.container {
width: calc(100% - 2rem);
padding: 1rem;
}
Unaruhusiwa kutumia:
-
+,-,*,/ -
Thamani zenye aina tofauti (%, px, rem)
✅ 2. clamp() – Kuweka kima cha chini, cha kati, na cha juu
clamp() hutumika kuweka thamani inayobadilika kati ya kiwango cha chini na cha juu kulingana na ukubwa wa skrini.
🔹 Syntax:
font-size: clamp(1rem, 2vw, 2rem);
Maana: font haitashuka chini ya
1rem, itakua hadi2rem, ikifuata 2% ya viewport width (2vw)
✅ 3. var() – Kutumia CSS Variables
var() hutumika kuchukua thamani kutoka kwenye CSS variable (--custom-property)
🔹 Mfano:
:root {
--main-color: #3498db;
}
.button {
background-color: var(--main-color);
}
Hii huruhusu reuse ya rangi, padding, margin, n.k. kwa urahisi.
✅ 4. min() – Kuchukua thamani ndogo
Hufanya kazi kama ilivyo kwenye hesabu: huchagua thamani ndogo zaidi kati ya zinazotolewa.
🔹 Mfano:
width: min(80%, 400px);
Kipengele kitakuwa na width ya 80% ya mzazi au px 400 — chochote kilicho kidogo.
✅ 5. max() – Kuchukua thamani kubwa
Hufanya kazi kinyume na min() — huchagua thamani kubwa zaidi.
🔹 Mfano:
width: max(300px, 50%);
Hapa, kipengele kitaepuka kuwa kidogo sana — kitaanza kwenye 300px au 50%, yoyote iliyo kubwa.
✅ 6. Jinsi ya Kutengeneza Custom Function (kwa kutumia variables)
Ingawa CSS haina functions halisi kama JavaScript, unaweza kuunda reusable behavior kwa kutumia var() na combining functions:
🔹 Mfano:
:root {
--spacing: 2rem;
--button-size: calc(var(--spacing) * 3);
}
.btn {
width: var(--button-size);
height: var(--spacing);
}
Kwa kutumia
calc()navar()pamoja, unaweza kutengeneza logic kama function.
✅ Hitimisho
Functions katika CSS hutoa nguvu ya kipekee kufanya styles zako ziwe flexible, dynamic, na rahisi kusimamia. Kutumia calc(), clamp(), var(), min(), na max() hukuwezesha kupunguza reliance kwa media queries au JavaScript. Ni njia bora ya kuandika CSS ya kisasa.
🔜 Somo Linalofuata: SOMO LA 31 – CSS Filters (blur, brightness, contrast, etc.)
Tutajifunza jinsi ya kutumia filters katika picha, backgrounds, na elementi nyingine kwa madhumuni ya kuifanya UI yako ionekane kisasa.
🧠 Maswali ya Kujitathmini
-
Kazi ya
calc()ni ipi?
a) Kuongeza opacity
b) Kufanya hesabu kwenye vipimo
c) Kuweka rangi
d) Kuunda animation -
clamp(1rem, 2vw, 3rem)ina maana gani?
a) Thamani ya font haitabadilika
b) Font itabaki 2rem tu
c) Font itakuwa kati ya 1rem hadi 3rem kulingana na screen
d) Font itapungua kila wakati -
Kipi kinaweza kuchukua thamani ya CSS Variable?
a)calc()
b)min()
c)var()
d)font-family -
min(500px, 80%)inamaanisha nini?
a) Chukua kubwa kati ya hizo
b) Chukua ndogo kati ya hizo
c) Weka margin 500px
d) Tumia opacity ya 80% -
Je, unaweza kutengeneza custom logic katika CSS kwa kutumia:
a) JavaScript tu
b)@mediapekee
c)var()+calc()
d)animation-name
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
👉1 kitabu cha Simulizi 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Kitabu cha Afya 👉4 Simulizi za Hadithi Audio 👉5 web hosting 👉6 Tafasiri ya Riyadh Swalihina
Post zinazofanana:
CSS - SOMO LA 18: Grid Layout
Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
Soma Zaidi...Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni
Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.
Soma Zaidi...CSS - SOMO LA 33: CSS Frameworks
Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...CSS - somo la 34: if() Condition katika CSS
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css
Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...Drone: Nyuki Dume na Majukumu Yake
Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.
Soma Zaidi...CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...CSS - SOMO LA 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...CSS - SOMO LA 29: CSS z-index na Stacking Context
Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
Soma Zaidi...CSS - SOMO LA 21: CSS Units
Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
Soma Zaidi...