CSS @supports: உறுதியான வலை வடிவமைப்பிற்கான அம்சத்தை கண்டறிதல்

வலை உருவாக்கத்தின் நிலையான மாற்றத்தில், உங்கள் வலைத்தளம் பல்வேறு உலாவிகள் மற்றும் சாதனங்களில் சரியாகத் தோன்றுவதை உறுதி செய்வது மிக முக்கியம். இணையத்தின் ஸ்டைலிங் மொழியான CSS, புதிய அம்சங்களை அறிமுகப்படுத்துகிறது. இருப்பினும், இந்த அம்சங்களுக்கான உலாவி ஆதரவு எப்போதும் ஒரே மாதிரியாக இருக்காது. CSS @supports விதி இங்குதான் வருகிறது. அம்சத்தைக் கண்டறிவதற்கான ஒரு சக்திவாய்ந்த வழிமுறையை இது வழங்குகிறது, மேலும் உறுதியான மற்றும் மாற்றியமைக்கக்கூடிய வலை வடிவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது.

CSS @supports என்றால் என்ன?

@supports விதி, ஆதரவு நிலை என்றும் அழைக்கப்படுகிறது, இது ஒரு குறிப்பிட்ட CSS அம்சம் அல்லது சொத்து மதிப்பை உலாவி ஆதரிக்கிறதா என்பதைச் சரிபார்க்க உங்களை அனுமதிக்கும் CSS நிபந்தனை விதியாகும். இந்த சோதனையின் அடிப்படையில், நீங்கள் வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்தலாம். இது உங்கள் வடிவமைப்பை படிப்படியாக மேம்படுத்த உதவுகிறது, சமீபத்திய அம்சங்களை ஆதரிக்கும் உலாவிகளுக்கு சிறந்த அனுபவத்தை வழங்குகிறது. அதுமட்டுமின்றி, அவற்றை ஆதரிக்காதவர்களுக்கு கருணையுடன் தரம் குறைக்கிறது. இது நவீன வலை உருவாக்குநர்களுக்கான ஒரு அடிப்படை கருவியாகும்.

ஏன் @supports ஐப் பயன்படுத்த வேண்டும்? அம்சத்தைக் கண்டறிதலின் நன்மைகள்

@supports மூலம் அம்சத்தைக் கண்டறிதல் பல முக்கிய நன்மைகளை வழங்குகிறது:

• படிப்படியான மேம்பாடு: நீங்கள் அனைத்து உலாவிகளிலும் வேலை செய்யும் அடிப்படை வடிவமைப்பிலிருந்து தொடங்கலாம், பின்னர் குறிப்பிட்ட அம்சங்களை ஆதரிக்கும் உலாவிகளுக்கான மேம்பாடுகளைச் சேர்க்கலாம். இது அவர்களின் உலாவியின் திறன்களைப் பொருட்படுத்தாமல் அனைவருக்கும் ஒரு செயல்பாட்டு அனுபவத்தை உறுதி செய்கிறது.
• கருணைமிகு தரம் குறைதல்: ஒரு உலாவி ஒரு குறிப்பிட்ட அம்சத்தை ஆதரிக்கவில்லை என்றால், @supports தொகுதியில் உள்ள ஸ்டைல்கள் வெறுமனே புறக்கணிக்கப்படும். மேம்பட்ட அம்சங்கள் இல்லாமல் வலைத்தளம் இன்னும் செயல்படும். இது ஆதரிக்கப்படாத CSS காரணமாக முற்றிலும் உடைந்துபோகும் வடிவமைப்பை விட மிகவும் சிறந்தது.
• மேம்படுத்தப்பட்ட பயனர் அனுபவம்: ஒவ்வொரு உலாவியின் திறன்களுக்கு ஏற்ப வடிவமைப்பை வடிவமைப்பதன் மூலம், பயனர் அனுபவத்தை மேம்படுத்தலாம். நவீன உலாவிகளைக் கொண்ட பயனர்கள் சமீபத்திய அம்சங்களிலிருந்து பயனடைகிறார்கள், அதே நேரத்தில் பழைய உலாவிகளைக் கொண்டவர்கள் இன்னும் பயன்படுத்தக்கூடிய மற்றும் அணுகக்கூடிய வலைத்தளத்தை அனுபவிக்கிறார்கள்.
• எதிர்காலத்திற்கான பாதுகாப்பு: உலாவிகள் புதிய அம்சங்களைப் பயன்படுத்தும்போது, உங்கள் வலைத்தளம் தானாகவே அவற்றைப் பயன்படுத்தும். ஒவ்வொரு புதிய அம்சத்திற்கும் உங்கள் CSS ஐ தொடர்ந்து மீண்டும் எழுத வேண்டியதில்லை; கிடைக்கும்போது புதிய ஸ்டைல்களைக் கண்டறிந்து பயன்படுத்த @supports ஐப் பயன்படுத்தலாம்.
• கிராஸ்-பிரவுசர் இணக்கம்: இணக்கத்தன்மை சிக்கல்களைச் சமாளிப்பது மிகவும் எளிதாகிறது. ஆதரிக்கப்படும் அம்சங்களின் அடிப்படையில் நீங்கள் வெவ்வேறு உலாவிகள் அல்லது உலாவி பதிப்புகளை குறிவைக்கலாம்.

