நான் CSS பரிணாமங்களை வகைகளாகப் பிரித்தால், நாம் எதிர்காலத்தில் வாழ்கிறோம் என உணர எல்லை-ஆரம் மட்டும் கேட்ட நாட்களைத் தாண்டி நகர்ந்துவிட்டோம். காட்சி அடுக்கை மட்டும் மாற்றி அமைக்காத கருவிகளை பிளாட்ஃபார்ம் நமக்கு வழங்கும் ஒரு தருணத்தில் நாங்கள் தற்போது வாழ்ந்து வருகிறோம், ஆனால் நாம் எப்படி இடைமுகங்களை உருவாக்குகிறோம் என்பதை அடிப்படையில் மறுவரையறை செய்கிறோம். 2024 இல் அறிவிக்கப்பட்ட அம்சங்களின் எண்ணிக்கையை முதலிட முடியாது என்று நினைத்தேன். நான் ஒருபோதும் மகிழ்ச்சியாக தவறாக இருந்ததில்லை.
Chrome குழுவின் “CSS Wrapped 2025” அம்சங்களின் பட்டியல் மட்டுமல்ல; இது ஒரு மாறும், சொந்த வலைக்கான அறிக்கை. "CSS5" காலங்களை வரையறுப்பதில் இருந்து நவீன தளவமைப்புப் பயன்பாடுகளின் நுணுக்கங்கள் வரை - இந்த பரிணாமங்களை ஆவணப்படுத்த சில வருடங்கள் செலவழித்த ஒருவர் என்ற முறையில், இந்த ஆண்டு முடிவடைவதை நான் மிகுந்த உற்சாகத்துடன் பார்க்கிறேன். "உகந்த பணிச்சூழலியல்" மற்றும் "அடுத்த தலைமுறை இடைவினைகள்" ஆகியவற்றை நோக்கிய மாற்றத்தை நாங்கள் காண்கிறோம், இது குறியீட்டை எதிர்த்துப் போராடுவதை நிறுத்தி, அவற்றின் இயல்பான நிலையில் இடைமுகங்களைச் செதுக்கத் தொடங்க அனுமதிக்கிறது.
இந்தக் கட்டுரையில், எனது சமீபத்திய சோதனைகள் மற்றும் இயங்குதளத்தின் எதிர்காலத்திற்கான நம்பிக்கைகளின் லென்ஸ் மூலம் பார்க்கப்பட்ட Chrome இன் அறிக்கையிலிருந்து தனித்துவமான அம்சங்களைப் பற்றிய விரிவான தோற்றத்தை நீங்கள் காணலாம்.
கூறு புரட்சி: இறுதியாக, ஒரு நேட்டிவ் தனிப்பயனாக்கக்கூடிய தேர்வு
பல ஆண்டுகளாக, டிராப் டவுன்களை ஸ்டைல் செய்ய கனமான ஜாவாஸ்கிரிப்ட் லைப்ரரிகளை நாங்கள் நம்பியுள்ளோம், இது "பத்தாண்டுகள் பழமையான பிரச்சனை" ஆகும், இது மேடையில் இறுதியாக தீர்க்கப்பட்டது. தனிப்பயனாக்கக்கூடிய தேர்வின் (மற்றும் தொடர்புடைய கட்டுரைகள்) வரலாற்றில் நான் விரிவாகக் கூறியது போல், இது திறந்த UI,
படங்கள் அல்லது கொடிகள் போன்ற சிறந்த உள்ளடக்கத்தை விருப்பங்களுக்குள் அனுமதிக்கும் அருமையான சேர்த்தல் மிகவும் வேடிக்கையாக உள்ளது. இப்போதெல்லாம் நாம் அனைத்து வகையான தேர்வுகளையும் உருவாக்கலாம்:
டெமோ: நான் ஒரு Poké-சாகச டெமோவை உருவாக்கியுள்ளேன், புதிய
விருப்பங்களின் உள்ளே உள்ள படங்களுடன் கூடிய பேனா A தனிப்பயனாக்கக்கூடிய தேர்வையும், utilitybend மூலம் தேர்ந்தெடுக்கப்பட்ட உள்ளடக்கத்தையும் [forked] பார்க்கவும்.
டெமோ: போலி உறுப்புகளுடன் தேர்ந்தெடுக்கப்பட்டதை ஸ்டைலிங் செய்வது பற்றிய விரிவான பார்வை.
யூடிலிட்டிபென்ட் மூலம் போலி உறுப்புகள் [ஃபோர்க் செய்யப்பட்ட] கொண்ட தனிப்பயனாக்கக்கூடிய பேனாவைப் பார்க்கவும்.
டெமோ: அல்லது ஆப்ட்குரூப்களைப் பயன்படுத்தி இந்த மெனு தேர்வு டெமோ மூலம் நீங்கள் அதை ஒரு உச்சநிலையை உயர்த்தலாம்.
ஆப்ட்குரூப்களுடன் [ஃபோர்க் செய்யப்பட்ட] பேனா உண்மையான தேர்வு மெனுவைப் பார்க்கவும். இந்த அம்சம் மட்டுமே படிவங்களை எவ்வாறு உருவாக்குவது, சார்புநிலைகள் மற்றும் தொழில்நுட்பக் கடனைக் குறைப்பது போன்றவற்றில் பாரிய மாற்றத்தைக் குறிக்கிறது. ஸ்க்ரோல் மார்க்கர்கள் மற்றும் ஜாவாஸ்கிரிப்ட் கொணர்வியின் மரணம் கொணர்விகளை உருவாக்குவது வரலாற்று ரீதியாக டெவலப்பர்கள் மற்றும் வாடிக்கையாளர்களுக்கு இடையே உராய்வுப் புள்ளியாக இருந்து வருகிறது. வாடிக்கையாளர்கள் அவர்களை விரும்புகிறார்கள், டெவலப்பர்கள் ஜாவாஸ்கிரிப்டை அணுகுவதற்கும் செயல்திறன் மிக்கதாகவும் மாற்றுவதற்கு பயப்படுகிறார்கள். :: scroll-marker மற்றும் :: scroll-button() போலி உறுப்புகளின் வருகை இந்த டைனமிக்கை முழுவதுமாக மாற்றுகிறது. இந்த அம்சங்கள், நேவிகேஷன் டாட்கள் மற்றும் ஸ்க்ரோல் பட்டன்களை முற்றிலும் CSS மூலம் உருவாக்க அனுமதிக்கின்றன. எனது வலைப்பதிவில் நான் எழுதியது போல், இது முதல் ஸ்லைடில் காதல். ஜாவாஸ்கிரிப்ட்டின் ஒரு வரி இல்லாமல் முழு செயல்பாட்டு, அணுகக்கூடிய ஸ்லைடரை உருவாக்கும் திறன் வசதியானது அல்ல; இது செயல்திறனுக்கான வெற்றி. இந்த அம்சத்தைச் சுற்றி சில அணுகல்தன்மைக் கவலைகள் உள்ளன, இவை செல்லுபடியாகும் என்றாலும், டெவலப்பர்கள் அதைச் செயல்படுத்துவதற்கு ஒரு வழி இருக்கலாம். நல்ல விஷயம் என்னவென்றால், இந்த UI மாற்றங்கள் அனைத்தும் தனிப்பயன் DOM கையாளுதல் மற்றும் ஏரியா குறிச்சொற்களை சுற்றி இழுப்பதை விட மிகவும் எளிதாக்குகிறது, ஆனால் நான் திசைதிருப்புகிறேன்… நாம் இப்போது ஸ்க்ரோல்-மார்க்கர்-குரூப்பைப் பயன்படுத்தி குறிப்பான்களைத் தானாகக் குழுவாக்கலாம் மற்றும் பொத்தான்களை நங்கூரம் பொருத்துதல்களைப் பயன்படுத்தி அவற்றை நாம் விரும்பும் இடத்தில் வைக்கலாம்.
.கொணர்வி { overflow-x: ஆட்டோ; உருள்-குறிப்பான்-குழு: பிறகு; /* புள்ளிகளுக்கான கொள்கலனை உருவாக்குகிறது */
/* பொத்தான்களை உருவாக்கவும் */ &::சுருள் பொத்தான்(இன்லைன்-எண்ட்),&::ஸ்க்ரோல்-பொத்தான்(இன்லைன்-ஸ்டார்ட்) { உள்ளடக்கம்: ""; நிலை: முழுமையான; /* அவற்றை மையப்படுத்த நங்கூரம் பொருத்துதலைப் பயன்படுத்தவும் */ நிலை-நங்கூரம்: --கொணர்வி; மேல்: நங்கூரம்(மையம்); }
/* குழந்தைகளில் குறிப்பான்களை உருவாக்கவும் */ பிரிவு { &::சுருள் குறிப்பான் { உள்ளடக்கம்: ""; அகலம்: 24px; எல்லை-ஆரம்: 50%; கர்சர்: சுட்டி; } /* செயலில் உள்ள மார்க்கரை முன்னிலைப்படுத்தவும் */ &::scroll-marker:target-current { பின்னணி: வெள்ளை; } } }
டெமோ: பொத்தான்களை வைக்க ஆங்கர் பொசிஷனிங்கைப் பயன்படுத்தி முற்றிலும் HTML மற்றும் CSS இல் இருந்து ஒரு கொணர்வியை உருவாக்குவது எனது சோதனை.
utilitybend மூலம் Pen Carousel Pure HTML மற்றும் CSS [forked] ஐப் பார்க்கவும்.
டெமோ: ஒரு Webshop ஸ்லிக் ஸ்லைடர் ரீமேக், attr() ஐப் பயன்படுத்தி பின்னணி படங்களை மாறும் வகையில் குறிப்பான்களுக்குள் இழுக்க.
பென் வெப்ஷாப் ஸ்லிக் ஸ்லைடர் ரீமேக்கை CSS இல் [forked] யூட்டிலிட்டி பென்ட் மூலம் பார்க்கவும். மாநில கேள்விகள்: ஒட்டும் விஷயம் சிக்கியுள்ளதா? ஸ்னாப்பி விஷயம் ஸ்னாப்டா? நீண்ட காலமாக, IntersectionObserver ஹேக்குகளை நம்பாமல், "ஒட்டும் பொருள் சிக்கியிருக்கிறதா" அல்லது "ஸ்னாப்பி உருப்படி ஸ்னாப் செய்யப்பட்டதா" என்பதை அறியும் திறன் எங்களிடம் இல்லை. குரோம் 133 ஸ்க்ரோல்-ஸ்டேட் வினவல்களை அறிமுகப்படுத்தியது, இந்த நிலைகளை அறிவிப்பு முறையில் வினவ அனுமதிக்கிறது. கன்டெய்னர் வகை: ஸ்க்ரோல்-ஸ்டேட் அமைப்பதன் மூலம், குழந்தைகள் சிக்கிக்கொண்டார்களா, துண்டிக்கப்பட்டிருக்கிறார்களா அல்லது நிரம்பி வழிகிறார்களா என்பதன் அடிப்படையில் இப்போது குழந்தைகளை ஸ்டைல் செய்யலாம். இது 2023 CSS நாளிலிருந்து நான் ஆவலுடன் காத்திருக்கும் மிகப்பெரிய "வாழ்க்கைத் தரம்" மேம்பாடாகும். ஸ்க்ரோலின் திசையையும் நாம் பார்க்க முடியும் என்பதால், இது நிறைய வளர்ச்சியடைந்துள்ளது, அருமை! ஒரு எளிய உதாரணத்திற்கு: ஒரு தலைப்பில் நிழலைப் பயன்படுத்த முடியும், அது உண்மையில் வியூபோர்ட்டின் மேற்புறத்தில் ஒட்டிக்கொண்டிருக்கும் போது மட்டுமே: .தலைப்பு கொள்கலன் { கொள்கலன்-வகை: உருள்-நிலை; நிலை: ஒட்டும்; மேல்: 0;
தலைப்பு { மாற்றம்: பெட்டி-நிழல் 0.5s ஈஸி-அவுட்; /* வினவல் கொள்கலனின் நிலையை சரிபார்க்கிறது */ @container scroll-state(சிக்கப்பட்டது: மேல்) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
டெமோ: ஒரு ஒட்டும் தலைப்பு, அது நிஜமாகவே ஒட்டிக்கொண்டிருக்கும் போது மட்டுமே நிழலைப் பயன்படுத்துகிறது.
ஸ்க்ரோல்-ஸ்டேட் வினவலுடன் கூடிய பென் ஸ்டிக்கி ஹெடர்களைப் பார்க்கவும், ஸ்டிக்கி எலிமென்ட் யூட்டிலிட்டிபென்ட் மூலம் சிக்கியுள்ளதா என்பதைச் சரிபார்க்கவும்.
டெமோ: ஒரு போகிமொன்-கருப்பொருள் பட்டியல், ஸ்க்ரோல்-ஸ்டேட் வினவல்களை ஆங்கர் பொசிஷனிங்குடன் இணைந்து தற்போது ஸ்னாப் செய்யப்பட்ட எழுத்துக்கு மேல் ஒரு சட்டத்தை நகர்த்துகிறது.
CSS, Pokemon பதிப்பு [forked] மூலம் utilitybend மூலம் ஸ்னாப் செய்யப்பட்ட உருப்படியை சரிபார்க்க Pen Scroll-state வினவலைப் பார்க்கவும். உகந்த பணிச்சூழலியல்: CSS இல் தர்க்கம் CSS இன் "உகந்த பணிச்சூழலியல்" பிரிவு, எங்கள் பணிப்பாய்வுகளை மிகவும் உள்ளுணர்வாக மாற்றும் அம்சங்களை சிறப்பித்துக் காட்டுகிறது. தர்க்கத்தை நாம் எப்படி எழுதுகிறோம் என்பதற்கு மூன்று அம்சங்கள் மாற்றமடைகின்றன:
if() அறிக்கைகள் இறுதியாக CSS இல் நிபந்தனைகளைப் பெறுகிறோம். if() செயல்பாடு ஸ்டைல்ஷீட்களுக்கான ஒரு மும்முனை ஆபரேட்டராக செயல்படுகிறது, இது மீடியா, ஆதரவு அல்லது இன்லைனில் உள்ள பாணி வினவல்களின் அடிப்படையில் மதிப்புகளைப் பயன்படுத்த அனுமதிக்கிறது. இது ஒற்றை சொத்து மாற்றங்களுக்கு verbose @media blocks தேவையை குறைக்கிறது. @செயல்பாட்டு செயல்பாடுகள் நாம் இறுதியாக சில தர்க்கங்களை வேறு இடத்திற்கு நகர்த்தலாம், இதன் விளைவாக சில தூய்மையான கோப்புகள், உண்மையான வாழ்க்கைத் தரம். sibling-index() மற்றும் sibling-count()இந்த மரம்-எண்ணும் செயல்பாடுகள் பட்டியல் அளவின் அடிப்படையில் அதிர்ச்சியூட்டும் அனிமேஷன்கள் அல்லது ஸ்டைலிங் உருப்படிகளின் சிக்கலை தீர்க்கிறது. CSS உடன் உடன்பிறப்புகளை ஸ்டைலிங் செய்வதில் நான் ஆராய்ந்தது போல், இது எங்கள் HTML இல் தனிப்பயன் பண்புகளை (--index: 1 போன்றவை) கடின-குறியீடு செய்வதற்கான தேவையை நீக்குகிறது.
எடுத்துக்காட்டு: தளவமைப்புகளைக் கணக்கிடுதல் நாம் இப்போது சுருக்கமான கணித சூத்திரங்களை எழுதலாம். எடுத்துக்காட்டாக, திரையில் நுழையும் அட்டைகளுக்கான அனிமேஷனை திகைக்க வைப்பது அற்பமானது: .card-container > * { அனிமேஷன்: 0.6s ஈஸி-அவுட் முன்னோக்கிகளை வெளிப்படுத்துதல்; /* மேலும் கையேடு --குறியீட்டு மாறிகள் இல்லை! */ அனிமேஷன்-தாமதம்: calc(sibling-index() * 0.1s); }
எந்த ஜாவாஸ்கிரிப்ட் இல்லாமல் உருப்படிகளை ஒரு சரியான வட்டத்தில் வைக்க முக்கோணவியலுடன் இந்த செயல்பாடுகளைப் பயன்படுத்துவதையும் நான் பரிசோதித்தேன்.
டெமோ: திகைப்பூட்டும் கார்டு அனிமேஷன்கள் மாறும்.
sibling-index() [forked] by utilitybend ஐப் பயன்படுத்தி பென் ஸ்டாக்கர் கார்டுகளைப் பார்க்கவும்.
டெமோ: sibling-index, sibling-count மற்றும் புதிய CSS @function அம்சத்தைப் பயன்படுத்தி உருப்படிகளை சரியான வட்டத்தில் வைப்பது.
சிப்லிங்-இன்டெக்ஸ், சிப்லிங்-கவுண்ட் மற்றும் யூடிலிட்டிபென்ட் மூலம் [ஃபோர்க் செய்யப்பட்ட] செயல்பாடுகளைப் பயன்படுத்தி பென் தி வட்டத்தைப் பார்க்கவும். எனது CSS செய்ய வேண்டிய பட்டியல்: நான் முயற்சி செய்ய காத்திருக்க முடியாத அம்சங்கள் தேர்வுகள் மற்றும் மாற்றங்களைச் செதுக்குவதில் நான் மும்முரமாக இருக்கும்போது, "CSS Wrapped 2025" அறிக்கையானது மற்ற இன்னபிற பொருட்களால் நிரம்பியுள்ளது, இது இன்னும் CodePen இல் சுடுவதற்கான வாய்ப்பைப் பெறவில்லை. எனது அடுத்த சோதனைகளுக்கான பட்டியலில் இவை அதிகம்: தொகுக்கப்பட்ட கொள்கலன் வினவல்கள் எனது கொணர்வி டெமோவில் உள்ள பொத்தான்களுக்கு நான் CSS ஆங்கர் பொசிஷனிங்கைப் பயன்படுத்தினேன், ஆனால் "CSS மூடப்பட்டது"இதன் பரிணாமம்: தொகுக்கப்பட்ட கொள்கலன் வினவல்கள். டூல்டிப்களில் நாம் அனைவரும் எதிர்கொள்ளும் சிக்கலை இது தீர்க்கிறது: இட நெருக்கடியின் காரணமாக உலாவி டூல்டிப்பை மேலிருந்து கீழாக புரட்டினால், "அம்பு" பெரும்பாலும் தவறான வழியை சுட்டிக்காட்டுகிறது. தொகுக்கப்பட்ட கொள்கலன் வினவல்களுடன் (@கன்டெய்னர் நங்கூரமிடப்பட்டது(ஃபால்பேக்: ஃபிளிப்-பிளாக்)), உலாவி உண்மையில் எந்த ஃபால்பேக் நிலையைத் தேர்ந்தெடுத்தது என்பதன் அடிப்படையில் உறுப்பை நாம் ஸ்டைல் செய்யலாம். உள்ளமை காட்சி மாற்றம் குழுக்கள் காட்சி மாற்றங்கள் ஒரு புரட்சி, ஆனால் அவை ஒரு குறிப்பிட்ட வர்த்தக பரிமாற்றத்துடன் வந்தன: அவை உறுப்பு மரத்தை சமன் செய்தன, இது பெரும்பாலும் 3D உருமாற்றங்கள் அல்லது வழிதல்: கிளிப். அது எதையாவது தவறவிட்டதாக எனக்கு எப்போதும் ஒரு உணர்வு இருந்தது, இதுவே பதில். View-transition-group: nearest ஐப் பயன்படுத்துவதன் மூலம், இறுதியாக நாம் ஒருவருக்கொருவர் மாற்றக் குழுக்களை உருவாக்கலாம். மாற்றத்தின் போது கிளிப்பிங் விளைவுகள் அல்லது 3D சுழற்சிகளைப் பராமரிக்க இது நம்மை அனுமதிக்கிறது - இது முன்னர் சாத்தியமற்றது, ஏனெனில் உறுப்புகள் மேல் மட்டத்திற்கு ஏற்றப்பட்டன. .கார்டு img { காட்சி-மாற்றம்-பெயர்: புகைப்படம்; காட்சி-மாற்றம்-குழு: அருகில்; /* கூடு கட்டி வையுங்கள்! */ }
அச்சுக்கலை மற்றும் வடிவங்கள் இறுதியாக, என்னில் உள்ள பணிச்சூழலியல் நிபுணர் டெக்ஸ்ட் பாக்ஸ் டிரிம்மை முயற்சி செய்கிறார், இது உரை உள்ளடக்கத்திற்கு மேலேயும் கீழேயும் உள்ள எரிச்சலூட்டும் கூடுதல் இடைவெளியை நீக்கி, இறுதியாக சரியான செங்குத்து சீரமைப்பை அடைய உறுதியளிக்கிறது. மேலும் ஆக்கப்பூர்வமான பக்கத்திற்கு, மூலை-வடிவம் மற்றும் வடிவம்() செயல்பாடு ஆகியவை செவ்வக வடிவமற்ற தளவமைப்புகளைத் திறந்து, CSS மாறிகளுக்கு பதிலளிக்கும் "squaricles" மற்றும் சிக்கலான பாதைகளை அனுமதிக்கிறது. அப்படிச் சொல்லப்பட்டால், அணில்கள் நிறைந்த வடிவமைப்பைக் கொண்டிருக்க என்னால் காத்திருக்க முடியாது! ஒரு நம்பிக்கையான எதிர்காலம் CSS ஆனது ஜாவாஸ்கிரிப்ட்டுக்கு முன்பு இருந்த தர்க்கம், நிலை மற்றும் சிக்கலான இடைவினைகளைக் கையாளும் திறன் கொண்ட ஒரு உலகத்தை நாங்கள் காண்கிறோம். மூவ் பிஃபோர் (இஃப்ரேம்கள்/வீடியோக்களுக்கான DOM நிலையைப் பாதுகாத்தல்) மற்றும் attr() (வண்ணங்கள் மற்றும் கட்டங்களுக்கான சரங்களைத் தாண்டிய வகைகளைப் பயன்படுத்துதல்) போன்ற அம்சங்கள் இந்த யதார்த்தத்தை மேலும் உறுதிப்படுத்துகின்றன. இந்த அம்சங்களில் சில தற்போது சோதனை அல்லது Chrome க்கு குறிப்பிட்டதாக இருந்தாலும், வேகம் மறுக்க முடியாதது. இந்த திறன்கள் அடிப்படையாக இருப்பதை உறுதிசெய்ய, Interop போன்ற முயற்சிகள் மூலம் அனைத்து உலாவிகளிலும் தொடர்ந்து ஆதரவை எதிர்பார்க்கிறோம். "Chrome first" இல் இந்த அற்புதமான அம்சங்களைக் கொண்டிருப்பது போலவே, உலாவி என்ஜின்களைக் கொண்டிருப்பது மிகவும் முக்கியமானது என்று கூறப்படுகிறது. இந்த புதிய அம்சங்கள் உலாவிகளில் இறங்குவதற்கு முன் விவாதிக்கப்பட வேண்டும், டிங்கர் செய்யப்பட வேண்டும் மற்றும் சோதிக்கப்பட வேண்டும். CSS இல் சேர இது ஒரு அருமையான தருணம். நாங்கள் இனி வெறும் ஸ்டைலிங் ஆவணங்கள் அல்ல; முன்னெப்போதையும் விட சக்திவாய்ந்த ஒரு சொந்த கருவித்தொகுப்பைக் கொண்டு மாறும், பணிச்சூழலியல் மற்றும் வலுவான பயன்பாடுகளை நாங்கள் உருவாக்குகிறோம். இந்த புதிய சகாப்தத்துடன் சென்று இந்த வார்த்தையை பரப்புவோம். இந்த CSS மூடப்பட்டிருக்கும்!
