CSS சுற்றுச்சூழல் மாறிகளை தேர்ச்சி பெறுதல்: உலகளாவிய பதிலளிக்கக்கூடிய தன்மைக்கான பாதுகாப்பான பகுதி மற்றும் வியூபோர்ட் தழுவல்

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

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

CSS சுற்றுச்சூழல் மாறிகள் என்றால் என்ன?

env() செயல்பாட்டைப் பயன்படுத்தி அணுகப்படும் CSS சுற்றுச்சூழல் மாறிகள், சாதன-குறிப்பிட்ட சுற்றுச்சூழல் தரவை உங்கள் ஸ்டைல்ஷீட்களுக்கு வெளிப்படுத்துகின்றன. இந்தத் தரவு சாதனத்தின் திரை அளவுகள், நோக்குநிலை, பாதுகாப்பான பகுதிகள் (சாதன பெசல்கள் அல்லது UI கூறுகளால் பாதிக்கப்படாத பகுதிகள்) மற்றும் பலவற்றைப் பற்றிய தகவல்களை உள்ளடக்கியிருக்கலாம். அவை சாதனத்தின் இயக்க முறைமைக்கும் வலை உலாவிக்கும் இடையிலான இடைவெளியைக் குறைக்கின்றன, டெவலப்பர்களை பயனரின் சூழலுக்கு மாறும் வகையில் மாற்றியமைக்கும் சூழல்-விழிப்புணர்வு வடிவமைப்புகளை உருவாக்க உதவுகின்றன.

தற்போதைய சாதனம் மற்றும் அதன் சூழலின் அடிப்படையில் உலாவியால் தானாகவே புதுப்பிக்கப்படும் முன்-வரையறுக்கப்பட்ட CSS மாறிகளாக அவற்றை நினைத்துப் பாருங்கள். மார்ஜின்கள், பேடிங் அல்லது உறுப்பு அளவுகளுக்கான மதிப்புகளை ஹார்ட்கோட் செய்வதற்குப் பதிலாக, சாதனத்தின் பண்புகளின் அடிப்படையில் உகந்த மதிப்புகளைத் தீர்மானிக்க உலாவியை அனுமதிக்க நீங்கள் சுற்றுச்சூழல் மாறிகளைப் பயன்படுத்தலாம்.

CSS சுற்றுச்சூழல் மாறிகளைப் பயன்படுத்துவதன் முக்கிய நன்மைகள்:

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

பாதுகாப்பான பகுதிகளைப் புரிந்துகொள்ளுதல்

பாதுகாப்பான பகுதிகள் என்பது திரையின் பயனருக்குத் தெரியும் என்று உத்தரவாதம் அளிக்கப்பட்ட பகுதிகளாகும், அவை சாதன பெசல்கள், நாட்ச்கள், வட்டமான மூலைகள் அல்லது கணினி UI கூறுகளால் (iOS-ல் உள்ள ஸ்டேட்டஸ் பார் அல்லது Android-ல் உள்ள நேவிகேஷன் பார் போன்றவை) பாதிக்கப்படாது. முக்கியமான உள்ளடக்கம் எப்போதும் அணுகக்கூடியதாகவும், வன்பொருள் அல்லது மென்பொருள் அம்சங்களால் மறைக்கப்படாமலும் இருப்பதை உறுதி செய்வதற்கு இந்தப் பகுதிகள் முக்கியமானவை.

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

பாதுகாப்பான பகுதி சுற்றுச்சூழல் மாறிகள்:

• safe-area-inset-top: மேல் பாதுகாப்பான பகுதி செருகல்.
• safe-area-inset-right: வலது பாதுகாப்பான பகுதி செருகல்.
• safe-area-inset-bottom: கீழ் பாதுகாப்பான பகுதி செருகல்.
• safe-area-inset-left: இடது பாதுகாப்பான பகுதி செருகல்.

இந்த மாறிகள் வியூபோர்ட்டின் விளிம்பிற்கும் பாதுகாப்பான பகுதியின் தொடக்கத்திற்கும் இடையிலான தூரத்தை (பிக்சல்கள் அல்லது பிற CSS அலகுகளில்) குறிக்கும் மதிப்புகளைத் தருகின்றன. கூறுகள் திரையின் தெரியும் எல்லைக்குள் இருப்பதை உறுதிசெய்து, அவற்றுக்கு பேடிங் அல்லது மார்ஜின் சேர்க்க இந்த மதிப்புகளைப் பயன்படுத்தலாம்.

