CSS எக்ஸ்குளூட் விதியில் தேர்ச்சி பெறுதல்: விலக்கு நிர்வாகத்திற்கான ஒரு விரிவான வழிகாட்டி

CSS exclude விதியானது, ஒரு சக்திவாய்ந்த, ஆனால் பெரும்பாலும் கவனிக்கப்படாத அம்சமாகும், இது டெவலப்பர்களை மிதக்கும் உறுப்புகளைச் சுற்றியுள்ள உள்ளடக்க ஓட்டத்தை துல்லியமாகக் கட்டுப்படுத்தவும் சிக்கலான லேஅவுட்களை உருவாக்கவும் அனுமதிக்கிறது. உள்ளடக்கத்தை சுற்றி மடிக்கும் ஒரு வடிவத்தை வரையறுக்கும் shape-outside பண்புடன் ஒப்பிடும்போது, exclude என்பது உள்ளடக்கத்திலிருந்து தீவிரமாக விலக்கப்பட வேண்டிய ஒரு வடிவத்தை வரையறுக்க உங்களை அனுமதிக்கிறது. இது அதிநவீன தலையங்க வடிவமைப்புகள், ரெஸ்பான்சிவ் லேஅவுட்கள் மற்றும் தனித்துவமான காட்சி அனுபவங்களுக்கான சாத்தியங்களைத் திறக்கிறது.

CSS எக்ஸ்குளூட் விதியைப் புரிந்துகொள்ளுதல்

அதன் மையத்தில், exclude விதியானது ஒரு பக்கத்தில் உள்ளடக்கம் காட்டப்படக்கூடாத பகுதிகளை வரையறுக்க ஒரு வழிமுறையை வழங்குகிறது. இந்த விலக்கு வட்டங்கள் மற்றும் செவ்வகங்கள் போன்ற எளிய வடிவங்கள் அல்லது பாதைகள் அல்லது படங்களைப் பயன்படுத்தி மிகவும் சிக்கலான, தனிப்பயன் வடிவங்களை அடிப்படையாகக் கொண்டது. exclude விதியானது அதன் விளைவை அடைய shape-outside மற்றும் wrap-flow போன்ற பண்புகளுடன் இணைந்து செயல்படுகிறது. exclude பண்பிற்கான ஆதரவு குறைவாக உள்ளது என்பதையும், பழைய உலாவிகளுக்கு பாலிஃபில்கள் அல்லது குறிப்பிட்ட உலாவி முன்னொட்டுகள் தேவைப்படலாம் என்பதையும் கவனத்தில் கொள்ள வேண்டும். உங்கள் இலக்கு பார்வையாளர்கள் உத்தேசிக்கப்பட்ட லேஅவுட்டை அனுபவிப்பார்கள் என்பதை உறுதிப்படுத்த உலாவி இணக்கத்தன்மை அட்டவணைகளைப் பார்க்கவும்.

முக்கிய கருத்துகள் மற்றும் பண்புகள்

• exclude-shapes: இந்த பண்பு, உள்ளடக்கம் விலக்கப்பட வேண்டிய வடிவம் அல்லது வடிவங்களை வரையறுக்கிறது. இது shape-outside போன்ற அதே மதிப்புகளை ஏற்றுக்கொள்கிறது, இதில் அடிப்படை வடிவங்கள் (circle(), ellipse(), polygon(), rect()), படங்களுக்கான URLகள் மற்றும் கிரேடியன்ட்கள் அடங்கும்.
• wrap-flow: இது நேரடியாக exclude விதியின் ஒரு பகுதியாக இல்லாவிட்டாலும், விலக்கப்பட்ட பகுதிகளைச் சுற்றி உள்ளடக்கம் எப்படிப் பாய்கிறது என்பதைத் தீர்மானிப்பதில் wrap-flow ஒரு முக்கியப் பங்கு வகிக்கிறது. அதன் மதிப்புகள் (auto, wrap, start, end, clear) மிதக்கும் உறுப்புகளைச் சுற்றி உள்ளடக்கத்தை மடிக்கும் நடத்தையைக் கட்டுப்படுத்துகின்றன.
• shape-margin: மார்ஜின் போன்றது, shape-margin விலக்கப்பட்ட வடிவத்தைச் சுற்றி கூடுதல் இடத்தை சேர்க்கிறது, இது உள்ளடக்கம் மற்றும் விலக்கு பகுதிக்கு இடையில் காட்சி சுவாசத்திற்கு இடமளிக்கிறது.

