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.

Jiunge nasi WhatsApp

📘 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: coarse inamaanisha nini?
a) Hakuna pointer
b) Touchscreen yenye stylus
c) Touchscreen ya vidole
d) Mouse
any-pointer: fine inamaanisha 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

Jiunge nasi WhatsApp kupata update zetu

Jiunge nasi WhatsApp

Zoezi la Maswali

Nyuma

Umeionaje Makala hii.. ?

Nzuri Mbaya Save

Author: Rajabu

Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 357

Share On:

Facebook WhatsApp

Sponsored links
👉1 Madrasa kiganjani 👉2 Kitau cha Fiqh 👉3 kitabu cha Simulizi 👉4 Kitabu cha Afya 👉5 Dua za Mitume na Manabii 👉6 Sira ya Mtume Muhammad (s.a.w)

Post zinazofanana:

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.

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 34: if() Condition katika CSS

📘 Utangulizi

✅ 1. Muundo wa `if()` Function

✅ 2. Aina Tatu za Condition Zinazotumika

✅ 3. Mifano ya Uhalisia

💡 A. Kuweka Button Size Kutegemea na Aina ya Pointer

💡 B. Kuweka Theme Kulingana na Dark/Light Mode

💡 C. Kuonyesha Background Color ya Kisasa (OKLCH) ikiwa Inasapotiwa

💡 D. Kuonyesha Ujumbe wa Support Kutumia `::after`

💡 E. Kubadili Muonekano wa Kadi Kulingana na Status

💡 F. Kubadili Font Size kwa Touchscreen

📌 Kipengele Maalum: Ufafanuzi wa `pointer` na `any-pointer`

✅ 1. `pointer`

✅ 2. `any-pointer`

📊 Jedwali la Tofauti

✅ Hitimisho

🔜 Somo Linalofuata:

🧠 Maswali ya Kujitathmini

Post zinazofanana:

CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions

CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)

CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS

CSS - SOMO LA 29: CSS z-index na Stacking Context

CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML

CSS - SOMO LA 20: Media Queries na Responsive Design

CSS - SOMO LA 17: Flexbox Advanced

CSS - somo la 3: syntax za css yaani sheria za uandishi wa css

CSS - SOMO LA 18: Grid Layout

CSS - SOMO LA 16: Flexbox Basics

CSS - somo la 34: if() Condition katika CSS

📘 Utangulizi

✅ 1. Muundo wa if() Function

✅ 2. Aina Tatu za Condition Zinazotumika

✅ 3. Mifano ya Uhalisia

💡 A. Kuweka Button Size Kutegemea na Aina ya Pointer

💡 B. Kuweka Theme Kulingana na Dark/Light Mode

💡 C. Kuonyesha Background Color ya Kisasa (OKLCH) ikiwa Inasapotiwa

💡 D. Kuonyesha Ujumbe wa Support Kutumia ::after

💡 E. Kubadili Muonekano wa Kadi Kulingana na Status

💡 F. Kubadili Font Size kwa Touchscreen

📌 Kipengele Maalum: Ufafanuzi wa pointer na any-pointer

✅ 1. pointer

✅ 2. any-pointer

📊 Jedwali la Tofauti

✅ Hitimisho

🔜 Somo Linalofuata:

🧠 Maswali ya Kujitathmini

Post zinazofanana:

✅ 1. Muundo wa `if()` Function

💡 D. Kuonyesha Ujumbe wa Support Kutumia `::after`

📌 Kipengele Maalum: Ufafanuzi wa `pointer` na `any-pointer`

✅ 1. `pointer`

✅ 2. `any-pointer`