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.
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.
if()
Functionproperty: 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
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) |
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
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.
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00aaff
);
}
::after
body::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "Browser yako inasapoti OKLCH";
else: "Browser yako haijasapoti OKLCH"
);
}
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
);
}
button {
font-size: if(media(any-pointer: coarse): 1.3rem; else: 1rem);
}
pointer
na any-pointer
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 */
any-pointer
Huchunguza aina yoyote ya pointer (hata ikiwa sio ya msingi).
@media (any-pointer: coarse) {
/* kifaa chochote kilicho na touchscreen */
}
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 |
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 LA 35: CSS Custom Functions (@function
) – Jinsi ya Kutengeneza Function Zako za CSS
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
Umeionaje Makala hii.. ?
katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
Soma Zaidi...Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Soma Zaidi...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...Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
Soma Zaidi...Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...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...Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
Soma Zaidi...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...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...Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
Soma Zaidi...