பாதுகாப்பான பகுதி பயன்பாட்டின் நடைமுறை எடுத்துக்காட்டுகள்:

எடுத்துக்காட்டு 1: Body உறுப்புக்கு பேடிங் சேர்த்தல்

சாதன பெசல்கள் அல்லது UI கூறுகளால் உள்ளடக்கம் மறைக்கப்படாமல் இருப்பதை உறுதிசெய்ய body உறுப்புக்கு பேடிங் எப்படி சேர்ப்பது என்பதை இந்த எடுத்துக்காட்டு விளக்குகிறது.

            body {
  padding-top: env(safe-area-inset-top, 0);  /* Default to 0 if the variable is not supported */
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், பாதுகாப்பான பகுதி செருகல்களை அணுக env() செயல்பாடு பயன்படுத்தப்படுகிறது. ஒரு சாதனம் பாதுகாப்பான பகுதி சுற்றுச்சூழல் மாறிகளை ஆதரிக்கவில்லை என்றால், env() செயல்பாட்டின் இரண்டாவது வாதம் (இந்த விஷயத்தில் 0) ஒரு பின்னடைவு மதிப்பாகப் பயன்படுத்தப்படும், இது பழைய சாதனங்களிலும் தளவமைப்பு செயல்பாட்டுடன் இருப்பதை உறுதி செய்கிறது.

எடுத்துக்காட்டு 2: பாதுகாப்பான பகுதிக்குள் ஒரு நிலையான ஹெடரை நிலைநிறுத்துதல்

iOS சாதனங்களில் ஸ்டேட்டஸ் பாரால் மறைக்கப்படுவதைத் தடுக்க, பாதுகாப்பான பகுதிக்குள் ஒரு நிலையான ஹெடரை எவ்வாறு நிலைநிறுத்துவது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது.

            header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(44px + env(safe-area-inset-top, 0));  /* Adjust height for status bar */
  padding-top: env(safe-area-inset-top, 0);  /* Account for status bar padding */
  background-color: #fff;
  z-index: 1000;
}

            

              
                Copy
              
            
          

இங்கே, ஹெடரின் height மற்றும் padding-top ஆகியவை safe-area-inset-top மதிப்பின் அடிப்படையில் மாறும் வகையில் சரிசெய்யப்படுகின்றன. இது ஹெடர் எப்போதும் தெரியும் மற்றும் ஸ்டேட்டஸ் பாருடன் ஒன்றுடன் ஒன்று சேராமல் இருப்பதை உறுதி செய்கிறது. calc() செயல்பாடு ஒரு அடிப்படை உயரத்துடன் பாதுகாப்பான பகுதி செருகலைச் சேர்க்கப் பயன்படுகிறது, இது தேவைப்படும்போது ஸ்டேட்டஸ் பார் உயரத்திற்கு இடமளிக்கும் அதே வேளையில் சாதனங்கள் முழுவதும் சீரான ஸ்டைலிங்கை அனுமதிக்கிறது.

எடுத்துக்காட்டு 3: கீழ் நேவிகேஷன் பார்களைக் கையாளுதல்

இதேபோல், கீழ் நேவிகேஷன் பார்கள் உள்ளடக்கத்தை ஒன்றுடன் ஒன்று சேர்க்கலாம். உள்ளடக்கம் மறைக்கப்படாமல் இருப்பதை உறுதிசெய்ய `safe-area-inset-bottom` ஐப் பயன்படுத்தவும். இது மொபைல் வலைச் செயலிகளுக்கு மிகவும் முக்கியமானது.

            footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom, 0); /* Adjust for bottom navigation */
  background-color: #eee;
  z-index: 1000;
}

            

              
                Copy
              
            
          

பாதுகாப்பான பகுதிகளுக்கான உலகளாவிய கருத்தாய்வுகள்:

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

வியூபோர்ட் அலகுகளுடன் வியூபோர்ட் தழுவல்

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

முக்கிய வியூபோர்ட் அலகுகள்:

• vw: 1vw என்பது வியூபோர்ட்டின் அகலத்தில் 1% க்கு சமம்.
• vh: 1vh என்பது வியூபோர்ட்டின் உயரத்தில் 1% க்கு சமம்.
• vmin: 1vmin என்பது 1vw மற்றும் 1vh ஆகியவற்றில் சிறியதற்கு சமம்.
• vmax: 1vmax என்பது 1vw மற்றும் 1vh ஆகியவற்றில் பெரியதற்கு சமம்.

