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.. ?
Share On:
👉1 ai web app 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Simulizi za Hadithi Audio 👉4 Kitau cha Fiqh 👉5 Bongolite - Game zone - Play free game 👉6 Dua za Mitume na Manabii
Post zinazofanana:
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 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 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 10: Box Model katika CSS
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...CSS - SOMO LA 32: Custom Fonts na @font-face
Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.
Soma Zaidi...CSS - SOMO LA 11: Mitindo ya Border (Border Styles)
Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
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 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
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 20: Media Queries na Responsive Design
Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.
Soma Zaidi...