වෙබ් පිටුවක අලුත් අංගයක් පෙන්වන්න JavaScript කේතයක් හතක් ගෙන යාමට අවශ්ය වුණාද? දැන් එම ගැටලුවට නව විසඳුමක් – @starting-style නමින් CSS නියමයක් – හඳුන්වා දෙන ලදී.
මෙම නියමය බ්රවුසරයට, අංගයක් DOM එකට එකතු වන තුරුම “පෙර” තත්ත්වයක් ලබා දීමට ඉඩ දෙයි. එවිට අංගය පළමු රෙන්ඩර් වාරයේ පරිවර්තනයක් (transition) ආරම්භ කර, JavaScript රහිතව මෘදු fade‑in, slide‑up වැනි ඇනිමේෂන් ලබා ගත හැක.
උදාහරණයක් ලෙස, .notification වර්ගයක් සඳහා සාමාන්ය CSS එකේ opacity සහ transform ගුණාංග සකස් කර, @starting-style තුළ ඒවායේ පළමු අගයන් (opacity:0, translateY:12px) නියම කරමු. බ්රවුසරය එම අගයන් පළමු ෆ්රේමයට පරිසර කර, ඉක්මණින් නියමිත අගයන්ට පාරදීම කරයි. මෙයින් setTimeout, requestAnimationFrame හෝ class toggle වැනි “හැක්” අවශ්ය නොවේ.
ඉන්පසු display:none සහ allow-discrete යන නව ගුණාංග සමඟ, enter සහ exit ඇනිමේෂන් දෙකම සම්පූර්ණයෙන් CSS මගින් කළ හැක. උදාහරණයක් ලෙස .drawer අංගයේ display:block වෙද්දී පළමුව opacity 0, translateX -16px ලෙස ආරම්භ කර, transition සමඟ පූර්ණව පෙනේ.
Popover API සහ <dialog> අංග වලටද @starting-style සහ allow-discrete එකතුවෙන් overlay පාලනය කර, ඇනිමේෂන් අවසන් වීමට පෙර අංගය තට්ටුවේ ඉදිරියෙන් පවතිනවා.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ බොහෝ වෙබ් සංවර්ධකයන් JavaScript මත බරපතල කේතයක් රචනා කරයි. @starting-style නිසා:
- කේත ප්රමාණය අඩු වෙයි, පේජ් ලෝඩ් වේගය වැඩි වේ.
- ඇනිමේෂන් සකස් කිරීමේ දෝෂ අවම වෙයි, අලුත් ඉගෙනුම්කරුවන්ට CSS එකක් පමණක් ඉගෙනීමට හැකියාව ලැබේ.
- ව්යාපාරික වෙබ් අඩවි වල පාරිභෝගික අත්දැකීම තත්ත්වයෙන් ඉහළ යයි, conversion rate වැඩි වීමේ ඉඩකඩ ඇත.
ඉන්පසු, Chrome 117 (2023) සිට මෙම නියමය සහාය දක්වන බැවින්, ශ්රී ලංකාවේ බහුතරය භාවිතා කරන බ්රවුසරවලටත් එය ලැබේ. අනාගතයේ Edge සහ Safari ද මෙය අනුගමනය කරනවා නම්, ලෝක ව්යාප්ත වෙබ් සංවර්ධනයේ තරමක් අඩුවෙනු ඇත.
සාරාංශයෙන්, @starting-style යනු CSS හි නව සම්පූර්ණ-ඇනිමේෂන් ක්රමයක් වන අතර, JavaScript අඩු කර, කාර්ය සාධනය වැඩි කර, සංවර්ධක අත්දැකීම අලංකාර කරයි.
