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

? 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

✅ 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

✅ 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

1. Ni aina gani ya condition haipo kwenye if() function?
   a) media()
   b) supports()
   c) style()
   d) event()

2. pointer: coarse inamaanisha nini?
   a) Hakuna pointer
   b) Touchscreen yenye stylus
   c) Touchscreen ya vidole
   d) Mouse

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

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

5. Faida kuu ya if() function ni ipi?
   a) Hupunguza JavaScript
   b) Huongeza SEO
   c) Huondoa media queries zote
   d) Huongeza padding