செயல்படுத்தும் நுட்பங்கள்: நடைமுறை எடுத்துக்காட்டுகள்

பல்வேறு லேஅவுட் விளைவுகளை அடைய exclude விதியை எவ்வாறு செயல்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

எடுத்துக்காட்டு 1: அடிப்படை வட்ட விலக்கு

இந்த எடுத்துக்காட்டு ஒரு எளிய வட்ட விலக்கை நிரூபிக்கிறது, இது ஒரு கொள்கலனுக்குள் ஒரு வட்டப் பகுதியைச் சுற்றி உரையைப் பாயச் செய்கிறது.

            
.container {
 width: 500px;
 height: 400px;
 position: relative;
}

.exclusion {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background-color: #eee;
 position: absolute;
 top: 50px;
 left: 50px;
 float: left;
 exclude-shapes: circle(50%);
 shape-margin: 10px;
}

.text {
 wrap-flow: both; /* Necessary for exclude to work */
}

            

              
                Copy
              
            
          

            

 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (long text here) ...


            

              
                Copy
              
            
          

விளக்கம்: .exclusion உறுப்பு இடதுபுறமாக மிதக்கப்பட்டு, border-radius ஐப் பயன்படுத்தி ஒரு வட்ட வடிவத்தைக் கொடுக்கப்பட்டுள்ளது. exclude-shapes: circle(50%) விதியானது இந்த வட்டப் பகுதியிலிருந்து உள்ளடக்கத்தை விலக்குமாறு உலாவிக்குச் சொல்கிறது. `text` உறுப்பு மீதான wrap-flow: both; முக்கியமானது, ஏனெனில் இது வடிவங்களைச் சுற்றி உரை பாய அனுமதிக்கப்படுகிறது என்பதை வரையறுக்கிறது. shape-margin வாசிப்புத்தன்மையை மேம்படுத்த வட்டத்தைச் சுற்றி சிறிது பேடிங்கைச் சேர்க்கிறது.

எடுத்துக்காட்டு 2: விலக்கத்திற்கு ஒரு பலகோணத்தைப் பயன்படுத்துதல்

இந்த எடுத்துக்காட்டு ஒரு பலகோண வடிவத்தைப் பயன்படுத்தி மிகவும் சிக்கலான விலக்கைக் காட்டுகிறது.

            
.container {
 width: 500px;
 height: 400px;
 position: relative;
}

.exclusion {
 width: 200px;
 height: 200px;
 position: absolute;
 top: 50px;
 left: 50px;
 float: left;
 exclude-shapes: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);
 shape-margin: 10px;
 background-color: #eee;
}

.text {
 wrap-flow: both;
}

            

              
                Copy
              
            
          

            

 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (long text here) ...


            

              
                Copy
              
            
          

விளக்கம்: exclude-shapes: polygon(...) விதியானது ஒரு தனிப்பயன் பலகோண வடிவத்தை வரையறுக்கிறது. ஒருங்கிணைப்புகள் (இந்த வழக்கில் சதவீதங்கள்) பலகோணத்தின் முனைகளை வரையறுக்கின்றன. உரை இந்த வரையறுக்கப்பட்ட வடிவத்தைச் சுற்றிப் பாயும்.

