මම CSS පරිණාමයන් ප්රවර්ගවලට බෙදන්නේ නම්, අපි අනාගතයේ ජීවත් වන බව දැනීම සඳහා මායිම් අරය ඉල්ලා සිටි දින ඉක්මවා ගොස් ඇත. අපි දැනට ජීවත් වන්නේ දෘශ්ය ස්තරය පමණක් වෙනස් නොකරන නමුත් අපි ගෘහ නිර්මාණ ශිල්පී අතුරුමුහුණත් කරන ආකාරය මූලික වශයෙන් නැවත නිර්වචනය කරන මෙවලම් වේදිකාව අපට ලබා දෙන මොහොතක ය. 2024 දී ප්රකාශයට පත් කළ විශේෂාංග සංඛ්යාව ඉහළට ගෙන යා නොහැකි යැයි මම සිතුවෙමි. මම කවදාවත් මේ තරම් සතුටින් වැරදිලා නැහැ.
Chrome කණ්ඩායමේ "CSS Wrapped 2025" විශේෂාංග ලැයිස්තුවක් පමණක් නොවේ; එය ගතික, ස්වදේශීය වෙබ් සඳහා ප්රකාශනයකි. "CSS5" යුග නිර්වචනය කිරීමේ සිට නවීන පිරිසැලසුම් උපයෝගිතා වල සංකීර්ණතා දක්වා - මෙම පරිණාමයන් ලේඛනගත කිරීමට වසර කිහිපයක් ගත කළ අයෙකු ලෙස මම මේ වසරේ එතුම දෙස විශාල උද්යෝගයකින් බලා සිටිමි. කේතය සමඟ සටන් කිරීම නැවැත්වීමට සහ ඒවායේ ස්වාභාවික තත්ත්වයෙන් අතුරු මුහුණත් මූර්ති කිරීම ආරම්භ කිරීමට අපට ඉඩ සලසන “ප්රශස්ත Ergonomics” සහ “Next-gen අන්තර්ක්රියා” වෙත මාරුවීමක් අපි දකිමු.
මෙම ලිපියෙන්, මගේ මෑත කාලීන අත්හදා බැලීම් සහ වේදිකාවේ අනාගතය පිළිබඳ බලාපොරොත්තු පිළිබඳ කාචය හරහා බැලූ ක්රෝම් වාර්තාවේ කැපී පෙනෙන විශේෂාංග පිළිබඳ සවිස්තරාත්මක බැල්මක් ඔබට සොයාගත හැකිය.
සංරචක විප්ලවය: අවසාන වශයෙන්, ස්වදේශීය අභිරුචිකරණය කළ හැකි තේරීමක්
වසර ගණනාවක් තිස්සේ, අපි ස්ටයිල් ඩ්රොප් ඩවුන් සඳහා බර ජාවාස්ක්රිප්ට් පුස්තකාල මත රඳා සිටිමු, වේදිකාව අවසානයේ විසඳා ඇති “දශක ගණනක් පැරණි ගැටලුවක්”. අභිරුචිකරණය කළ හැකි තේරීමේ (සහ අදාළ ලිපිවල) ඉතිහාසයට ගැඹුරින් කිමිදෙමින් මම විස්තර කළ පරිදි, මෙය විවෘත UI,
පින්තූර හෝ කොඩි වැනි විකල්ප ඇතුළත පොහොසත් අන්තර්ගතයට ඉඩ දීම සඳහා අපූරු එකතු කිරීම විනෝදජනකයි. වර්තමානයේ අපට සියලු වර්ගවල තේරීම් නිර්මාණය කළ හැකිය:
Demo: මම Poké-adventure demo එකක් නිර්මාණය කළේ නව
විකල්පයන් ඇතුළත පින්තූර සහිත Pen A අභිරුචිකරණය කළ හැකි තේරීම සහ utilitybend මගින් තෝරාගත් අන්තර්ගතය [forked] බලන්න.
Demo: ව්යාජ-මූලද්රව්ය සමඟ පමණක් තෝරා ගත් මෝස්තරය පිළිබඳ සවිස්තරාත්මක බැල්මක්.
උපයෝගිතා වංගුව මගින් ව්යාජ මූලද්රව්ය [දෙබලක] පමණක් සහිත අභිරුචිකරණය කළ හැකි පෑන A බලන්න.
Demo: නැතහොත් ඔබට Optgroups භාවිතයෙන් මෙම මෙනු තේරීම් ආදර්ශනය සමඟින් එය ඉහළට ඔසවා තැබිය හැක.
utilitybend මගින් optgroups [forked] සහිත Pen An actual Select Menu බලන්න. මෙම විශේෂාංගය පමණක් අපි ආකෘති ගොඩනඟන ආකාරය, පරායත්තතා සහ තාක්ෂණික ණය අඩු කිරීමෙහි දැවැන්ත වෙනසක් සංඥා කරයි. Scroll Markers සහ The Death Of The JavaScript Carousel කැරොසල් නිර්මාණය කිරීම ඓතිහාසිකව සංවර්ධකයින් සහ සේවාදායකයින් අතර ඝර්ෂණ ලක්ෂ්යයක් වී ඇත. සේවාදායකයින් ඔවුන්ට ආදරය කරයි, සංවර්ධකයින් ඔවුන්ට ප්රවේශ විය හැකි සහ ක්රියාකාරී කිරීමට අවශ්ය JavaScript වලට බිය වෙති. ::scroll-marker සහ ::scroll-button() ව්යාජ මූලද්රව්යවල පැමිණීම මෙම ගතිකත්වය සම්පූර්ණයෙන්ම වෙනස් කරයි. මෙම විශේෂාංග අපට සංචාලන තිත් සහ අනුචලන බොත්තම් සම්පූර්ණයෙන්ම CSS සමඟින්, අනුචලන කන්ටේනරයට දේශීයව සම්බන්ධ කිරීමට ඉඩ දෙයි. මම මගේ බ්ලොග් එකේ ලියා ඇති පරිදි, මෙය පළමු විනිවිදකයේ ආදරයයි. ජාවාස්ක්රිප්ට් එක පේළියක් නොමැතිව සම්පූර්ණ ක්රියාකාරී, ප්රවේශ විය හැකි ස්ලයිඩරයක් නිර්මාණය කිරීමේ හැකියාව පහසු නොවේ; එය කාර්ය සාධනය සඳහා ජයග්රහණයකි. මෙම විශේෂාංගය වටා සමහර ප්රවේශ්යතා ගැටළු ඇති අතර, මේවා වලංගු වුවද, අපට සංවර්ධකයින්ට එය ක්රියාත්මක කිරීමට ක්රමයක් තිබිය හැකිය. හොඳ දෙය නම්, මෙම සියලු UI වෙනස්කම් අභිරුචි DOM හැසිරවීම සහ ඒරියා ටැග් වටා ඇදගෙන යාමට වඩා එය පහසු කරයි, නමුත් මම ඉවත් වෙමි… අපට දැන් ස්ක්රෝල්-මාර්කර්-ගෲප් භාවිතයෙන් ස්වයංක්රීයව මාර්කර් සමූහගත කළ හැකි අතර ඒවා අපට අවශ්ය තැනට හරියටම තැබීමට ඇන්කර් ස්ථානගත කිරීම භාවිතයෙන් බොත්තම් මෝස්තර කළ හැක.
.කැරූසල් { පිටාර ගැලීම-x: ස්වයංක්රීය; අනුචලන සලකුණු-කණ්ඩායම: පසු; /* තිත් සඳහා කන්ටේනරය නිර්මාණය කරයි */
/* බොත්තම් සාදන්න */ &::අනුචලන-බොත්තම(පේළිගත-අවසන්),&::අනුචලන-බොත්තම (පේළිගත-ආරම්භය) { අන්තර්ගතය: ""; තනතුර: නිරපේක්ෂ; /* ඒවා මධ්යගත කිරීමට නැංගුරම් ස්ථානගත කිරීම භාවිතා කරන්න */ පිහිටුම-නැංගුරම: --කැරූසල්; top: anchor(center); }
/* ළමයින් මත සලකුණු සාදන්න */ div { &::scroll-marker { අන්තර්ගතය: ""; පළල: 24px; මායිම් අරය: 50%; cursor: pointer; } /* සක්රීය සලකුණ ඉස්මතු කරන්න */ &::scroll-marker:target-current { පසුබිම: සුදු; } } }
Demo: බොත්තම් තැබීම සඳහා නැංගුරම් ස්ථානගත කිරීම භාවිතා කරමින්, HTML සහ CSS වලින් සම්පූර්ණයෙන්ම කැරොසල් නිර්මාණය කිරීම මගේ අත්හදා බැලීම.
utilitybend මගින් Pen Carousel Pure HTML සහ CSS [forked] බලන්න.
Demo: පසුබිම් රූප ගතිකව මාර්කර් වෙත ඇද ගැනීමට attr() භාවිතයෙන් Webshop ස්ලික් ස්ලයිඩර් ප්රතිනිර්මාණයකි.
utilitybend මගින් CSS [forked] හි Pen Webshop ස්ලික් ස්ලයිඩර් ප්රතිනිර්මාණය බලන්න. රාජ්ය විමසුම්: ඇලෙන සුළු දෙයක් සිරවී තිබේද? Snappy Thing Snapped? IntersectionObserver hacks මත රඳා නොසිට, "ඇලෙන දෙයක් හිරවී තිබේද" හෝ "snappy item එකක් snappedද" කියා දැනගැනීමේ හැකියාව බොහෝ කාලයක් තිස්සේ අපට නොතිබුණි. Chrome 133 අනුචලන-තත්ත්ව විමසුම් හඳුන්වා දුන් අතර, අපට මෙම තත්වයන් ප්රකාශනාත්මකව විමසීමට ඉඩ සලසයි. බහාලුම් වර්ගය: අනුචලන තත්වය සැකසීමෙන්, අපට දැන් ළමයින් සිරවී තිබේද, කඩා වැටී තිබේද, හෝ පිටාර ගලනවාද යන්න මත පදනම්ව ඔවුන්ව හැඩගැන්වීමට හැකිය. මෙය 2023 CSS දිනයේ සිට මම ඉතා ඕනෑකමින් බලා සිටි දැවැන්ත “ජීවිතයේ ගුණාත්මක” වැඩිදියුණු කිරීමකි. අපට අනුචලනයේ දිශාව ද දැකිය හැකි බැවින් එය බොහෝ දුරට පරිණාමය වී ඇත, ආදරණීය! සරල උදාහරණයක් සඳහා: අපට අවසානයේ ශීර්ෂකයට සෙවනැල්ලක් යෙදිය හැක්කේ එය ඇත්ත වශයෙන්ම දර්ශන තොටේ ඉහළට ඇලී සිටින විට පමණි: .ශීර්ෂක බහාලුම් { බහාලුම් වර්ගය: අනුචලන තත්වය; ස්ථානය: ඇලෙන සුළු; ඉහළ: 0;
ශීර්ෂකය { සංක්රමණය: පෙට්ටි-සෙවණ 0.5s පහසුව; /* විමසුම බහාලුම් තත්ත්වය පරීක්ෂා කරයි */ @container scroll-state (හිරවී ඇත: ඉහළ) { පෙට්ටි සෙවන: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: ඇලෙන සුළු ශීර්ෂයක් එය සැබවින්ම සිරවී ඇති විට පමණක් සෙවනැල්ලක් යොදයි.
Scroll-state විමසුම සහිත Pen Sticky Heders බලන්න, utilitybend මගින් ඇලෙන සුළු මූලද්රව්ය සිරවී ඇත්දැයි පරීක්ෂා කරන්න.
Demo: දැනට බිඳී ඇති අක්ෂරය මත රාමුවක් ගෙනයාමට නැංගුරම් ස්ථානගත කිරීම සමඟ ඒකාබද්ධව අනුචලන-තත්ත්ව විමසුම් භාවිතා කරන Pokémon-තේමා ලැයිස්තුවකි.
උපයෝගිතා බෙන්ඩ් මගින් CSS, Pokemon අනුවාදය [forked] සමඟ කඩා වැටී ඇත්තේ කුමන අයිතමයදැයි පරීක්ෂා කිරීමට Pen Scroll-state විමසුම බලන්න. ප්රශස්ත Ergonomics: CSS හි තර්කනය CSS ඔතා ඇති “Optimized Ergonomics” කොටස අපගේ කාර්ය ප්රවාහයන් වඩාත් අවබෝධාත්මක කරවන විශේෂාංග ඉස්මතු කරයි. අපි තර්කනය ලියන ආකාරය සඳහා පරිවර්තනීය ලක්ෂණ තුනක් කැපී පෙනේ:
if() ප්රකාශන අපි අවසානයේ CSS හි කොන්දේසි ලබා ගනිමු. if() ශ්රිතය ස්ටයිල්ෂීට් සඳහා ත්රිත්ව ක්රියාකරුවෙකු ලෙස ක්රියා කරයි, මාධ්ය, සහාය, හෝ විලාස විමසුම් පේළිගතව ඇති අගයන් යෙදීමට අපට ඉඩ සලසයි. මෙය තනි දේපල වෙනස් කිරීම් සඳහා වාචික @ මාධ්ය අවහිර කිරීම් සඳහා අවශ්යතාවය අඩු කරයි. @function functions අපට අවසානයේ යම් තර්කනයක් වෙනත් ස්ථානයකට ගෙන යා හැකි අතර, එහි ප්රතිඵලයක් ලෙස පිරිසිදු ලිපිගොනු කිහිපයක්, ජීවනයේ සැබෑ ගුණාත්මක ලක්ෂණයක් ඇති වේ. sibling-index() සහ sibling-count()මෙම ගස්-ගණන් කිරීමේ කාර්යයන් ලැයිස්තු ප්රමාණය මත පදනම් වූ විශ්මයජනක සජීවිකරණ හෝ මෝස්තර අයිතම පිළිබඳ ගැටළුව විසඳයි. මා විසින් CSS සමඟ හැඩගැන්වීම සහෝදර සහෝදරියන් තුළ ගවේෂණය කළ පරිදි, මෙය අපගේ HTML හි අභිරුචි ගුණාංග (--index: 1 වැනි) දෘඪ-කේත කිරීමේ අවශ්යතාවය ඉවත් කරයි.
උදාහරණය: පිරිසැලසුම් ගණනය කිරීම අපට දැන් සංක්ෂිප්ත ගණිතමය සූත්ර ලිවිය හැකිය. උදාහරණයක් ලෙස, තිරයට ඇතුළු වන කාඩ්පත් සඳහා සජීවීකරණයක් කිරීම සුළුපටු වේ: .කාඩ්-කන්ටේනරය > * { සජීවිකරණය: 0.6s පහසුව ඉදිරියට ගෙන යාම හෙළි කරන්න; /* තවත් අත්පොත --දර්ශක විචල්ය නැත! */ සජීවිකරණ-ප්රමාදය: calc(sibling-index() * 0.1s); }
මම ත්රිකෝණමිතිය සමඟින් මෙම ශ්රිත භාවිතා කරමින් කිසිදු ජාවාස්ක්රිප්ට් නොමැතිව පරිපූර්ණ කවයක අයිතම තැබීමට පවා අත්හදා බැලුවෙමි.
Demo: විස්මිත කාඩ්පත් සජීවිකරණ ගතිකව.
sibling-index() [forked] by utilitybend භාවිතා කරන Pen Stagger කාඩ්පත් බලන්න.
Demo: sibling-index, sibling-count, සහ නව CSS @function විශේෂාංගය භාවිතයෙන් අයිතම පරිපූර්ණ කවයක තැබීම.
sibling-index, sibling-count සහ functions [forked] by utilitybend භාවිතා කරමින් Pen The Circle බලන්න. මගේ CSS කළ යුතු දේ ලැයිස්තුව: මට උත්සාහ කිරීමට බලා සිටිය නොහැකි විශේෂාංග මම මූර්ති තෝරන සහ සංක්රාන්තිවල කාර්යබහුලව සිටින අතර, "CSS Wrapped 2025" වාර්තාව මට තවම CodePen හි වෙඩි තැබීමට අවස්ථාවක් නොලැබුණු වෙනත් හොඳ දේවල් වලින් පිරී ඇත. මගේ මීළඟ අත්හදා බැලීම් සඳහා මේවා මගේ ලැයිස්තුවේ ඉහළයි: නැංගුරම් දැමූ බහාලුම් විමසුම් මම මගේ කැරොසල් ආදර්ශනයේ බොත්තම් සඳහා CSS Anchor Positioning භාවිතා කළ නමුත් “CSS Wrapped” ඉස්මතු කරයිමෙහි පරිණාමය: නැංගුරම් දැමූ බහාලුම් විමසුම්. මෙවලම් ඉඟි සමඟ අප සියල්ලන්ටම ඇති ගැටළුවක් මෙය විසඳයි: ඉඩ බාධාව නිසා බ්රවුසරය මෙවලම් ඉඟිය ඉහළ සිට පහළට පෙරළන්නේ නම්, “ඊතලය” බොහෝ විට වැරදි මාර්ගයක් පෙන්වයි. නැංගුරම් ලා ඇති බහාලුම් විමසුම් (@container anchored(fallback: flip-block)) සමඟින්, අපට බ්රවුසරය ඇත්ත වශයෙන්ම තෝරාගත් පසුබැසීමේ ස්ථානය මත පදනම්ව මූලද්රව්යය හැඩගස්වාගත හැක. Nested View Transition Groups View Transitions විප්ලවයක් වී ඇත, නමුත් ඒවා විශේෂිත වෙළඳාමක් සමඟ පැමිණියේය: ඔවුන් මූලද්රව්ය ගස සමතලා කළ අතර, එය බොහෝ විට ත්රිමාණ පරිවර්තන හෝ පිටාර ගැලීම බිඳ දැමීය: clip. මට නිතරම හැඟී ගියේ යමක් මග හැරී ඇති බවයි, මෙය පිළිතුර විය හැකිය. View-transition-group: nearest භාවිතා කිරීමෙන්, අවසානයේ අපට එකිනෙකා තුළ සංක්රාන්ති කණ්ඩායම් කැදවා ගත හැක. මෙය අපට සංක්රාන්ති කාලයකදී ක්ලිපින් ප්රයෝග හෝ ත්රිමාණ භ්රමණයන් පවත්වා ගැනීමට ඉඩ සලසයි - මූලද්රව්ය ඉහළ මට්ටමට එසවීම නිසා කලින් කළ නොහැකි දෙයක්. .කාඩ් img { view-transition-name: photo; view-transition-group: ළඟම; /* එය කූඩුව තබා ගන්න! */ }
මුද්රණ ශිල්පය සහ හැඩතල අවසාන වශයෙන්, මා තුළ සිටින ergonomist Text Box Trim උත්සාහ කිරීමට කැසීමයි, එය අවසානයේ පරිපූර්ණ සිරස් පෙළගැස්මක් ලබා ගැනීම සඳහා පෙළ අන්තර්ගතයට ඉහළින් සහ පහළින් (ප්රමුඛයා) එම කරදරකාරී අමතර හිස් අවකාශය ඉවත් කිරීමට පොරොන්දු වේ. නිර්මාණාත්මක පැත්ත සඳහා, කෙළවරේ-හැඩය සහ හැඩය() ශ්රිතය සෘජුකෝණාස්රාකාර නොවන පිරිසැලසුම් විවෘත කරයි, CSS විචල්යයන්ට ප්රතිචාර දක්වන "squaricles" සහ සංකීර්ණ මාර්ග සඳහා ඉඩ සලසයි. එසේ පැවසුවහොත්, ලේනුන්ගෙන් පිරුණු නිර්මාණයක් මට බලා සිටිය නොහැක! බලාපොරොත්තු සහගත අනාගතයක් කලින් ජාවාස්ක්රිප්ට් වලට අයත්ව තිබූ තාර්කික, තත්ත්වය සහ සංකීර්ණ අන්තර්ක්රියා හැසිරවීමට CSS සමත් වන ලෝකයක් අපි දකිමු. MoveBefore (iframes/videos සඳහා DOM තත්ත්වය සංරක්ෂණය කිරීම) සහ attr() (වර්ණ සහ ජාල සඳහා නූල්වලින් ඔබ්බට වර්ග භාවිතා කිරීම) වැනි විශේෂාංග මෙම යථාර්ථය තවදුරටත් තහවුරු කරයි. මෙම විශේෂාංගවලින් සමහරක් දැනට පර්යේෂණාත්මක හෝ Chrome සඳහා විශේෂිත වන අතර, ගම්යතාවය ප්රතික්ෂේප කළ නොහැකිය. මෙම හැකියාවන් මූලික බවට සහතික කිරීම සඳහා Interop වැනි මුලපිරීම් හරහා සියලුම බ්රව්සර් හරහා අඛණ්ඩ සහය බලාපොරොත්තු විය යුතුය. එසේ පැවසුවහොත්, බ්රව්සර් එන්ජින් තිබීම “පළමු ක්රෝම්” හි මෙම සියලු විශිෂ්ට විශේෂාංග තිබීම තරම්ම වැදගත් වේ. මෙම නව විශේෂාංග බ්රවුසරයට ගොඩ බැසීමට පෙර සාකච්ඡා කිරීම, ටින්කර් කිරීම සහ පරීක්ෂා කිරීම අවශ්ය වේ. CSS වෙත පිවිසීමට එය අපූරු මොහොතකි. අපි තවදුරටත් හැඩගැන්වීම් ලේඛන පමණක් නොවේ; අපි වෙන කවරදාටත් වඩා බලවත් ස්වදේශීය මෙවලම් කට්ටලයක් සමඟ ගතික, ergonomic සහ ශක්තිමත් යෙදුම් සකස් කරමින් සිටිමු. අපි මේ නව යුගය සමඟ යමු සහ වචනය ප්රචාරය කරමු. මෙය CSS ඔතා ඇත!
