किन आधुनिक CSS features ने सच में आपके components बनाने का तरीका बदला है, और container queries किस समस्या को हल करती हैं?

container queries किसी component को viewport की जगह अपने container की चौड़ाई पर प्रतिक्रिया करने देती हैं, तो वही card sidebar में संकरा और main column में चौड़ा हो सकता है, बिना props की खींचतान या breakpoint के अंदाज़ों के। इनके साथ has selector parent को style करने देता है, native nesting preprocessor की निर्भरता हटा देती है, subgrid grid के आर पार nested content को सीध में लाती है, और view transitions बिना library के states के बीच animation कर देती हैं।

सबसे बड़ी चीज़ container queries हैं, क्योंकि सालों तक component का layout viewport से बंधा रहा जबकि component को यह पता ही नहीं होता कि उसकी जगह कितनी चौड़ी है। तो वही card एक variant compact जैसा prop रखता था, और वह prop वहां से खींचकर लाना पड़ता था जहां भी उसे रखा जाता। अब मैं wrapper पर container type inline size घोषित करता हूं और card अपनी ही चौड़ाई से खुद को style करता है, जिसका मतलब है कि वह sidebar में गिरे या पूरी चौड़ाई वाले grid में, बस काम करता है। उसके बाद has selector, ज़्यादातर form की states के लिए, क्योंकि मैं किसी field के wrapper को इस आधार पर style कर सकता हूं कि उसमें invalid input है या नहीं, बिना JavaScript छुए। native nesting ने मेरी एक असली preprocessor निर्भरता हटा दी, और subgrid ने आखिरकार card के headers को एक row में सीध में ला दिया। support पर मैं अंदाज़ा लगाने की जगह baseline की स्थिति देखता हूं, और अगर कोई feature व्यापक रूप से उपलब्ध नहीं है तो मैं उसे supports block के साथ progressive enhancement की तरह इस्तेमाल करता हूं ताकि उसके बिना भी कुछ टूटा हुआ न दिखे।