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:


✅ 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 hadi 2rem, 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() na var() 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

  1. Kazi ya calc() ni ipi?
    a) Kuongeza opacity
    b) Kufanya hesabu kwenye vipimo
    c) Kuweka rangi
    d) Kuunda animation

  2. 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

  3. Kipi kinaweza kuchukua thamani ya CSS Variable?
    a) calc()
    b) min()
    c) var()
    d) font-family

  4. 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%

  5. Je, unaweza kutengeneza custom logic katika CSS kwa kutumia:
    a) JavaScript tu
    b) @media pekee
    c) var() + calc()
    d) animation-name


 

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 287

Share On:

Facebook WhatsApp
Sponsored links
👉1 Tafasiri ya Riyadh Swalihina    👉2 Bongolite - Game zone - Play free game    👉3 web hosting    👉4 Kitau cha Fiqh    👉5 Simulizi za Hadithi Audio    👉6 Kitabu cha Afya   

Post zinazofanana:

CSS - SOMO LA 28: CSS Timing Functions

Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.

Soma Zaidi...
CSS - somo la 1: Maana ya CSS, kazi zake na historia yake

Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.

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 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...
CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

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...
CSS - SOMO LA 22: CSS Transition na Animation

Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.

Soma Zaidi...
CSS - SOMO LA 13: Display Property

Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.

Soma Zaidi...
CSS - SOMO LA 25: CSS Shorthand Properties

Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.

Soma Zaidi...
CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements

Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.

Soma Zaidi...