M

MLOG

ગુજરાતી

CSS @when નિયમનું અન્વેષણ કરો, જે બ્રાઉઝર સપોર્ટ, વ્યૂપોર્ટ કદ અને વધુના આધારે શરતી સ્ટાઈલ એપ્લિકેશનને સક્ષમ કરતી એક શક્તિશાળી સુવિધા છે. વ્યવહારુ ઉદાહરણો સાથે શીખો.

CSS @when નિયમ: શરતી સ્ટાઈલ એપ્લિકેશનમાં નિપુણતા મેળવવી

CSSની દુનિયા સતત વિકસિત થઈ રહી છે, જે ડેવલપર્સને વેબ પેજને સ્ટાઈલ કરવા માટે વધુ શક્તિશાળી અને લવચીક રીતો પ્રદાન કરે છે. આવી જ એક સુવિધા જે લોકપ્રિયતા મેળવી રહી છે તે છે @when નિયમ, જેને CSS કન્ડિશનલ રૂલ્સ મોડ્યુલ લેવલ 1 તરીકે પણ ઓળખવામાં આવે છે. આ નિયમ તમને ચોક્કસ શરતો પૂરી થવા પર CSS સ્ટાઈલને શરતી રીતે લાગુ કરવાની મંજૂરી આપે છે. તે રિસ્પોન્સિવ ડિઝાઇન, ફીચર ડિટેક્શન અને વધુ મજબૂત અને અનુકૂલનશીલ સ્ટાઈલશીટ બનાવવા માટે એક શક્તિશાળી સાધન છે.

CSS @when નિયમ શું છે?

@when નિયમ CSS માં એક શરતી એટ-રૂલ છે જે તમને એવી સ્ટાઈલ વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે જે ફક્ત ત્યારે જ લાગુ થાય છે જો અમુક શરતો સાચી હોય. તેને તમારા CSS માટે if સ્ટેટમેન્ટ તરીકે વિચારો. મીડિયા ક્વેરીઝથી વિપરીત, જે મુખ્યત્વે વ્યૂપોર્ટ લાક્ષણિકતાઓ (સ્ક્રીનનું કદ, ઓરિએન્ટેશન, વગેરે) પર ધ્યાન કેન્દ્રિત કરે છે, @when શરતી સ્ટાઇલિંગને હેન્ડલ કરવા માટે વધુ સામાન્ય અને વિસ્તૃત રીત પ્રદાન કરે છે. તે @supports અને @media જેવા હાલના શરતી એટ-રૂલ્સ પર વિસ્તરણ કરે છે.

@when નો ઉપયોગ કરવાના મુખ્ય ફાયદા

@when નિયમનું સિન્ટેક્સ

@when નિયમનું મૂળભૂત સિન્ટેક્સ નીચે મુજબ છે: 
@when <condition> {
  /* શરત સાચી હોય ત્યારે લાગુ કરવા માટેના CSS નિયમો */
}

<condition> કોઈપણ માન્ય બુલિયન એક્સપ્રેશન હોઈ શકે છે જે સાચું કે ખોટું મૂલ્યાંકન કરે છે. આ અભિવ્યક્તિમાં ઘણીવાર શામેલ હોય છે:

@when ના વ્યવહારુ ઉદાહરણો

ચાલો @when નિયમની શક્તિ અને બહુમુખી પ્રતિભાને સમજાવવા માટે કેટલાક વ્યવહારુ ઉદાહરણોનું અન્વેષણ કરીએ.

1. @when અને મીડિયા ક્વેરીઝ સાથે રિસ્પોન્સિવ ડિઝાઇન

@when માટેનો સૌથી સામાન્ય ઉપયોગ રિસ્પોન્સિવ ડિઝાઇન છે, જ્યાં તમે સ્ક્રીનના કદના આધારે સ્ટાઈલને સમાયોજિત કરો છો. જ્યારે મીડિયા ક્વેરીઝ આને પોતાની રીતે પ્રાપ્ત કરી શકે છે, ત્યારે @when વધુ સંરચિત અને વાંચનીય અભિગમ પૂરો પાડે છે, ખાસ કરીને જ્યારે જટિલ પરિસ્થિતિઓ સાથે કામ કરતી વખતે.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

