CSS இல் வரும் புதிய சீரற்ற செயல்பாடுகள் மற்றும் அவை எவ்வாறு செயல்படுகின்றன என்பதைப் பற்றிய ஒரு கதையை நான் சமீபத்தில் வெளியிட்டேன். இந்தக் கட்டுரையில், CSS இல் உள்ள சீரற்ற சவால்கள், காலப்போக்கில் கருத்து எவ்வாறு உருவானது மற்றும் இந்த சொந்த அம்சம் ஏன் பெரிய விஷயமாக உள்ளது என்பதை ஆராய்வோம்.
நான் வலைத்தளங்களை உருவாக்கத் தொடங்கியபோது நான் செய்ய விரும்பிய முதல் விஷயங்களில் ஒன்று, நபருக்கு நபர் மாறும் தனித்துவமான அனுபவங்களை உருவாக்குவது. சிறிய விஷயங்கள்: இங்கே ஒரு சீரற்ற பின்னணி, அங்கு சீரற்ற வண்ணங்கள்… கான்ஃபெட்டி அல்லது பனிப்பொழிவு போன்ற சிறிய மைக்ரோ-இன்டராக்ஷன்கள் கூட இயற்கையாக உணர சில அளவிலான சீரற்ற தன்மை தேவை.
நான் தனியாக இல்லை! பல வெப் டெவலப்பர்கள் (அந்த நேரத்தில் ‘வெப்மாஸ்டர்கள்’) இதுபோன்ற விஷயங்களைச் செய்ய விரும்புவதை நான் விரைவில் கண்டுபிடித்தேன்: ஆஹா காரணிகளையும் தனித்துவ உணர்வையும் தங்கள் தளங்களுக்குச் சேர்க்கவும். ஆனால் எனக்கு ஒரு சிக்கல் இருந்தது: CSS.
CSS என்பது ஒரு பிரகடன மற்றும் தீர்மான மொழியாகும். இயற்கை மாறுபாட்டின் யோசனையுடன் முரண்படும் இரண்டு அம்சங்கள்:
- பிரகடனம் கவனம் செலுத்துகிறது என்று அர்த்தம் என்னஇல்லை எப்படி. கட்டாய மொழிகளைப் போலல்லாமல், CSS ஐப் பயன்படுத்தும் டெவலப்பர்கள், எதிர்பார்த்த முடிவு என்ன என்பதை உலாவிக்குத் தெரிவிக்கிறார்கள், ஆனால் அதை எப்படிப் பெறுவது என்பது அல்ல.
- தீர்மான ரீதியில் கொடுக்கப்பட்ட உள்ளீட்டிற்கு நாம் அதே வெளியீட்டைப் பெறுவோம். எப்போதும் ஒரே மாதிரி. ஒரு நிறம் சிவப்பு நிறமாக இருக்கும் என்று நீங்கள் குறிப்பிட்டால், அந்த நிறம் சிவப்பு நிறமாக இருக்கும், நீலம் அல்லது மஞ்சள் அல்ல.
இது வடிவமைப்பு மற்றும் CSS ஐ கணிக்கக்கூடிய மற்றும் நம்பகமானதாக மாற்றும் விஷயங்களில் ஒன்றாகும். தளவமைப்பு இயந்திரம் எவ்வாறு இயங்குகிறது என்பதை நீங்கள் புரிந்து கொண்டால், எந்த நேரத்தில் எந்த பாணிகள் பயன்படுத்தப்படும் என்பதை நீங்கள் கூறலாம். எது சிறந்தது… ஆனால் நீங்கள் சீரற்ற உள்ளடக்கத்தை உருவாக்க விரும்பினால் அவ்வளவு சிறப்பாக இல்லை.
எனவே வடிவமைப்பாளர்கள் மற்றும் டெவலப்பர்கள் ஒரு உறுதியான அமைப்பிலிருந்து இயற்கையான மாறுபாட்டை அடைய ஒரு சவாலான (மற்றும் சில நேரங்களில் கடினமான) பயணம் தொடங்கியது.
சீரற்ற பாணிகளுக்கான நீண்ட மற்றும் முறுக்கு பாதை
CSS இல் சீரற்ற பாணிகளுக்கான பாதை பல சோதனைகள் மற்றும் இன்னல்களுடன் அமைக்கப்பட்டுள்ளது. ஆனால் ஒவ்வொரு அடியிலும், டெவலப்பர்கள் புதிய தீர்வுகளைக் கண்டறிந்தனர், அது முந்தையவற்றில் மேம்பட்டது. கொஞ்சம் கூட.
குறிப்பு: இந்த காலக்கெடு ஒரு கடுமையான வரலாற்று அல்லது காலவரிசை வரிசையை விட தர்க்கரீதியான முன்னேற்றத்தை பிரதிபலிக்கிறது.
போலி-ரேண்டம் மற்றும் CSS வடிவங்கள்
வடிவங்களை உருவாக்குவதன் மூலம் CSS இல் சீரற்ற தன்மையை நாம் உருவகப்படுத்தலாம். ஆனால் இது உண்மையில் தற்செயலானது அல்ல. முடிவுகள் எப்போதும் ஒரே மாதிரியாக இருக்கும், விரைவில் அல்லது பின்னர் மக்கள் இந்த முறையை கவனிப்பார்கள்.
இந்த உருவகப்படுத்துதலை உருவாக்க ஒரு வழி பயன்படுத்த வேண்டும் :nth-child() தேர்வாளர்கள் அல்லது அனிமேஷன்களுடன் விளையாடுவதன் மூலம். முதல் முறை எளிதானது, ஆனால் மோசமான முடிவுகளை அளிக்கிறது; இரண்டாவது சிலரை ஏமாற்றலாம் மற்றும் ஈர்க்கலாம்.
எச்சரிக்கை: மீடியாவை தானாக இயக்கவும்
இந்த முறைகள் எந்த மட்டத்திலும் சீரற்றமயமாக்கலை வழங்காத ஹேக்குகள் என்று சொல்லத் தேவையில்லை. அடுத்தது என்ன மதிப்பு வரும் என்பதை ஒரு மனிதனால் துல்லியமாக கணிக்க முடியாது – குறைந்தபட்சம் முயற்சி இல்லாமல் இல்லை – ஆனால் ஒரு இயந்திரம் நிச்சயமாக முடியும்.
சேமிப்பதற்கான முன் செயலிகள்
நாங்கள் அடுத்த சிறந்த விஷயத்திற்கு திரும்பினோம்: கருவிகள். குறிப்பாக, சாஸ், எஸ்சிஎஸ்எஸ், லெஸ் மற்றும் பல போன்ற CSS முன்செயலிகள். இந்த கருவிகளில் நாம் தொகுக்கும் நேரத்தில் பயன்படுத்தக்கூடிய சீரற்ற செயல்பாடுகளை வழங்கும் கணித தொகுதிகள் அடங்கும்.
முந்தைய பத்தியில் உள்ள முக்கிய சொற்றொடர் “தொகுக்கும் நேரத்தில்.“ஆம், நாங்கள் எங்கள் CSS பண்புகளுக்கு சீரற்ற மதிப்புகளை உருவாக்குகிறோம். ஆனால் தொகுக்கும் நேரத்தில் அந்த மதிப்புகள் உருவாக்கப்பட்டவுடன், அவை நிரந்தரமாக உறைந்திருக்கும் (அல்லது துல்லியமாக அடுத்த தொகுக்கும் வரை). ஆம்பரில் சிக்கிய கொசுவைப் போல.
CSS உருவாக்கப்படும்போது மதிப்புகள் சீரற்றதாக இருக்கும், ஆனால் ஒவ்வொரு முறையும் பார்வையாளர்கள் பக்கத்தைப் பார்வையிடும்போது அல்லது புதுப்பிக்கும்போது, அவர்கள் அதே மதிப்புகளைப் பெறுவார்கள். புதிய மதிப்புகளை உருவாக்க, நடை தாள்களை மீண்டும் தொகுக்க வேண்டும்.
இது ஸ்டைல் ரேண்டமைசேஷன் நோக்கிய ஒரு சிறிய படியாகும், ஆனால் இன்னும் செல்ல வேண்டிய தூரம் நிறைய உள்ளது.
சர்வர் பக்க சீரற்றமயமாக்கல்
நான் அடுத்த சிறந்த விஷயத்திற்குச் சென்றேன்: சீரற்ற மதிப்புகளை உருவாக்க மற்ற மொழிகளைப் பயன்படுத்தி அவற்றை HTML வழியாக CSS க்கு அனுப்புகிறேன். PHP, Java, ASP மற்றும் பிற சேவையக மொழிகள் HTML ஐ உருவாக்கும் போது (அல்லது CSS கூட) இந்த பணிக்கு சரியானவை.
இந்த அணுகுமுறை நன்றாக வேலை செய்கிறது: ஒவ்வொரு முறையும் பக்கம் உருவாக்கப்படும்போது புதிய சீரற்ற மதிப்புகளைப் பெறுகிறோம், இது பொதுவாக ஒவ்வொரு முறை பார்வையிடப்படும் அல்லது புதுப்பிக்கப்படும். எங்கள் சொந்த செயல்பாடுகளை நாங்கள் செயல்படுத்த முடியும் என்பதால், சீரற்றமயமாக்கலின் மீது முழு கட்டுப்பாட்டையும் நாங்கள் கொண்டுள்ளோம்.
இதில் குறைபாடுகளும் உண்டு. புதிய உள்ளடக்கம் மாறும் வகையில் பக்கத்தில் சேர்க்கப்பட்டால், ஆரம்பப் பக்க ஏற்றத்தின் போது உருவாக்கப்பட்ட “உறைந்த” மதிப்புகளுடன் அது சிக்கியிருக்கும். வடிவங்களை விட சிறந்தது, முன்செயலிகளை விட சிறந்தது…ஆனால் இன்னும் சரியாக இல்லை.
ஒற்றை-பக்க பயன்பாடுகள் மற்றும் கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளின் வளர்ச்சி மற்றும் பரவலான தத்தெடுப்புடன் இந்த வரம்பு இன்னும் பெரிய சிக்கலாக மாறியுள்ளது.
மற்றும் ஜாவாஸ்கிரிப்ட்… இறுதியாக!
வலை பயன்பாடுகளின் பெருக்கத்துடன், ஜாவாஸ்கிரிப்ட்டுக்கு தோராயமாக நகர்த்துவது அர்த்தமுள்ளதாக இருந்தது. மொழி ஏற்கனவே பரவலாகப் பயன்படுத்தப்படுகிறது, மேலும் கலவையில் சில சீரற்ற செயல்பாடுகளைச் சேர்ப்பது நீண்டதாகத் தெரியவில்லை.
ஜாவாஸ்கிரிப்ட் இறுதியாக அதைத் தீர்த்தது! முதன்முறையாக, பாணிகள் உண்மையில் இயற்கையான மாறுபாடுகளுடன் செயல்படலாம்: சீரற்ற உருவாக்கம், புதுப்பித்தல் மற்றும் பிறழ்வு.
இது பல வழிகளிலும் செய்யப்படலாம்: கட்டமைப்புகள், CSS-in-JS நூலகங்கள் அல்லது எளிய ஜாவாஸ்கிரிப்ட் ஆகியவற்றைப் பயன்படுத்துதல். இந்த மொழியின் மூலம் பாணியை உட்பொதிக்கும் முறைகள் பரந்தவை மற்றும் நன்கு ஆதரிக்கப்படுகின்றன. சில செயல்திறன் மற்றும் சிக்கலான கவலைகள் உள்ளன, ஆனால் ஜாவாஸ்கிரிப்ட் வேலையைச் செய்கிறது.
நாங்கள் இறுதியாக இணைய பாணிகளில் உண்மையான சீரற்றமயமாக்கலைப் பெற்றோம்… CSS இல் இல்லை.
ஒரு இணைய பிரச்சனை மற்றும் ஒரு இணைய தீர்வு
கடைசி பகுதி முக்கியமானது. இணையத்தில் ரேண்டமைசேஷன் உள்ளது (ஜாவாஸ்கிரிப்ட் அதன் வேலையைச் செய்கிறது), ஆனால் ஏதோ சரியாகத் தெரியவில்லை. ஏதோ சரியாகத் தெரியவில்லை. அடிப்படையில், இந்த அசௌகரியம் இரண்டு விஷயங்களில் இருந்து வருகிறது:
- அறிவிப்புச் சிக்கலுக்கு ஒரு கட்டாயத் தீர்வைப் பயன்படுத்துகிறோம்.
- தளவமைப்பு முடிவுகளை CSS இலிருந்து JavaScriptக்கு நகர்த்துகிறோம்.
ஒரு அறிவிப்பு சிக்கலுக்கு ஒரு கட்டாய தீர்வு
CSS என்பது கவனம் செலுத்தும் ஒரு அறிவிப்பு மொழி என்று நான் முன்பே குறிப்பிட்டேன் என்னஜாவாஸ்கிரிப்ட் ஒரு கட்டாய மொழியாகும், அது கவனம் செலுத்துகிறது எப்படி.
ரேண்டமைசேஷனை ஜாவாஸ்கிரிப்ட்டுக்கு நகர்த்துவதன் மூலம், நாங்கள் பதிலளிக்க முயற்சிக்கிறோம் என்ன ஒரு உடன் கேள்வி எப்படி பதில் இது வேலை செய்கிறது, ஆனால் அது சிறந்ததல்ல.
JavaScript ஐப் பயன்படுத்தி, அனைத்து நிலைகளிலும் நடை சீரற்ற தன்மையை நாங்கள் இறுதியாக அடைந்தோம்: பக்கம் உருவாக்கப்படும் போது, அது புதுப்பிக்கப்படும் போது மற்றும் கூறுகள் சேர்க்கப்படும் போது அல்லது மாற்றப்படும் போது (பிறழ்வு). ஆனால் அவ்வாறு செய்யும்போது, நாம் முறைமையை உடைக்கிறோம்.
CSS தளவமைப்பைக் கையாளுகிறது மற்றும் ஜாவாஸ்கிரிப்ட் தர்க்கத்தைக் கையாளுகிறது. தளவமைப்பு முடிவுகளை JavaScriptக்கு நகர்த்துவதன் மூலம் CSS வரம்பை நாங்கள் தீர்த்தோம், இது நுட்பமான “இது சரியாக இல்லை” என்ற உணர்வை உருவாக்கும் பொருந்தாத தன்மையை உருவாக்குகிறது – எல்லாம் தொழில்நுட்ப ரீதியாக வேலை செய்தாலும் கூட.
CSS தீர்வு
இந்த மாதிரி பொருத்தமின்மைக்கான தீர்வு எளிதானது: சீரற்றமயமாக்கலை CSSக்கு நகர்த்தவும். தளவமைப்புச் சிக்கலை வேறொரு கருவி அல்லது மொழிக்கு வழங்குவதற்குப் பதிலாக, தளவமைப்பு லேயரில் நேரடியாகத் தீர்க்கவும். நிலை 5 CSS அலகுகள் மற்றும் மதிப்புகள் தொகுதியின் ஒரு பகுதியாக இரண்டு புதிய சீரற்ற செயல்பாடுகளை அறிமுகப்படுத்தியதன் மூலம் இது நடந்தது:
random(): குறைந்தபட்சம் மற்றும் அதிகபட்சம் இடையே சீரற்ற மதிப்பை உருவாக்குகிறது.random-item(): கொடுக்கப்பட்ட பட்டியலிலிருந்து சீரற்ற மதிப்பைத் தேர்ந்தெடுக்கிறது.
இந்த அணுகுமுறையும் ஒத்துப்போகிறது குறைந்தபட்ச சக்தியின் விதிஒரு குறிப்பிட்ட நோக்கத்திற்குப் பொருத்தமான குறைந்த சக்தி வாய்ந்த மொழியைத் தேர்ந்தெடுக்க பரிந்துரைக்கிறது. நடைமுறையில், இது ஒரு சிக்கலை வெளிப்படுத்தும் மற்றும் தீர்க்கும் திறன் கொண்ட குறைந்த சக்திவாய்ந்த மொழியைப் பயன்படுத்தி அதைத் தீர்ப்பதாகும்.
பொதுவாக அந்த மொழி பணிக்கு மிகவும் பொருத்தமானதாக இருக்கும். அதன் அம்சங்கள் அவை பயன்படுத்தப்படும் நிலைக்கு ஏற்றவாறு மாற்றியமைக்கப்படும், மேலும் அவை எளிமையானதாகவும், திறமையானதாகவும், அதிக செயல்திறன் கொண்டதாகவும் இருக்கும். மிகவும் சக்திவாய்ந்த மொழி நிச்சயமாக வேலையைச் செய்ய முடியும் என்றாலும், அது பெரும்பாலும் சிக்கலான மற்றும் சுருக்கத்தின் தேவையற்ற அடுக்கை அறிமுகப்படுத்துகிறது.
இணைய தளத்தில், எங்களிடம் உள்ளது HTML கட்டமைப்பிற்கு (குறைந்தபட்ச வலிமை), CSS பாணி மற்றும் தோற்றத்திற்காக (வலுவானது) மற்றும் ஜாவாஸ்கிரிப்ட் (குறிப்பிடத்தக்க வலிமையானது). CSS இல் சீரற்றமயமாக்கலைச் செயல்படுத்துவதன் மூலம், குறைந்தபட்ச சக்தி விதிக்குக் கீழ்ப்படிந்து, தீர்வை பொருத்தமான அடுக்குக்கு நகர்த்துகிறோம்.
புதிய சீரற்ற CSS செயல்பாடுகள் மிக முக்கியமானதாக இருப்பதற்கான காரணங்களில் இதுவும் ஒன்றாகும்… மேலும் அவை ஏன் அதிகம் பிரதிநிதித்துவப்படுத்துகின்றன மற்றொரு அம்சம்.
பெரிய விஷயம்
CSS எப்போதுமே வடிவமைப்பால் தீர்மானிக்கப்படுகிறது, மேலும் அந்த பாரம்பரியத்துடன் பூர்வீக சீரற்ற தன்மை உடைகிறது. இது மற்றொரு அம்சம் அல்ல, இது CSS ஐ ஒரு மொழியாகவும் இணைய தளமாகவும் நாம் எப்படி நினைக்கிறோம் என்பதில் ஒரு மாற்றம்.
முதன்முறையாக, CSS ஆனது இயற்கை அமைப்புகளை நேரடியாக மாறுபாடுகளுடன் மாதிரியாக்க முடியும்: ஹேக்குகள் இல்லை, கருவிகள் இல்லை, பிற மொழிகளுக்கு தளவமைப்பு முடிவுகளை அவுட்சோர்சிங் செய்யக்கூடாது. ரேண்டமைசேஷன் ஸ்டைலிங் லேயரில் பெருமை கொள்கிறது, அது எப்போதும் சேர்ந்தது.
இது ஆக்கப்பூர்வமான சாத்தியக்கூறுகளைத் திறக்கிறது: உருவாக்கும் மொக்கப்கள், ஆர்கானிக் டிசைன்கள், விளையாட்டுத்தனமான மைக்ரோ-இன்டராக்ஷன்கள் மற்றும் உயிரோட்டமாகவும் தனித்துவமாகவும் உணரும் வடிவமைப்பு அமைப்புகள். ஆனால் இது கட்டடக்கலை தெளிவை மீட்டெடுக்கிறது: நெட்வொர்க்கின் ஒவ்வொரு அடுக்கும் மீண்டும் வடிவமைக்கப்பட்ட வேலையைச் செய்கிறது.
இந்த மாற்றத்தின் மூலம், CSS முற்றிலும் ஒரு ஸ்டைலிங் மொழியாக இருந்து ஒரு உருவாக்கும் தளவமைப்பு அமைப்பாக மாறுகிறது. வலை வளர்ச்சியில் இது ஒரு செயலற்ற நடிகர் அல்ல; ரெண்டரிங் செயல்பாட்டில் செயலில் பங்கேற்பாளராகி, உலாவி ஒரு உறுதியான பக்கமாகத் தீர்க்கக்கூடிய சாத்தியமான முடிவுகளின் இடத்தை வரையறுக்கிறது.
அதுதான் உண்மையான பெரிய பிரச்சனை. பூர்வீக சீரற்ற தன்மை என்பது விஷயங்களை வித்தியாசமாக பார்ப்பது மட்டுமல்ல; இது தளத்தை மிகவும் ஒத்திசைவானதாகவும் வெளிப்பாடாகவும் மாற்றுவதாகும்.
CSS இன்னும் உருவாகி வருகிறது என்பதையும், சில சமயங்களில் மக்கள் புறக்கணிக்கும் அம்சங்கள் ஒரு மொழியைப் பற்றி நாம் நினைக்கும் விதத்தையும் இணையத்தில் நாம் கற்பனை செய்வது சாத்தியமாகிறது என்பதையும் இது நினைவூட்டுகிறது.
Leave a Reply