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.

📄 Download Post hii

📘 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:

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
);

✅ 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:

💡 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

  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

Jiunge nasi WhatsApp kupata update zetu

Download App yetu
Zoezi la Maswali

Nyuma


Umeionaje Makala hii.. ?

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

Share On:

Facebook WhatsApp
Sponsored links
👉1 Madrasa kiganjani    👉2 Simulizi za Hadithi Audio    👉3 Bongolite - Game zone - Play free game    👉4 Kitau cha Fiqh    👉5 Kitabu cha Afya    👉6 Sira ya Mtume Muhammad (s.a.w)   

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 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 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 7: Kutumia Fonti (Fonts) kwenye CSS

Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.

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...
CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)

Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.

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 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 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...
CSS - SOMO LA 17: Flexbox Advanced

Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.

Soma Zaidi...