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.
📘 Utangulizi
Kwa muda mrefu, CSS haikuweza kuandika masharti (conditionals) kama if au else. Ili kubadili mtindo wa ukurasa kutegemea na mazingira ya kifaa au hali ya elementi, tulilazimika kutumia:
-
Media queries
-
Classes
-
JavaScript
Sasa kwa kutumia if() function, tunaweza kuweka masharti moja kwa moja kwenye property ya CSS, mfano: color, width, background, n.k. Hii inaondoa redundancy na kufanya code iwe safi zaidi.
✅ 1. Muundo wa if() Function
property: if(
condition-1: value-1;
condition-2: value-2;
...
else: fallback-value
);
-
Unaweza kutumia media(), supports(), style()
-
Unaweza kuandika else: kwa fallback kama masharti hayajatimia
✅ 2. Aina Tatu za Condition Zinazotumika
| Aina ya Condition | Maelezo | Mfano |
|---|---|---|
media() |
Inatumia media query | media(min-width: 600px) |
supports() |
Inachunguza kama browser inasapoti feature | supports(backdrop-filter: blur(10px)) |
style() |
Inachunguza thamani ya custom property au attribute | style(--status: success) |
✅ 3. Mifano ya Uhalisia
💡 A. Kuweka Button Size Kutegemea na Aina ya Pointer
button {
width: if(media(any-pointer: fine): 30px; else: 44px);
aspect-ratio: 1;
}
🔸 Maana:
-
Kwenye mouse au stylus: button ni ndogo
-
Kwenye touchscreen (vidole): button ni kubwa
💡 B. Kuweka Theme Kulingana na Dark/Light Mode
body {
background: if(media(prefers-color-scheme: dark): #111; else: #fff);
color: if(media(prefers-color-scheme: dark): #eee; else: #111);
}
🔸 Hii huongeza usability kwa watumiaji wanaopenda dark mode.
💡 C. Kuonyesha Background Color ya Kisasa (OKLCH) ikiwa Inasapotiwa
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00aaff
);
}
💡 D. Kuonyesha Ujumbe wa Support Kutumia ::after
body::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "Browser yako inasapoti OKLCH";
else: "Browser yako haijasapoti OKLCH"
);
}
💡 E. Kubadili Muonekano wa Kadi Kulingana na Status
HTML:
<div class="card" data-status="complete">Kazi imekamilika</div>
CSS:
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): orange;
style(--status: complete): seagreen;
else: gray
);
background-color: if(
style(--status: pending): #fff5cc;
style(--status: complete): #f0fff0;
else: #f7f7f7
);
}
💡 F. Kubadili Font Size kwa Touchscreen
button {
font-size: if(media(any-pointer: coarse): 1.3rem; else: 1rem);
}
📌 Kipengele Maalum: Ufafanuzi wa pointer na any-pointer
✅ 1. pointer
Huchunguza aina ya kifaa kikuu cha kuingiza (primary input).
@media (pointer: fine) { } /* mouse/stylus */
@media (pointer: coarse) { } /* touchscreen ya vidole */
@media (pointer: none) { } /* hakuna pointer: TV, sauti */
✅ 2. any-pointer
Huchunguza aina yoyote ya pointer (hata ikiwa sio ya msingi).
@media (any-pointer: coarse) {
/* kifaa chochote kilicho na touchscreen */
}
📊 Jedwali la Tofauti
| Kipimo | pointer | any-pointer |
|---|---|---|
| Huangalia | Pointer kuu tu | Pointer yoyote kwenye kifaa |
| Mfano | Laptop yenye mouse | Laptop yenye mouse + touchscreen |
| Matumizi bora | Media ya msingi | Fallback ya vifaa vingi |
✅ Hitimisho
if() function ni kipengele cha kisasa kinachofanya CSS kuwa na nguvu zaidi, kwa kuruhusu kuandika masharti moja kwa moja kwenye property. Ukiunganisha na media queries kama pointer na any-pointer, unaweza kubuni tovuti zenye uwezo wa kujibadilisha kwa mazingira ya kifaa kwa usahihi zaidi na kwa mtindo safi.
🔜 Somo Linalofuata:
SOMO LA 35: CSS Custom Functions (@function) – Jinsi ya Kutengeneza Function Zako za CSS
🧠Maswali ya Kujitathmini
-
Ni aina gani ya condition haipo kwenye
if()function?
a) media()
b) supports()
c) style()
d) event() -
pointer: coarseinamaanisha nini?
a) Hakuna pointer
b) Touchscreen yenye stylus
c) Touchscreen ya vidole
d) Mouse -
any-pointer: fineinamaanisha nini?
a) Pointer kuu ni mouse
b) Kuna aina yoyote ya pointer ya usahihi mkubwa
c) Hakuna pointer
d) Screen ni kubwa -
style(--status: pending)hutumika kwa kazi gani?
a) Kuchunguza class
b) Kuchunguza property ya script
c) Kuchunguza thamani ya custom property
d) Kuchunguza screen size -
Faida kuu ya
if()function ni ipi?
a) Hupunguza JavaScript
b) Huongeza SEO
c) Huondoa media queries zote
d) Huongeza padding
Umeionaje Makala hii.. ?
👉1 kitabu cha Simulizi 👉2 Bongolite - Game zone - Play free game 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 Dua za Mitume na Manabii 👉5 Simulizi za Hadithi Audio 👉6 Kitabu cha Afya
Post zinazofanana:
CSS - somo la 3: syntax za css yaani sheria za uandishi wa css
Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css
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 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...CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition
Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
Soma Zaidi...CSS - SOMO LA 14: Position Property
Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
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 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 8: Upambaji wa Maandishi (Text Styling)
Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
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...