பதிலளிக்கக்கூடிய தளவமைப்புகளுக்கு வியூபோர்ட் அலகுகளைப் பயன்படுத்துதல்:

முழு-அகலம் அல்லது முழு-உயர கூறுகளை உருவாக்குவதற்கும், திரை அளவுக்கு விகிதாசாரமாக உரையை அளவிடுவதற்கும், மற்றும் தோற்ற விகிதங்களை பராமரிப்பதற்கும் வியூபோர்ட் அலகுகள் மிகவும் பயனுள்ளவை. வியூபோர்ட் அலகுகளைப் பயன்படுத்துவதன் மூலம், ஒவ்வொரு சிறிய சரிசெய்தலுக்கும் மீடியா வினவல்களை நம்பாமல் வெவ்வேறு திரை அளவுகளுக்கு சரளமாக மாற்றியமைக்கும் தளவமைப்புகளை உருவாக்கலாம்.

எடுத்துக்காட்டு 1: ஒரு முழு-அகல ஹெடரை உருவாக்குதல்

            header {
  width: 100vw; /* Full width of the viewport */
  height: 10vh; /* 10% of the viewport height */
  background-color: #333;
  color: #fff;
  text-align: center;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஹெடரின் width 100vw க்கு அமைக்கப்பட்டுள்ளது, இது திரை அளவைப் பொருட்படுத்தாமல் எப்போதும் வியூபோர்ட்டின் முழு அகலத்தையும் பரப்புகிறது என்பதை உறுதி செய்கிறது. height 10vh க்கு அமைக்கப்பட்டுள்ளது, இது வியூபோர்ட் உயரத்தில் 10% ஆகிறது.

எடுத்துக்காட்டு 2: உரையை பதிலளிக்கக்கூடிய வகையில் அளவிடுதல்

            h1 {
  font-size: 5vw;  /* Font size relative to viewport width */
}

p {
  font-size: 2.5vw;
}

            

              
                Copy
              
            
          

இங்கே, h1 மற்றும் p கூறுகளின் font-size vw அலகுகளைப் பயன்படுத்தி வரையறுக்கப்படுகிறது. இது உரை வியூபோர்ட் அகலத்துடன் விகிதாசாரமாக அளவிடப்படுவதை உறுதி செய்கிறது, வெவ்வேறு திரை அளவுகளில் வாசிப்புத்திறனை பராமரிக்கிறது. சிறிய வியூபோர்ட் அகலங்கள் சிறிய உரைக்கு வழிவகுக்கும், அதே நேரத்தில் பெரிய வியூபோர்ட் அகலங்கள் பெரிய உரைக்கு வழிவகுக்கும்.

எடுத்துக்காட்டு 3: பேடிங் ஹேக் உடன் தோற்ற விகிதங்களை பராமரித்தல்

கூறுகளுக்கு, குறிப்பாக படங்கள் அல்லது வீடியோக்களுக்கு ஒரு சீரான தோற்ற விகிதத்தை பராமரிக்க, நீங்கள் வியூபோர்ட் அலகுகளுடன் "பேடிங் ஹேக்" ஐப் பயன்படுத்தலாம். இந்த நுட்பம் ஒரு உறுப்பின் padding-bottom பண்பை அதன் அகலத்தின் சதவீதமாக அமைப்பதை உள்ளடக்கியது, விரும்பிய தோற்ற விகிதத்தின் அடிப்படையில் உறுப்புக்கு இடத்தை திறம்பட ஒதுக்குகிறது.

            .aspect-ratio-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
  height: 0;
}

.aspect-ratio-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .aspect-ratio-container இன் padding-bottom 56.25% க்கு அமைக்கப்பட்டுள்ளது, இது 16:9 தோற்ற விகிதத்துடன் ஒத்துப்போகிறது. iframe (அல்லது வேறு ஏதேனும் உள்ளடக்க உறுப்பு) பின்னர் கண்டெய்னருக்குள் முழுமையாக நிலைநிறுத்தப்படுகிறது, விரும்பிய தோற்ற விகிதத்தை பராமரிக்கும் அதே வேளையில் கிடைக்கும் இடத்தை நிரப்புகிறது. YouTube அல்லது Vimeo போன்ற தளங்களில் இருந்து வீடியோக்களை உட்பொதிப்பதற்கு இது நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும், அவை எல்லா திரை அளவுகளிலும் சரியாகக் காட்டப்படுவதை உறுதி செய்கிறது.