@supports ஐ எவ்வாறு பயன்படுத்துவது

@supports விதியின் தொடரியல் நேரடியானது:

            @supports (property: value) {
  /* CSS rules to apply if the browser supports the feature */
}

            

              
                Copy
              
            
          

முக்கிய கூறுகளின் முறிவு இங்கே:

• @supports: இது அம்சத்தைக் கண்டறிதலைத் தொடங்கும் முக்கிய சொல்.
• (property: value): இது நீங்கள் சோதிக்கும் நிபந்தனை. இது ஒரு சொத்து-மதிப்பு ஜோடியாகவோ அல்லது மிகவும் சிக்கலான வெளிப்பாடாகவோ இருக்கலாம் (பின்னர் விளக்கப்படும்).
• { /* CSS rules */ }: சுருள் பிரேஸ்களுக்குள் உள்ள CSS விதிகள், குறிப்பிடப்பட்ட அம்சத்தை உலாவி ஆதரித்தால் மட்டுமே பயன்படுத்தப்படும்.

@supports ஐப் பயன்படுத்துவதற்கான எடுத்துக்காட்டுகள்

@supports எவ்வாறு செயல்படுகிறது என்பதை விளக்க சில நடைமுறை உதாரணங்களைப் பார்ப்போம்:

எடுத்துக்காட்டு 1: CSS கிரிட் ஆதரவைச் சரிபார்க்கிறது

CSS கிரிட் லேஅவுட் என்பது சிக்கலான லேஅவுட்களை உருவாக்க ஒரு சக்திவாய்ந்த கருவியாகும். கிரிட்டை ஆதரிக்காத உலாவிகளுக்கு கருணைமிகு தரம் குறைவதை உறுதி செய்ய, நீங்கள் @supports ஐப் பயன்படுத்தலாம்:

            
.container {
  display: flex; /* Fallback for browsers without Grid */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid; /* Use Grid if supported */
    grid-template-columns: repeat(3, 1fr);
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .container உறுப்பு ஆரம்பத்தில் ஃப்ளெக்ஸ்பாக்ஸைப் பயன்படுத்தி ஒரு ஃபால்பேக் லேஅவுட்டைப் பயன்படுத்துகிறது. உலாவி CSS கிரிட்டை ஆதரித்தால், @supports தொகுதி ஃப்ளெக்ஸ்பாக்ஸ் லேஅவுட்டை மேலெழுதி கிரிட் அடிப்படையிலான ஸ்டைல்களைப் பயன்படுத்தும்.

எடுத்துக்காட்டு 2: `gap` சொத்து ஆதரவைச் சரிபார்க்கிறது

ஃப்ளெக்ஸ்பாக்ஸ் மற்றும் கிரிட்டில் உள்ள `gap` சொத்து கூறுகளை இடையில் இடைவெளியை வரையறுக்கப் பயன்படுகிறது. `gap` ஆதரவைச் சரிபார்க்க `@supports` ஐ எவ்வாறு பயன்படுத்துவது என்பது இங்கே:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Fallback: add margins to the children */
  margin-left: -10px;
  margin-top: -10px;
}

