ਆਧੁਨਿਕ CSS ਨੇ ਫੰਕਸ਼ਨ ਅਤੇ ਪ੍ਰਾਪਰਟੀਆਂ ਜੋੜੀਆਂ ਹਨ ਜੋ ਮੀਡੀਆ-ਕੁਇਰੀ ਅਤੇ JavaScript ਹੈਕਸ ਦੀਆਂ ਪੂਰੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਬਦਲਦੀਆਂ ਹਨ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ:
clamp() — ਸਿਲਾਬਲ, ਸੀਮਿਤ ਮੁੱਲ
h1 { font-size: clamp(1.5rem, , ); }
ਆਧੁਨਿਕ CSS ਨੇ ਫੰਕਸ਼ਨ ਅਤੇ ਪ੍ਰਾਪਰਟੀਆਂ ਜੋੜੀਆਂ ਹਨ ਜੋ ਮੀਡੀਆ-ਕੁਇਰੀ ਅਤੇ JavaScript ਹੈਕਸ ਦੀਆਂ ਪੂਰੀਆਂ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਬਦਲਦੀਆਂ ਹਨ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ:
h1 { font-size: clamp(1.5rem, , ); }
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 ਜਾਂ ਅਲਗ ਚਾਲਾਂ ਲੋੜੀਂਦੀਆਂ ਸਨ।