आधुनिक 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 वा नाजुक चालहरू आवश्यक थियो।