.grid-item {
  padding: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

@supports (gap: 10px) {
  .grid-container {
    margin: 0;
    gap: 10px; /* Use gap if supported */
  }
  .grid-item {
    margin: 0;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், உலாவி `gap` சொத்தை ஆதரித்தால், விளிம்புகள் அகற்றப்பட்டு சிறந்த இடைவெளிக்காக `gap` சொத்துடன் மாற்றப்படுகின்றன.

எடுத்துக்காட்டு 3: `aspect-ratio` ஆதரவைச் சரிபார்க்கிறது

`aspect-ratio` சொத்து ஒரு உறுப்பின் விகிதாச்சாரத்தை எளிதாகப் பராமரிக்க உங்களை அனுமதிக்கிறது. அதன் ஆதரவை எவ்வாறு சரிபார்க்கலாம் என்பது இங்கே:

            
.image-container {
  width: 100%;
  /* Fallback: Use padding-bottom for aspect ratio.  May not be as precise.*/
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@supports (aspect-ratio: 16 / 9) {
  .image-container {
    padding-bottom: 0;  /* Reset fallback padding */
  }

  .image-container {
    aspect-ratio: 16 / 9; /* Use aspect-ratio if supported */
  }
}

            

              
                Copy
              
            
          

இங்கே, பழைய உலாவிகளுக்கான விகிதாச்சாரத்தை பராமரிக்க `padding-bottom` ஐப் பயன்படுத்தி இந்த எடுத்துக்காட்டு ஒரு ஃபால்பேக்கை வழங்குகிறது, மேலும் கிடைக்கும்போது `aspect-ratio` ஐப் பயன்படுத்துகிறது.

மேம்பட்ட @supports நுட்பங்கள்

@supports என்பது எளிய சொத்து-மதிப்பு சோதனைகளுக்கு மட்டுப்படுத்தப்படவில்லை. தர்க்கரீதியான ஆபரேட்டர்களைப் பயன்படுத்தி மிகவும் சிக்கலான நிபந்தனைகளை உருவாக்கலாம்:

தர்க்கரீதியான ஆபரேட்டர்கள்

• and: இரண்டு நிபந்தனைகளை இணைக்கிறது, அவை இரண்டும் உண்மையாக இருக்க வேண்டும்.
• or: இரண்டு நிபந்தனைகளை இணைக்கிறது, அவற்றில் குறைந்தது ஒன்று உண்மையாக இருக்க வேண்டும்.
• not: ஒரு நிபந்தனையை மறுக்கிறது.

சில உதாரணங்கள் இங்கே:

            
/* Check if both display: grid and gap are supported */
@supports (display: grid) and (gap: 10px) {
  /* Styles to apply if both conditions are met */
}

/* Check if either display: grid or display: flex is supported */
@supports (display: grid) or (display: flex) {
  /* Styles to apply if either condition is met */
}

/* Check if the browser *doesn't* support display: grid */
@supports not (display: grid) {
  /* Styles to apply if the browser does NOT support grid */
}

            

              
                Copy
              
            
          

@supports உடன் தனிப்பயன் பண்புகளைப் பயன்படுத்துதல் (CSS மாறிகள்)

உங்கள் @supports வினவல்களுக்குள் CSS தனிப்பயன் பண்புகளை (மாறிகள்) பயன்படுத்தலாம், இது அதிக அளவு நெகிழ்வுத்தன்மையை வழங்குகிறது.

            
:root {
  --my-grid-columns: repeat(3, 1fr);
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: var(--my-grid-columns);
  }
}

            

              
                Copy
              
            
          

இந்த அணுகுமுறை உங்கள் ஸ்டைல்களை ஒரு மைய இடத்தில் எளிதாக சரிசெய்ய உங்களை அனுமதிக்கிறது, இது பராமரிப்பு மற்றும் புதுப்பிப்புகளை மிகவும் திறமையாக ஆக்குகிறது.

நடைமுறை பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

@supports ஐப் பயன்படுத்தும் போது பின்பற்ற வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• திடமான அடிப்படைடன் தொடங்கவும்: எந்தவொரு மேம்பட்ட CSS அம்சங்களும் இல்லாமல் வேலை செய்யும் செயல்பாட்டு மற்றும் அணுகக்கூடிய வலைத்தளத்தை வடிவமைக்கவும். இது அனைத்து பயனர்களுக்கும், பழைய உலாவிகளைக் கொண்டவர்களுக்கும் நல்ல அனுபவத்தை உறுதி செய்கிறது.
• முக்கிய செயல்பாட்டிற்கு முன்னுரிமை கொடுங்கள்: உங்கள் வலைத்தளத்தின் அடிப்படை அம்சங்கள் அனைத்து உலாவிகளிலும் சரியாக வேலை செய்வதை உறுதி செய்வதில் கவனம் செலுத்துங்கள். பின்னர், மேம்பட்ட அம்சங்களுடன் பயனர் அனுபவத்தை மேம்படுத்த @supports ஐப் பயன்படுத்தவும்.
• முழுமையாக சோதிக்கவும்: உங்கள் @supports விதிகள் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதைச் சரிபார்க்க பல்வேறு உலாவிகள் மற்றும் சாதனங்களில் உங்கள் வலைத்தளத்தைச் சோதிக்கவும். பயன்படுத்தப்பட்ட ஸ்டைல்களை ஆய்வு செய்ய உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும், மேலும் உங்கள் வடிவமைப்பு சீரானதாக இருப்பதை உறுதிப்படுத்தவும். கிராஸ்-பிரவுசர் சோதனைக்கு உதவ தானியங்கு சோதனை கருவிகளைப் பயன்படுத்துவதைக் கவனியுங்கள்.
• பயனர் முகவர்களைக் கவனியுங்கள்: @supports பொதுவாக விரும்பப்பட்டாலும், சில குறிப்பிட்ட காட்சிகளில் பயனர் முகவரை முகர்ந்து பார்க்க வேண்டியிருக்கலாம் (எ.கா., ஒரு குறிப்பிட்ட உலாவி பிழை அல்லது மிகவும் தனிப்பயனாக்கப்பட்ட பயனர் அனுபவத்துடன் கையாளுதல்). இருப்பினும், பயனர் முகவரை குறைவாகப் பயன்படுத்தவும், ஏனெனில் அது நம்பகமற்றதாகவும் பராமரிக்க கடினமாகவும் இருக்கும்.
• அம்சம் சார்ந்த ஃபால்பேக்குகளைப் பயன்படுத்தவும்: நீங்கள் பயன்படுத்தும் குறிப்பிட்ட அம்சத்திற்குப் பொருந்தக்கூடிய பொருத்தமான ஃபால்பேக்குகளை வழங்கவும். உதாரணமாக, நீங்கள் CSS கிரிட்டைப் பயன்படுத்தினால், ஃப்ளெக்ஸ்பாக்ஸ் லேஅவுட்டை ஃபால்பேக்காகப் பயன்படுத்தவும்.
• உங்கள் குறியீட்டை ஆவணப்படுத்தவும்: நீங்கள் ஏன் @supports ஐப் பயன்படுத்துகிறீர்கள் மற்றும் நீங்கள் எந்த அம்சங்களைக் குறிவைக்கிறீர்கள் என்பதை விளக்க உங்கள் CSS இல் கருத்துகளைச் சேர்க்கவும். இது உங்கள் குறியீட்டைப் புரிந்துகொள்வதையும் பராமரிப்பதையும் எளிதாக்குகிறது.
• செயல்திறன் பரிசீலனைகள்: @supports பொதுவாக குறைந்த செயல்திறன் தாக்கத்தை ஏற்படுத்தினாலும், அதை அதிகமாகப் பயன்படுத்துவதைத் தவிர்க்கவும். சிக்கலான அல்லது ஆழமாக உள்ளமைக்கப்பட்ட @supports விதிகள் ரெண்டரிங் செயல்திறனை பாதிக்கலாம். எப்போதும் உங்கள் CSS ஐ மதிப்பாய்வு செய்து மேம்படுத்தவும்.
• அணுகல்தன்மை: உங்கள் @supports பயன்பாடு அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்தவும். திரை வாசிப்பாளர்கள் மற்றும் பிற உதவி தொழில்நுட்பங்களுடன் உங்கள் வலைத்தளத்தை எப்போதும் சோதிக்கவும். அனைவரையும் உள்ளடக்கியதை உறுதிப்படுத்த தேவையான போது மாற்று உள்ளடக்கம் அல்லது செயல்பாட்டை வழங்கவும்.
• தற்போதைய நிலவரப்படி இருங்கள்: சமீபத்திய திறன்களை திறம்பட பயன்படுத்த உலாவி ஆதரவு புதுப்பிப்புகள் மற்றும் புதிய CSS அம்சங்களுடன் தொடர்ந்து இருங்கள். உங்கள் குறியீட்டை தவறாமல் மதிப்பாய்வு செய்து, உலாவி ஆதரவு மாற்றங்களுக்கு ஏற்ப உங்கள் ஃபால்பேக்குகளைப் புதுப்பிக்கவும்.

உலகளாவிய எடுத்துக்காட்டுகள் & பரிசீலனைகள்

@supports ஐப் பயன்படுத்துவதற்கான கொள்கைகள் உலகளவில் பொருந்தும். இருப்பினும், ஒரு உலகளாவிய பார்வையாளர்களுக்காக நீங்கள் உருவாக்கும்போது, இந்த புள்ளிகளைக் கவனியுங்கள்:

• உள்ளூர்மயமாக்கல்: ஸ்டைலிங் உள்ளூர்மயமாக்கப்பட்ட உள்ளடக்கத்தின் விளக்கக்காட்சியை எவ்வாறு பாதிக்கிறது என்பதை நினைவில் கொள்ளுங்கள் (எ.கா., வெவ்வேறு உரை திசைகள், எழுத்து தொகுப்புகள்). குறிப்பாக லேஅவுட் மற்றும் அச்சுக்கலை தொடர்பாக, பயனரின் மொழி அல்லது பிராந்தியத்தின் அடிப்படையில் குறிப்பிட்ட ஸ்டைல்களைப் பயன்படுத்த @supports ஐப் பயன்படுத்தவும்.
• சர்வதேசமயமாக்கல்: வெவ்வேறு உள்ளடக்க நீளங்கள் மற்றும் உரை திசைகளுக்காக வடிவமைக்கவும். அரபு அல்லது ஹீப்ரு போன்ற சில மொழிகள் வலமிருந்து இடமாக (RTL) உள்ளன, எனவே நீங்கள் லேஅவுட்களை சரிசெய்ய `@supports` ஐப் பயன்படுத்தலாம்.
• வெவ்வேறு பிராந்தியங்களில் செயல்திறன்: இணைய வேகங்கள் உலகளவில் கணிசமாக வேறுபடுகின்றன என்பதை அங்கீகரிக்கவும். கோப்பு அளவுகளைக் குறைப்பதன் மூலமும், கேச்சிங் நுட்பங்களைப் பயன்படுத்துவதன் மூலமும் CSS டெலிவரியை மேம்படுத்தவும். மெதுவான இணைய இணைப்புகள் உள்ள பிராந்தியங்களில் உங்கள் வலைத்தளத்தின் செயல்திறனை சோதிக்கவும். உலகளவில் பயனர்களுக்கு நெருக்கமாக உங்கள் CSS கோப்புகளை வழங்க ஒரு உள்ளடக்க டெலிவரி நெட்வொர்க்கை (CDN) பயன்படுத்துவதைக் கவனியுங்கள்.
• சாதன பன்முகத்தன்மை: உலகளவில் பயன்படுத்தப்படும் சாதனங்களின் பரந்த அளவைக் கணக்கில் எடுத்துக்கொள்ளுங்கள். வெவ்வேறு திரை அளவுகள், தெளிவுத்திறன்கள் மற்றும் இயக்க முறைமைகளில் சோதனை செய்யுங்கள், அணுகல்தன்மை தேவைகளையும் கணக்கில் எடுத்துக்கொள்ளுங்கள். சாதன திறன்களின் அடிப்படையில் லேஅவுட்களை சரிசெய்யவும், பதிலளிக்கக்கூடிய வடிவமைப்புகளை உருவாக்கவும் @supports ஐப் பயன்படுத்தவும்.
• கலாச்சார உணர்வு: காட்சி வடிவமைப்பு கலாச்சார உணர்வின் முக்கிய பகுதியாக இருக்கலாம். வண்ண அர்த்தங்கள் மற்றும் கலாச்சாரங்களுக்கு இடையே வேறுபடக்கூடிய காட்சி மரபுகளைப் பற்றி அறிந்து கொள்ளுங்கள்.
• உலாவி சந்தைப் பங்கு மாறுபாடுகள்: ஆதிக்கம் செலுத்தும் உலாவிகள் பிராந்தியங்கள் முழுவதும் வேறுபடுகின்றன. எடுத்துக்காட்டாக, ஆசியாவின் சில பகுதிகளில், சில உலாவிகள் குறிப்பிடத்தக்க சந்தைப் பங்கைக் கொண்டிருக்கலாம். இலக்கு பார்வையாளர்களுக்கான உலாவி நிலப்பரப்பை ஆராய்ந்து, அதற்கேற்ப இணக்கத்தன்மைக்கு முன்னுரிமை கொடுங்கள்.

முடிவுரை

CSS @supports என்பது நவீன வலை உருவாக்குநர்களுக்கான ஒரு அத்தியாவசிய கருவியாகும். இது பரந்த அளவிலான உலாவிகள் மற்றும் சாதனங்களில் சிறந்த பயனர் அனுபவத்தை வழங்கும் நெகிழ்வான மற்றும் உறுதியான வலைத்தளங்களை உருவாக்க உங்களை அனுமதிக்கிறது. @supports ஐ திறம்பட புரிந்துகொண்டு செயல்படுத்துவதன் மூலம், உங்கள் வலைத்தளங்கள் பயனர் பயன்படுத்தும் உலாவியைப் பொருட்படுத்தாமல் செயல்பாட்டுடனும் பார்வைக்கு அழகாகவும் இருப்பதை உறுதி செய்யலாம்.

அம்சத்தைக் கண்டறிதலை ஏற்றுக்கொள்ளுங்கள், நன்கு கட்டமைக்கப்பட்ட CSS ஐ எழுதுங்கள் மற்றும் உங்கள் வடிவமைப்புகளை முழுமையாக சோதிக்கவும். வலை உலாவிகள் உருவாகும்போது, வலை உருவாக்கத்திற்கான உங்கள் அணுகுமுறையும் மாற வேண்டும். @supports ஐப் பயன்படுத்துவது பார்வைக்கு பிரமிக்க வைக்கும் வலைத்தளங்களை உருவாக்குவதற்கான ஒரு படியாகும், ஆனால் உறுதியான, நம்பகமான மற்றும் எதிர்காலத்திற்கான பாதுகாப்பானதும் கூட.

இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், ஒரு உலகளாவிய பார்வையாளர்களுக்கு ஈர்க்கும் வலை அனுபவங்களை உருவாக்கலாம், அனைவருக்கும், எல்லா இடங்களிலும் தடையற்ற மற்றும் சுவாரஸ்யமான பயனர் அனுபவத்தை வழங்கலாம்.