வியூபோர்ட் அலகுகளின் வரம்புகள்:

வியூபோர்ட் அலகுகள் சக்திவாய்ந்தவை என்றாலும், அவற்றுக்கு சில வரம்புகள் உள்ளன:

• மொபைலில் விசைப்பலகை தெரிவுநிலை: மொபைல் சாதனங்களில், விசைப்பலகை காட்டப்படும்போது வியூபோர்ட் உயரம் மாறலாம், இது நீங்கள் vh அலகுகளை பெரிதும் நம்பியிருந்தால் எதிர்பாராத தளவமைப்பு மாற்றங்களை ஏற்படுத்தலாம். விசைப்பலகை தெரிவுநிலையினைக் கண்டறிந்து அதற்கேற்ப உங்கள் தளவமைப்பை சரிசெய்ய JavaScript ஐப் பயன்படுத்தவும்.
• உலாவி இணக்கத்தன்மை: வியூபோர்ட் அலகுகள் பரவலாக ஆதரிக்கப்பட்டாலும், பழைய உலாவிகளுக்கு வரையறுக்கப்பட்ட அல்லது ஆதரவு இல்லாமல் இருக்கலாம். பழைய உலாவிகளுடன் இணக்கத்தன்மையை உறுதிப்படுத்த நிலையான அலகுகள் அல்லது மீடியா வினவல்களைப் பயன்படுத்தி பின்னடைவு மதிப்புகளை வழங்கவும்.
• அதிக அளவு கூறுகள்: வியூபோர்ட் அலகுகளுடன் அளவிடப்பட்ட ஒரு உறுப்புக்குள் உள்ள உள்ளடக்கம் கிடைக்கும் இடத்தை மீறினால், அது வழிந்து ஓடக்கூடும், இது தளவமைப்பு சிக்கல்களுக்கு வழிவகுக்கும். வழிந்து ஓடுதலை நேர்த்தியாகக் கையாள overflow: auto அல்லது overflow: scroll போன்ற CSS பண்புகளைப் பயன்படுத்தவும்.

மாறும் வியூபோர்ட் அலகுகள்: svh, lvh, dvh

நவீன உலாவிகள் வியூபோர்ட் அளவைப் பாதிக்கும் உலாவி UI கூறுகளின் சிக்கலைக் கையாளும் மூன்று கூடுதல் வியூபோர்ட் அலகுகளை அறிமுகப்படுத்துகின்றன, குறிப்பாக மொபைலில்:

• svh (சிறிய வியூபோர்ட் உயரம்): சாத்தியமான மிகச்சிறிய வியூபோர்ட் உயரத்தைக் குறிக்கிறது. மொபைலில் உள்ள முகவரிப் பட்டி போன்ற உலாவி UI கூறுகள் இருக்கும்போதும் இந்த வியூபோர்ட் அளவு நிலையானதாக இருக்கும்.
• lvh (பெரிய வியூபோர்ட் உயரம்): சாத்தியமான மிகப்பெரிய வியூபோர்ட் உயரத்தைக் குறிக்கிறது. இந்த வியூபோர்ட் அளவு தற்காலிகமாகத் தெரியும் உலாவி UI க்குப் பின்னால் உள்ள பகுதியையும் உள்ளடக்கியிருக்கலாம்.
• dvh (மாறும் வியூபோர்ட் உயரம்): தற்போதைய வியூபோர்ட் உயரத்தைக் குறிக்கிறது. இது `vh` ஐப் போன்றது, ஆனால் உலாவி UI கூறுகள் தோன்றும்போதோ அல்லது மறையும்போதோ புதுப்பிக்கப்படும்.

இந்த அலகுகள் மொபைல் சாதனங்களில் முழு-திரை தளவமைப்புகள் மற்றும் அனுபவங்களை உருவாக்குவதற்கு மிகவும் பயனுள்ளவை, ஏனெனில் அவை மிகவும் சீரான மற்றும் நம்பகமான வியூபோர்ட் உயர அளவீடுகளை வழங்குகின்றன. உலாவி UI தோன்றும்போதோ அல்லது மறையும்போதோ, `dvh` மாறுகிறது, தேவைக்கேற்ப தளவமைப்பு சரிசெய்தல்களைத் தூண்டுகிறது.