આ ઉદાહરણમાં, @when બ્લોકની અંદરની સ્ટાઈલ ફક્ત ત્યારે જ લાગુ થાય છે જ્યારે સ્ક્રીનની પહોળાઈ 768px અને 1023px (સામાન્ય ટેબ્લેટનું કદ) ની વચ્ચે હોય. આ ચોક્કસ વ્યૂપોર્ટ રેન્જ માટે સ્ટાઈલ વ્યાખ્યાયિત કરવાની સ્પષ્ટ અને સંક્ષિપ્ત રીત પ્રદાન કરે છે.

આંતરરાષ્ટ્રીયકરણ નોંધ: વૈશ્વિક પ્રેક્ષકો માટે રિસ્પોન્સિવ ડિઝાઇન નિર્ણાયક છે. વિવિધ પ્રદેશોમાં બદલાતા સ્ક્રીન કદને ધ્યાનમાં લો. ઉદાહરણ તરીકે, કેટલાક દેશોમાં મોબાઇલનો ઉપયોગ વધુ છે, જે મોબાઇલ-ફર્સ્ટ ડિઝાઇનને વધુ નિર્ણાયક બનાવે છે.

2. @when અને @supports સાથે ફીચર ડિટેક્શન

@when ને @supports સાથે જોડી શકાય છે જેથી બ્રાઉઝર દ્વારા કોઈ ચોક્કસ CSS સુવિધાને સમર્થન આપવામાં આવે ત્યારે જ સ્ટાઈલ લાગુ કરી શકાય. આ તમને તમારી વેબસાઇટને ક્રમશઃ સુધારવાની મંજૂરી આપે છે, જે આધુનિક બ્રાઉઝરવાળા વપરાશકર્તાઓ માટે વધુ સારો અનુભવ પૂરો પાડે છે જ્યારે જૂના બ્રાઉઝર સાથે સુસંગતતા જાળવી રાખે છે.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* ગ્રીડને સપોર્ટ ન કરતા બ્રાઉઝર માટે ફોલબેક સ્ટાઈલ */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* જૂના બ્રાઉઝર માટે પહોળાઈ સમાયોજિત કરો */
  }
}

અહીં, અમે @supports નો ઉપયોગ એ ચકાસવા માટે કરીએ છીએ કે બ્રાઉઝર CSS ગ્રીડ લેઆઉટને સપોર્ટ કરે છે કે નહીં. જો તે કરે છે, તો અમે .container પર ગ્રીડ-આધારિત સ્ટાઈલ લાગુ કરીએ છીએ. જો નહીં, તો અમે ફ્લેક્સબોક્સનો ઉપયોગ કરીને ફોલબેક સ્ટાઈલ પ્રદાન કરીએ છીએ જેથી જૂના બ્રાઉઝરમાં સમાન લેઆઉટ પ્રાપ્ત થાય.

વૈશ્વિક ઍક્સેસિબિલિટી નોંધ: ઍક્સેસિબિલિટી માટે ફીચર ડિટેક્શન મહત્વપૂર્ણ છે. જૂના બ્રાઉઝરમાં નવા ARIA એટ્રિબ્યુટ્સ અથવા સિમેન્ટિક HTML5 તત્વો માટે સપોર્ટનો અભાવ હોઈ શકે છે. સામગ્રી સુલભ રહે તેની ખાતરી કરવા માટે યોગ્ય ફોલબેક પ્રદાન કરો.

3. મીડિયા ક્વેરીઝ અને ફીચર ક્વેરીઝનું સંયોજન

@when ની સાચી શક્તિ તેની મીડિયા ક્વેરીઝ અને ફીચર ક્વેરીઝને જોડીને વધુ જટિલ અને સૂક્ષ્મ શરતી સ્ટાઇલિંગ નિયમો બનાવવાની ક્ષમતામાંથી આવે છે.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

