CSS @when: ఆధునిక వెబ్ డిజైన్ కోసం షరతులతో కూడిన స్టైలింగ్‌లో నైపుణ్యం సాధించడం

నిరంతరం అభివృద్ధి చెందుతున్న వెబ్ డెవలప్‌మెంట్ ప్రపంచంలో, డైనమిక్ మరియు రెస్పాన్సివ్ యూజర్ ఇంటర్‌ఫేస్‌లను సృష్టించే సామర్థ్యం చాలా ముఖ్యం. విజువల్ ప్రజెంటేషన్‌కు మూలస్తంభమైన CSS, డెవలపర్‌లకు మరింత తెలివైన మరియు అనుకూలమైన వెబ్‌సైట్‌లను నిర్మించడానికి శక్తినిచ్చే శక్తివంతమైన ఫీచర్‌లను పరిచయం చేస్తూనే ఉంది. అటువంటి ఒక సంచలనాత్మక ఫీచర్ @when at-rule, ఇది షరతులతో కూడిన స్టైలింగ్‌ను అనుమతిస్తుంది, నిర్దిష్ట షరతులు నెరవేరినప్పుడు మాత్రమే CSS నియమాలను వర్తింపజేయడానికి మాకు వీలు కల్పిస్తుంది. ఇది నిజంగా రెస్పాన్సివ్ మరియు సందర్భోచితంగా స్పందించే డిజైన్‌లను సృష్టించడానికి అనేక అవకాశాలను అందిస్తుంది.

CSS @when అంటే ఏమిటి?

@when at-rule అనేది CSS స్పెసిఫికేషన్‌కు ఒక శక్తివంతమైన జోడింపు, ఇది @media లేదా @supports నియమాలతో కలిసి పనిచేస్తుంది. ఇది ఒక షరతులతో కూడిన బ్లాక్‌గా పనిచేస్తుంది, అంటే దాని పరిధిలోని CSS డిక్లరేషన్‌లు నిర్దిష్ట షరతు నిజమని మూల్యాంకనం చేస్తే మాత్రమే వర్తింపజేయబడతాయి. ముఖ్యంగా, ఇది @media క్వెరీల యొక్క సాంప్రదాయ బ్లాక్-స్థాయి కండిషనింగ్‌ను దాటి, కొన్ని స్టైల్స్ ఎప్పుడు చురుకుగా ఉండాలో నియంత్రించడానికి మరింత స్పష్టమైన మరియు వ్యక్తీకరణ మార్గాన్ని అందిస్తుంది.

దీనిని మీ CSS కోసం ఒక అత్యంత శుద్ధి చేసిన `if` స్టేట్‌మెంట్‌గా భావించండి. ఒక విస్తృతమైన షరతు ఆధారంగా స్టైల్స్ యొక్క మొత్తం సెట్‌ను వర్తింపజేయడానికి బదులుగా, @when ఒక నియమం లోపల నిర్దిష్ట డిక్లరేషన్‌లను లక్ష్యంగా చేసుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది, ఇది మీ స్టైల్‌షీట్‌లను మరింత సమర్థవంతంగా మరియు నిర్వహించదగినదిగా చేస్తుంది.

సమన్వయం: @media మరియు @supports తో @when

@when యొక్క నిజమైన శక్తి ఇప్పటికే ఉన్న షరతులతో కూడిన at-rules తో కలిపి ఉపయోగించినప్పుడు గ్రహించబడుతుంది:

1. @media క్వెరీలతో @when

ఇది @when కోసం అత్యంత సాధారణ మరియు ప్రభావవంతమైన వినియోగ కేసు అని చెప్పవచ్చు. సాంప్రదాయకంగా, మీరు మొత్తం CSS నియమాలను @media క్వెరీలో ఉంచవచ్చు. @when తో, మీరు ఇప్పుడు మీడియా క్వెరీ షరతుల ఆధారంగా ఒక నియమం లోపల నిర్దిష్ట డిక్లరేషన్‌లను షరతులతో వర్తింపజేయవచ్చు.

ఉదాహరణ: రెస్పాన్సివ్ టైపోగ్రఫీ