எடுத்துக்காட்டு: முழு-திரை மொபைல் தளவமைப்புகளுக்கு dvh ஐப் பயன்படுத்துதல்:

            .full-screen-section {
  height: 100dvh;
  width: 100vw;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு ஒரு முழு-திரைப் பகுதியை உருவாக்குகிறது, அது எப்போதும் முழு தெரியும் திரை பகுதியை ஆக்கிரமிக்கிறது, மொபைல் சாதனங்களில் உலாவி UI இருப்பு அல்லது இல்லாததற்கு ஏற்ப மாற்றியமைக்கிறது. இது முகவரிப் பட்டி அல்லது பிற கூறுகளால் உள்ளடக்கம் மறைக்கப்படுவதைத் தடுக்கிறது.

உகந்த பதிலளிக்கக்கூடிய தன்மைக்கு பாதுகாப்பான பகுதி மற்றும் வியூபோர்ட் அலகுகளை இணைத்தல்

உண்மையான சக்தி பாதுகாப்பான பகுதி செருகல்களை வியூபோர்ட் அலகுகளுடன் இணைப்பதில் உள்ளது. இந்த அணுகுமுறை பதிலளிக்கக்கூடிய மற்றும் சாதன-குறிப்பிட்ட அம்சங்களை அறிந்த தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது, பரந்த அளவிலான சாதனங்களில் உகந்த பயனர் அனுபவத்தை உறுதி செய்கிறது.

எடுத்துக்காட்டு: பாதுகாப்பான பகுதி ஆதரவுடன் மொபைல்-நட்பு நேவிகேஷன் பார் உருவாக்குதல்

            nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(10vh + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh; /* Remaining height after accounting for safe area */
  padding: 0 16px;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், nav உறுப்பு vw மற்றும் env() இரண்டையும் பயன்படுத்தி பாதுகாப்பான பகுதியைக் கணக்கில் கொள்ளும் ஒரு பதிலளிக்கக்கூடிய நேவிகேஷன் பாரை உருவாக்குகிறது. அகலம் 100vw க்கு அமைக்கப்பட்டுள்ளது, அது வியூபோர்ட்டின் முழு அகலத்தையும் பரப்புகிறது என்பதை உறுதி செய்கிறது. உயரம் மற்றும் padding-top ஆகியவை safe-area-inset-top மதிப்பின் அடிப்படையில் மாறும் வகையில் சரிசெய்யப்படுகின்றன, நேவிகேஷன் பார் ஸ்டேட்டஸ் பாரால் மறைக்கப்படவில்லை என்பதை உறுதி செய்கிறது. .nav-content வகுப்பு நேவிகேஷன் பாருக்குள் உள்ள உள்ளடக்கம் மையமாகவும் தெரியும்படியும் இருப்பதை உறுதி செய்கிறது.

CSS சுற்றுச்சூழல் மாறிகளைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

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

உலாவி இணக்கத்தன்மை மற்றும் பின்னடைவுகள்

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

உலாவி இணக்கத்தன்மையைக் கையாள்வதற்கான உத்திகள்:

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

எடுத்துக்காட்டு: சுற்றுச்சூழல் மாறி ஆதரவுக்கு CSS அம்ச வினவல்களைப் பயன்படுத்துதல்:

            @supports (safe-area-inset-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
  }
}

@supports not (safe-area-inset-top: env(safe-area-inset-top)) {
  /* Fallback styles for browsers that do not support safe area insets */
  body {
    padding: 16px; /* Use a default padding value */
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு உலாவி safe-area-inset-top சுற்றுச்சூழல் மாறியை ஆதரிக்கிறதா என்பதைச் சரிபார்க்க @supports விதியைப் பயன்படுத்துகிறது. அது ஆதரித்தால், சுற்றுச்சூழல் மாறிகளைப் பயன்படுத்தி பேடிங் பயன்படுத்தப்படுகிறது. இல்லையெனில், ஒரு இயல்புநிலை பேடிங் மதிப்பு பயன்படுத்தப்படுகிறது.

முடிவுரை: உலகளாவிய பார்வையாளர்களுக்காக மாற்றியமைக்கக்கூடிய வலை வடிவமைப்பைத் தழுவுதல்

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

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

மேலும் ஆதாரங்கள்

• MDN Web Docs: env()
• MDN Web Docs: CSS Values and Units
• Designing Websites for iPhone X (WebKit Blog)