எடுத்துக்காட்டு 3: ஒரு படத்துடன் விலக்கு

இந்த எடுத்துக்காட்டு ஒரு படத்தை விலக்கு வடிவமாகப் பயன்படுத்துவது எப்படி என்பதை நிரூபிக்கிறது. இதற்கு படத்தில் ஒளி ஊடுருவும் தன்மை இருக்க வேண்டும்.

            
.container {
 width: 500px;
 height: 400px;
 position: relative;
}

.exclusion {
 width: 200px;
 height: 200px;
 position: absolute;
 top: 50px;
 left: 50px;
 float: left;
 exclude-shapes: url("path/to/transparent_image.png");
 shape-margin: 10px;
 background-size: contain;
 background-repeat: no-repeat;
}

.text {
 wrap-flow: both;
}

            

              
                Copy
              
            
          

            

 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (long text here) ...


            

              
                Copy
              
            
          

விளக்கம்: exclude-shapes: url("path/to/transparent_image.png") விதியானது, விலக்கு பகுதியை வரையறுக்க ஒளி ஊடுருவும் தன்மையுள்ள ஒரு படத்தைப் பயன்படுத்துகிறது. படத்தின் ஒளி ஊடுருவும் பகுதிகள் உள்ளடக்க ஓட்டத்திலிருந்து விலக்கப்படும்.

பயன்பாட்டு முறைகள் மற்றும் பயன்பாடுகள்

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

தலையங்க வடிவமைப்பு மற்றும் பத்திரிக்கை லேஅவுட்கள்

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

எடுத்துக்காட்டு: ஒரு வரைபடப் படம் அல்லது ஒரு முக்கிய இடத்தின் புகைப்படத்தைச் சுற்றி உரையை மடிக்கும் ஒரு ஆன்லைன் பயணப் பத்திரிகை, காட்சி விவரிப்பை மேம்படுத்துகிறது.

ரெஸ்பான்சிவ் டிசைன் மற்றும் டைனமிக் உள்ளடக்கம்

வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களுக்கு தடையின்றி லேஅவுட்களை மாற்றியமைக்கவும். exclude விதியை மீடியா வினவல்களுடன் இணைத்து விலக்கு வடிவங்களையும் அளவுகளையும் சரிசெய்யலாம், பல்வேறு சாதனங்களில் உகந்த உள்ளடக்க ஓட்டத்தை உறுதி செய்யலாம்.

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

ஊடாடும் உள்ளடக்கம் மற்றும் பயனர் அனுபவங்கள்

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

எடுத்துக்காட்டு: ஒரு ஊடாடும் இன்போகிராஃபிக், இதில் பயனர்கள் உறுப்புகளை இழுத்து விடலாம், சுற்றியுள்ள உரை உறுப்பின் நிலையின் அடிப்படையில் அதன் ஓட்டத்தை மாறும் வகையில் சரிசெய்கிறது.

அணுகல்தன்மை பரிசீலனைகள்

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

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

விலக்கு நிர்வாகத்திற்கான சிறந்த நடைமுறைகள்

exclude விதியை திறம்பட பயன்படுத்த, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

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

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

முன்னர் குறிப்பிட்டபடி, exclude விதிக்கு உலாவி ஆதரவு குறைவாக இருக்கலாம். புதுப்பித்த இணக்கத்தன்மை தகவலுக்கு Can I Use வலைத்தளத்தைப் பார்க்கவும். நீங்கள் பழைய உலாவிகளை ஆதரிக்க வேண்டுமானால், பாலிஃபில்கள் அல்லது மாற்று லேஅவுட் நுட்பங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். சில பழைய உலாவி பதிப்புகளுக்கு exclude-shapes பண்பை `-webkit-` உடன் முன்னொட்டுச் சேர்ப்பதும் அவசியமாக இருக்கலாம்.

CSS லேஅவுட்டின் எதிர்காலம்

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

முடிவுரை

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