આ ઉદાહરણમાં, .modal એલિમેન્ટમાં ઝાંખું બેકડ્રોપ ત્યારે જ હશે જ્યારે સ્ક્રીનની પહોળાઈ ઓછામાં ઓછી 768px હોય અને બ્રાઉઝર backdrop-filter પ્રોપર્ટીને સપોર્ટ કરતું હોય. આ તમને આધુનિક બ્રાઉઝર પર દૃષ્ટિની આકર્ષક અસરો બનાવવાની મંજૂરી આપે છે જ્યારે જૂના બ્રાઉઝર પર સંભવિત પ્રદર્શન સમસ્યાઓ અથવા રેન્ડરિંગ ખામીઓને ટાળે છે.

4. કસ્ટમ પ્રોપર્ટીઝ (CSS વેરિયેબલ્સ) પર આધારિત સ્ટાઇલિંગ

@when નો ઉપયોગ CSS કસ્ટમ પ્રોપર્ટીઝ (જેને CSS વેરિયેબલ્સ તરીકે પણ ઓળખવામાં આવે છે) સાથે ગતિશીલ અને સ્થિતિ-આધારિત સ્ટાઇલિંગ બનાવવા માટે પણ થઈ શકે છે. તમે જાવાસ્ક્રિપ્ટનો ઉપયોગ કરીને કસ્ટમ પ્રોપર્ટીની કિંમત અપડેટ કરી શકો છો, અને પછી તે કિંમતના આધારે વિવિધ સ્ટાઈલ લાગુ કરવા માટે @when નો ઉપયોગ કરી શકો છો.

પ્રથમ, એક કસ્ટમ પ્રોપર્ટી વ્યાખ્યાયિત કરો:

:root {
  --theme-color: #007bff; /* ડિફોલ્ટ થીમ રંગ */
  --is-dark-mode: false;
}

પછી, કસ્ટમ પ્રોપર્ટીના મૂલ્યના આધારે સ્ટાઈલ લાગુ કરવા માટે @when નો ઉપયોગ કરો:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

છેલ્લે, --is-dark-mode કસ્ટમ પ્રોપર્ટીના મૂલ્યને ટૉગલ કરવા માટે જાવાસ્ક્રિપ્ટનો ઉપયોગ કરો:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

આ વપરાશકર્તાઓને લાઇટ અને ડાર્ક થીમ્સ વચ્ચે સ્વિચ કરવાની મંજૂરી આપે છે, જેમાં CSS કસ્ટમ પ્રોપર્ટી મૂલ્યના આધારે ગતિશીલ રીતે અપડેટ થાય છે. નોંધ કરો કે `@when` માં CSS વેરિયેબલ્સની સીધી સરખામણી બધા બ્રાઉઝરમાં સાર્વત્રિક રીતે સમર્થિત ન હોઈ શકે. તેના બદલે, તમારે બિન-શૂન્ય મૂલ્ય માટે મીડિયા ક્વેરી ચેકિંગ સાથે વર્કઅરાઉન્ડનો ઉપયોગ કરવાની જરૂર પડી શકે છે: 

@when ( --is-dark-mode > 0 ) { ... }

જોકે, ખાતરી કરો કે કસ્ટમ પ્રોપર્ટીમાં આ કાર્ય કરવા માટે સંખ્યાત્મક મૂલ્ય છે.

ઍક્સેસિબિલિટી નોંધ: વૈકલ્પિક થીમ્સ (દા.ત., ડાર્ક મોડ) પ્રદાન કરવી એ ઍક્સેસિબિલિટી માટે નિર્ણાયક છે. દૃષ્ટિહીન વપરાશકર્તાઓને ઉચ્ચ-કોન્ટ્રાસ્ટ થીમ્સથી ફાયદો થઈ શકે છે. ખાતરી કરો કે તમારું થીમ સ્વિચ કીબોર્ડ અને સ્ક્રીન રીડર્સ દ્વારા સુલભ છે.

5. ડેટા એટ્રિબ્યુટ્સ પર આધારિત સ્ટાઇલિંગ