ఒక పేరాగ్రాఫ్ యొక్క ఫాంట్ పరిమాణాన్ని సర్దుబాటు చేయాలనుకుందాం, కానీ వ్యూపోర్ట్ 768 పిక్సెల్‌ల కంటే వెడల్పుగా ఉన్నప్పుడు మాత్రమే. @when లేకుండా, మీరు ఇలా చేయవచ్చు:

            .my-paragraph {
  font-size: 16px;
}

@media (min-width: 768px) {
  .my-paragraph {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

ఇప్పుడు, @when ఉపయోగించి, మీరు అదే ఫలితాన్ని మరింత సంక్షిప్తంగా మరియు ఎక్కువ నియంత్రణతో సాధించవచ్చు:

            .my-paragraph {
  font-size: 16px;
  @when (min-width: 768px) {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

ఈ ఉదాహరణలో:

• 16px యొక్క బేస్ font-size ఎల్లప్పుడూ వర్తిస్తుంది.
• 18px యొక్క font-size వ్యూపోర్ట్ వెడల్పు 768 పిక్సెల్‌లు లేదా అంతకంటే ఎక్కువ ఉన్నప్పుడు మాత్రమే వర్తిస్తుంది.

మొత్తం నియమ సెట్‌లను పునరావృతం చేయకుండా, స్క్రీన్ పరిమాణం, ఓరియెంటేషన్ లేదా ఇతర మీడియా ఫీచర్‌ల ఆధారంగా నిర్దిష్ట ప్రాపర్టీలకు సూక్ష్మ సర్దుబాట్లు చేయడానికి ఈ విధానం చాలా ఉపయోగకరంగా ఉంటుంది.

గ్లోబల్ ఉదాహరణ: విభిన్న పరికరాల కోసం UI ఎలిమెంట్‌లను అనుకూలీకరించడం

ఒక గ్లోబల్ ఇ-కామర్స్ ప్లాట్‌ఫారమ్‌ను పరిగణించండి. ఒక ఉత్పత్తి కార్డ్ మొబైల్ పరికరాలలో కాంపాక్ట్ వీక్షణను ప్రదర్శించవచ్చు, కానీ పెద్ద స్క్రీన్‌లపై మరింత వివరణాత్మక వీక్షణను ప్రదర్శించవచ్చు. @when ని @media తో ఉపయోగించి, మీరు ఈ మార్పులను సొగసైన రీతిలో నిర్వహించవచ్చు:

            .product-card {
  padding: 10px;
  text-align: center;
  @when (min-width: 600px) {
    padding: 20px;
    text-align: left;
  }
  @when (min-width: 1024px) {
    padding: 30px;
    display: flex;
    align-items: center;
  }
}

.product-image {
  width: 100%;
  height: 150px;
  @when (min-width: 600px) {
    width: 200px;
    height: 200px;
  }
  @when (min-width: 1024px) {
    width: 250px;
    height: 250px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

ఇది .product-card మరియు దాని అంతర్గత అంశాలైన .product-image వంటివి వ్యూపోర్ట్ పరిమాణం పెరిగేకొద్దీ వాటి స్టైల్స్‌ను క్రమంగా మార్చుకోవడానికి అనుమతిస్తుంది, ప్రపంచవ్యాప్తంగా విస్తృత శ్రేణి పరికరాలలో అనుకూలీకరించిన అనుభవాన్ని అందిస్తుంది.

2. @supports క్వెరీలతో @when

@supports at-rule ఒక బ్రౌజర్ నిర్దిష్ట CSS ప్రాపర్టీ-విలువ జతకు మద్దతు ఇస్తుందో లేదో తనిఖీ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. దీనిని @when తో కలపడం ద్వారా, ఒక నిర్దిష్ట బ్రౌజర్ ఫీచర్ అందుబాటులో ఉన్నప్పుడు మాత్రమే మీరు షరతులతో స్టైల్స్‌ను వర్తింపజేయవచ్చు.

ఉదాహరణ: కొత్త CSS ఫీచర్‌ను ఉపయోగించడం

మీరు ప్రయోగాత్మక backdrop-filter ప్రాపర్టీని ఉపయోగించాలనుకుంటున్నారని ఊహించుకోండి. అన్ని బ్రౌజర్‌లు లేదా పాత వెర్షన్‌లు దీనికి మద్దతు ఇవ్వవు. మీరు @when ని @supports తో ఉపయోగించి దానిని సునాయాసంగా వర్తింపజేయవచ్చు:

            .modal-background {
  background-color: rgba(0, 0, 0, 0.5);
  @when supports (backdrop-filter: blur(10px)) {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

ఈ సందర్భంలో:

• background-color ఫాల్‌బ్యాక్‌గా ఎల్లప్పుడూ వర్తింపజేయబడుతుంది.
• backdrop-filter: blur(10px) డిక్లరేషన్‌కు బ్రౌజర్ మద్దతు ఇచ్చినప్పుడు మాత్రమే backdrop-filter వర్తింపజేయబడుతుంది.

ప్రోగ్రెసివ్ ఎన్‌హాన్స్‌మెంట్ కోసం ఇది చాలా కీలకం, ఇది తాజా CSS ఫీచర్‌లకు మద్దతు ఇవ్వని వాతావరణాలలో కూడా మీ డిజైన్ ఫంక్షనల్‌గా మరియు ఆకర్షణీయంగా ఉండేలా చూస్తుంది.

గ్లోబల్ ఉదాహరణ: యానిమేషన్‌ల కోసం ప్రోగ్రెసివ్ ఎన్‌హాన్స్‌మెంట్

సూక్ష్మ యానిమేషన్‌లను కలిగి ఉన్న ఒక వెబ్‌సైట్‌ను పరిగణించండి. కొన్ని అధునాతన యానిమేషన్‌లు animation-composition లేదా నిర్దిష్ట ఈజింగ్ ఫంక్షన్‌ల వంటి కొత్త CSS ప్రాపర్టీలపై ఆధారపడి ఉండవచ్చు. ఈ అధునాతన ప్రాపర్టీలకు మద్దతు ఇవ్వని బ్రౌజర్‌ల కోసం ఫాల్‌బ్యాక్ లేదా సరళమైన యానిమేషన్‌ను అందించడానికి మీరు @when మరియు @supports ను ఉపయోగించవచ్చు.

            .animated-element {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;

  @when supports (animation-composition: replace) {
    /* More advanced animation properties or sequences */
    animation: slideIn 1s forwards;
    animation-composition: replace;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

ఇక్కడ, animation-composition: replace కు మద్దతిచ్చే బ్రౌజర్‌లు మరింత అధునాతన యానిమేషన్ సీక్వెన్స్‌ను పొందుతాయి, అయితే ఇతరులు సరళమైన transition ప్రాపర్టీకి ఫాల్‌బ్యాక్ అవుతాయి, ఇది ప్రపంచవ్యాప్తంగా వినియోగదారులకు స్థిరమైన, కానీ విభిన్నమైన అనుభవాన్ని అందిస్తుంది.

3. బహుళ షరతులతో @when కలపడం

మీరు ఒకే @when నియమంలో బహుళ షరతులను కూడా జత చేయవచ్చు, మరింత నిర్దిష్టమైన స్టైలింగ్ లాజిక్‌ను సృష్టించవచ్చు. ఇది and, or, మరియు not వంటి లాజికల్ ఆపరేటర్‌లను ఉపయోగించి చేయబడుతుంది.

ఉదాహరణ: సంక్లిష్ట రెస్పాన్సివ్ లాజిక్

ఒక సైడ్‌బార్ చిన్న స్క్రీన్‌లలో మాత్రమే దాచబడాలి, కానీ ఒక నిర్దిష్ట యూజర్ ప్రిఫరెన్స్ సెట్టింగ్ (శరీరంలో ఒక క్లాస్ ద్వారా సూచించబడింది) చురుకుగా లేనప్పుడు మాత్రమే అని ఊహించుకుందాం.

            .sidebar {
  display: block;
  width: 250px;

  /* Hide sidebar on small screens AND not in preference mode */
  @when (max-width: 767px) and not (.no-sidebar-on-mobile) {
    display: none;
  }

  /* Show sidebar on larger screens OR if preference mode is active on small screens */
  @when (min-width: 768px) or (.sidebar-on-mobile) {
    display: block;
  }
}

            

              
                Copy
              
            
          

ఈ స్థాయి షరతులతో కూడిన స్టైలింగ్ నిర్దిష్ట సందర్భాలు మరియు వినియోగదారు పరస్పర చర్యలకు అనుగుణంగా అత్యంత క్లిష్టమైన UI ప్రవర్తనలను అనుమతిస్తుంది.

సింటాక్స్ మరియు ఉత్తమ పద్ధతులు

@when కోసం ప్రాథమిక సింటాక్స్ సూటిగా ఉంటుంది:

            selector {
  property: value;
  @when (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

బహుళ షరతులను కలిపినప్పుడు, సింటాక్స్ ఇలా అవుతుంది:

            selector {
  property: value;
  @when (condition1) and (condition2) {
    property: value;
  }
  @when (condition1) or (condition2) {
    property: value;
  }
  @when not (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

ముఖ్యమైన ఉత్తమ పద్ధతులు:

• చదవడానికి ప్రాధాన్యత ఇవ్వండి: @when స్టైల్స్‌ను మరింత సంక్షిప్తంగా చేయగలిగినప్పటికీ, అర్థం చేసుకోవడానికి కష్టంగా మారే అత్యంత సంక్లిష్టమైన నెస్టెడ్ షరతులను నివారించండి. అవసరమైతే సంక్లిష్ట లాజిక్‌ను వేర్వేరు నియమాలుగా విభజించండి.
• ప్రోగ్రెసివ్ ఎన్‌హాన్స్‌మెంట్: మీ @when నియమాల ద్వారా లక్ష్యంగా చేసుకున్న ఫీచర్‌లకు మద్దతు ఇవ్వని బ్రౌజర్‌లు లేదా వాతావరణాల కోసం ఎల్లప్పుడూ ఒక సునాయాసమైన ఫాల్‌బ్యాక్‌ను అందించండి, ప్రత్యేకంగా @supports తో ఉపయోగించినప్పుడు.
• పనితీరు: @when సాధారణంగా సమర్థవంతమైనదే అయినప్పటికీ, పార్సింగ్ పనితీరును ప్రభావితం చేయగల అత్యంత సంక్లిష్ట షరతులతో కూడిన లాజిక్ పట్ల జాగ్రత్త వహించండి, అయితే ఇది సాధారణ వాడకంతో చాలా అరుదుగా సమస్య అవుతుంది.
• బ్రౌజర్ మద్దతు: @when మరియు దాని సహచర at-rules కోసం బ్రౌజర్ మద్దతుపై నిఘా ఉంచండి. దాని పరిచయం నాటికి, స్వీకరణ పెరుగుతోంది, కానీ మీ లక్ష్య బ్రౌజర్‌లలో పరీక్షించడం చాలా అవసరం. తాజా అనుకూలత సమాచారాన్ని తనిఖీ చేయడానికి Can I Use వంటి సాధనాలను ఉపయోగించండి.
• గ్లోబల్ రీచ్: గ్లోబల్ ప్రేక్షకుల కోసం డిజైన్ చేస్తున్నప్పుడు, ప్రపంచవ్యాప్తంగా ప్రబలంగా ఉన్న విస్తారమైన పరికర పరిమాణాలు మరియు రిజల్యూషన్‌లను తీర్చడానికి @when ని @media తో ఉపయోగించుకోండి. విభిన్న నెట్‌వర్క్ పరిస్థితులను కూడా పరిగణించండి; మీరు prefers-reduced-motion మీడియా క్వెరీలను @when లోపల ఉపయోగించి, యానిమేషన్‌లను నిలిపివేసిన వినియోగదారుల కోసం వాటిని డిసేబుల్ చేయవచ్చు.
• నిర్వహణ సౌలభ్యం: సంబంధిత స్టైల్స్‌ను కలిపి ఉంచడానికి @when ను ఉపయోగించండి. ఒక ప్రాపర్టీ యొక్క విలువ ఒక షరతు ఆధారంగా మారితే, డిఫాల్ట్ మరియు షరతులతో కూడిన విలువలను ఒకే నియమ బ్లాక్‌లో ఉంచడం తరచుగా మరింత నిర్వహించదగినదిగా ఉంటుంది, వాటిని వేర్వేరు @media క్వెరీలలో చెల్లాచెదురుగా ఉంచడం కంటే.

బ్రౌజర్ మద్దతు మరియు భవిష్యత్తు దృక్పథం

@when at-rule CSS ప్రపంచంలోకి సాపేక్షంగా కొత్తగా చేరింది. దాని ప్రారంభ విస్తృత స్వీకరణ నాటికి, ఇది Chrome, Firefox, Safari, మరియు Edge వంటి ఆధునిక బ్రౌజర్‌లలో మద్దతు ఇస్తుంది. అయినప్పటికీ, నిర్దిష్ట వెర్షన్‌లు మరియు ఫీచర్‌ల కోసం తాజా బ్రౌజర్ అనుకూలత డేటాను ఎల్లప్పుడూ తనిఖీ చేయడం చాలా ముఖ్యం.

W3C CSS వర్కింగ్ గ్రూప్ CSS సామర్థ్యాలను మెరుగుపరచడం మరియు విస్తరించడం కొనసాగిస్తుంది. @when వంటి ఫీచర్‌లు, ఇతర షరతులతో కూడిన నియమాలు మరియు నెస్టెంగ్‌తో పాటు, CSS లో మరింత ప్రోగ్రామాటిక్ మరియు వ్యక్తీకరణ స్టైలింగ్ సామర్థ్యాల వైపు ఒక మార్పును సూచిస్తాయి. విభిన్న గ్లోబల్ యూజర్ బేస్‌ను తీర్చే సంక్లిష్ట, అనుకూల మరియు వినియోగదారు-స్నేహపూర్వక వెబ్ అనుభవాలను నిర్మించడానికి ఈ ధోరణి చాలా ముఖ్యమైనది.

వెబ్ డిజైన్ అనుకూలత మరియు వ్యక్తిగతీకరణను స్వీకరించడం కొనసాగిస్తున్నందున, @when డెవలపర్ యొక్క ఆయుధశాలలో ఒక అనివార్య సాధనంగా మారుతుంది. పరికర లక్షణాల నుండి బ్రౌజర్ సామర్థ్యాల వరకు విస్తృత శ్రేణి షరతుల ఆధారంగా స్టైల్స్‌ను చక్కగా సర్దుబాటు చేసే దాని సామర్థ్యం, మరింత అధునాతన మరియు సందర్భోచితంగా స్పందించే ఇంటర్‌ఫేస్‌లను సృష్టించడానికి మాకు అధికారం ఇస్తుంది.

ముగింపు

CSS @when అనేది ఒక శక్తివంతమైన మరియు సొగసైన ఫీచర్, ఇది షరతులతో కూడిన స్టైల్స్‌ను వ్రాసే మన సామర్థ్యాన్ని గణనీయంగా పెంచుతుంది. @media మరియు @supports తో దాని సమన్వయాన్ని ఉపయోగించుకోవడం ద్వారా, డెవలపర్‌లు మరింత రెస్పాన్సివ్, అనుకూల మరియు దృఢమైన వెబ్ డిజైన్‌లను సృష్టించవచ్చు. మీరు విభిన్న స్క్రీన్ పరిమాణాల కోసం టైపోగ్రఫీని సర్దుబాటు చేస్తున్నా, అధునాతన CSS ఫీచర్‌లను షరతులతో వర్తింపజేస్తున్నా, లేదా సంక్లిష్ట ఇంటరాక్టివ్ UIలను నిర్మిస్తున్నా, @when ఆధునిక వెబ్ డెవలప్‌మెంట్ డిమాండ్‌లను తీర్చడానికి అవసరమైన ఖచ్చితత్వం మరియు సౌలభ్యాన్ని అందిస్తుంది. ఈ ఫీచర్‌ను స్వీకరించడం నిస్సందేహంగా గ్లోబల్ ప్రేక్షకుల కోసం మరింత అధునాతన మరియు వినియోగదారు-కేంద్రీకృత డిజిటల్ అనుభవాలకు దారి తీస్తుంది.

తెలివైన, మరింత అనుకూలమైన, మరియు భవిష్యత్తుకు సిద్ధంగా ఉన్న వెబ్‌సైట్‌లను నిర్మించడానికి ఈరోజే మీ ప్రాజెక్ట్‌లలో @when తో ప్రయోగాలు చేయడం ప్రారంభించండి.