நவீன CSS ஆனது மீடியா-கேரி மற்றும் JavaScript வேலைக்களை பூரணமாக மாற்றக்கூடிய செயல்பாடுகள் மற்றும் பண்புகளைச் சேர்த்துள்ளது. குறிப்பிடத்தக்கவை:
clamp() — திரவ, வரம்புள்ள மதிப்புகள்
h1 { font-size: clamp(, , ); }
நவீன CSS ஆனது மீடியா-கேரி மற்றும் JavaScript வேலைக்களை பூரணமாக மாற்றக்கூடிய செயல்பாடுகள் மற்றும் பண்புகளைச் சேர்த்துள்ளது. குறிப்பிடத்தக்கவை:
h1 { font-size: clamp(, , ); }
clamp(min, preferred, max) திரவ அச்சுக்்கலை/இடைவெளியை வழங்குகிறது, இது பார்வை துறை முழுவதும் மென்மையாக அளவாக ஆனால் வரம்புக்குள் இருக்கும் — பல முறிவு புள்ளிகளின் font-size மீடியா வினவல்களை ஒரு வரியுடன் மாற்றுகிறது।
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; } /* perfect square at any width */
இதற்கு முன், ஒரு வினையுள்ள 16:9 பெட்டியைக் கட்டுப்படுத்துவதற்கு कুখ్यात padding-bottom: 56.25% தந்திரம் தேவையாயிருந்தது. இப்போது இது ஒரு பிரகடனம் — மற்றும் சிற்றுருப் பதிவுசெய்யப்பட்டதற்கு முன் இடத்தை ஒதுக்கக்கூடும் (CLS க்கு நல்லது)।
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); } /* whichever is LARGER → a minimum floor */
min()/max() சிறிய/பெரிய மதிப்பைத் தேர்ந்தெடுக்கவும், ஒரு சொத்து மீடியா கேரி இல்லாமல் வினையுள்ளதாக இருக்க அனுமதிக்கவும் (எ.கா "90% அகலம், ஆனால் 1200px ஐ விட அதிகமில்லை")।
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
subgrid ஒரு பிணைந்த கட்டத்திற்கு அதன் பெற்றோரின் பாதை கோட்டை மரபுரிமை செய்வதை அனுமதிக்கிறது, எனவே தனித்த அட்டைகளிலுள்ள உருப்படிகள் (தலைப்புகள், உடல்கள், பொத்தான்கள்) பகிரப்பட்ட வரிகளில் சிறந்தமாக சீரமைக்கப்படுகின்றன — முன்னர் நிலையான உচ்சதைகள் இல்லாமல் சாத்தியமாக இல்லை।
.flex { display: flex; gap: 1rem; } /* gap now works in flexbox, not just grid */
இந்த அம்சங்கள் நீண்ட கால வேலைக்களை நீக்குகின்றன: clamp()/min()/max() திரவ அளவுக்கான மீடியா வினவலின் கசை மாற்றுகிறது, aspect-ratio பணி திரட்டை மாற்றுகிறது மற்றும் தளவமைப்பு மாற்றத்திற்கு பாதுகாப்பு அளிக்கிறது, மற்றும் subgrid உপাদানங்களுக்கு இடையে சீரமைப்பை தீர்க்கிறது।
ியாணை, விகிதாசாரமான தளவமைப்புகளை வியத்திற்குரியமாக எளிதாக்கு் மற்றும் மேலும் வலுவாக்கு — நவீன CSS தெளிவாக என்ன குறிப்பிட்டு முன்னர் JS அல்லது குறைந்த வேலைக்களுக்கு தேவைப்பட்டது.