તમે @when નો ઉપયોગ ડેટા એટ્રિબ્યુટ્સ સાથે તત્વોને તેમના ડેટા મૂલ્યોના આધારે સ્ટાઈલ કરવા માટે પણ કરી શકો છો. આ ગતિશીલ ઇન્ટરફેસ બનાવવા માટે ઉપયોગી થઈ શકે છે જ્યાં વપરાશકર્તાની ક્રિયાપ્રતિક્રિયા અથવા ડેટા અપડેટ્સના આધારે તત્વોનો દેખાવ બદલાય છે.

ઉદાહરણ તરીકે, ચાલો કહીએ કે તમારી પાસે કાર્યોની સૂચિ છે, અને દરેક કાર્યમાં data-status એટ્રિબ્યુટ છે જે તેની સ્થિતિ દર્શાવે છે (દા.ત., "todo", "in-progress", "completed"). તમે દરેક કાર્યને તેની સ્થિતિના આધારે અલગ રીતે સ્ટાઈલ કરવા માટે @when નો ઉપયોગ કરી શકો છો.

[data-status="todo"] {
  /* todo કાર્યો માટે ડિફોલ્ટ સ્ટાઈલ */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

નોંધ: attribute() પરીક્ષણ શરત માટે સમર્થન મર્યાદિત હોઈ શકે છે અથવા હાલમાં બધા બ્રાઉઝરમાં સંપૂર્ણપણે અમલમાં નથી. હંમેશા સંપૂર્ણપણે પરીક્ષણ કરો.

બ્રાઉઝર સુસંગતતા અને પોલીફિલ્સ

2024 ના અંત સુધીમાં, @when નિયમ માટે બ્રાઉઝર સપોર્ટ હજુ પણ વિકસિત થઈ રહ્યો છે. જ્યારે ઘણા આધુનિક બ્રાઉઝર મુખ્ય કાર્યક્ષમતાને સમર્થન આપે છે, ત્યારે કેટલાક જૂના બ્રાઉઝર ન પણ કરી શકે. તેથી, સુસંગતતા કોષ્ટકો તપાસવું અને જ્યાં જરૂરી હોય ત્યાં યોગ્ય ફોલબેક અથવા પોલીફિલ્સનો ઉપયોગ કરવો નિર્ણાયક છે.

@when અને સંબંધિત સુવિધાઓની વર્તમાન બ્રાઉઝર સપોર્ટ સ્થિતિ તપાસવા માટે હંમેશા Can I use... જેવા સંસાધનોનો સંપર્ક કરો.

@when નો ઉપયોગ કરવા માટે શ્રેષ્ઠ પદ્ધતિઓ

નિષ્કર્ષ

@when નિયમ CSS ટૂલબોક્સમાં એક શક્તિશાળી ઉમેરો છે, જે વિકાસકર્તાઓને શરતી રીતે સ્ટાઈલ લાગુ કરવાની વધુ લવચીક અને અભિવ્યક્ત રીત પ્રદાન કરે છે. તેને મીડિયા ક્વેરીઝ, ફીચર ક્વેરીઝ અને CSS કસ્ટમ પ્રોપર્ટીઝ સાથે જોડીને, તમે વધુ મજબૂત, અનુકૂલનશીલ અને જાળવણીપાત્ર સ્ટાઈલશીટ બનાવી શકો છો. જ્યારે બ્રાઉઝર સપોર્ટ હજુ પણ વિકસિત થઈ રહ્યો છે, ત્યારે @when એ એક એવી સુવિધા છે જે તમારા આધુનિક વેબ ડેવલપમેન્ટ વર્કફ્લોમાં અન્વેષણ કરવા અને સમાવવા યોગ્ય છે.

જેમ જેમ વેબનો વિકાસ થતો રહેશે, તેમ તેમ વિશ્વભરના વપરાશકર્તાઓ માટે આકર્ષક, સુલભ અને પ્રદર્શનકારી અનુભવો બનાવવા માટે @when જેવી સુવિધાઓમાં નિપુણતા મેળવવી આવશ્યક બનશે. શરતી સ્ટાઇલિંગની શક્તિને અપનાવો અને તમારા CSS વિકાસમાં નવી શક્યતાઓને અનલોક કરો.