CSS कंटेनर क्वेरीज़ अभी भी कर्षण प्राप्त कर रही हैं और हम में से बहुत से लोग उनके साथ अपने हाथ गीला कर रहे हैं, भले ही यह छोटे प्रयोगों के लिए हो या क्या नहीं। उनके पास बहुत अच्छा है, लेकिन काफी भरा हुआ नहीं है, ब्राउज़र का समर्थन - कुछ परियोजनाओं में उनका उपयोग करने का औचित्य साबित करने के लिए पर्याप्त है, लेकिन शायद उस हद तक नहीं जहां हम बदलने के लिए लुभा सकते हैं मीडिया के प्रश्नों पिछली परियोजनाओं से चमकदार नए कंटेनर आकार प्रश्नों के साथ।
हालांकि वे निश्चित रूप से आसान हैं! वास्तव में, मैं पहले ही कुछ ऐसी स्थितियों का सामना कर चुका हूँ जहाँ मैं वास्तव में उन तक पहुँचना चाहता था लेकिन समर्थन आवश्यकताओं को पूरा नहीं कर सका। अगर मैं उनका उपयोग करने में सक्षम होता, तो यह उन स्थितियों में कैसा दिखता।
इस लेखन के समय निम्नलिखित सभी डेमो को क्रोम या सफारी में सबसे अच्छा देखा जाएगा। फ़ायरफ़ॉक्स की योजना है जहाज का समर्थन संस्करण 109 में।
केस 1: कार्ड ग्रिड
आपको इस तरह की उम्मीद करनी थी, है ना? यह इतना सामान्य पैटर्न है कि हम सभी को कभी न कभी इसका सामना करना पड़ता है। लेकिन तथ्य यह है कि मानक मीडिया प्रश्नों पर उनका उपयोग करने में सक्षम होने पर बेहतर परिणाम के साथ कंटेनर आकार के प्रश्न मेरे लिए बहुत समय बचाने वाले होते।
मान लें कि आपको इस कार्ड ग्रिड को इस आवश्यकता के साथ बनाने का काम सौंपा गया है कि प्रत्येक कार्ड को इसके 1:1 पहलू अनुपात को बनाए रखने की आवश्यकता है:
यह जितना दिखता है उससे कहीं ज्यादा कठिन है! समस्या यह है कि व्यूपोर्ट की चौड़ाई पर एक घटक की सामग्री को आकार देना आपको इस बात की दया पर छोड़ देता है कि घटक व्यूपोर्ट पर कैसे प्रतिक्रिया करता है - साथ ही जिस तरह से कोई अन्य पूर्वज कंटेनर इसका जवाब देता है। यदि, उदाहरण के लिए, आप चाहते हैं कि कार्ड शीर्षक का फ़ॉन्ट आकार कम हो जाए जब कार्ड एक निश्चित इनलाइन आकार को हिट करता है, तो ऐसा करने का कोई विश्वसनीय तरीका नहीं है।
आप फ़ॉन्ट आकार सेट कर सकते हैं vw इकाइयाँ, मुझे लगता है, लेकिन घटक अभी भी ब्राउज़र की व्यूपोर्ट चौड़ाई से जुड़ा हुआ है। और इससे समस्याएँ हो सकती हैं जब कार्ड ग्रिड का उपयोग अन्य संदर्भों में किया जाता है जिसमें समान ब्रेकप्वाइंट नहीं हो सकते हैं।
मेरी वास्तविक दुनिया की परियोजना में, मैं एक जावास्क्रिप्ट दृष्टिकोण पर उतरा जो:
- एक आकार बदलें घटना के लिए सुनो।
- प्रत्येक कार्ड की चौड़ाई की गणना करें।
- प्रत्येक कार्ड की चौड़ाई के आधार पर इनलाइन फ़ॉन्ट आकार जोड़ें।
- उपयोग करने के अंदर सब कुछ स्टाइल करें
emइकाइयों.
बहुत काम लगता है, है ना? लेकिन विभिन्न संदर्भों में विभिन्न स्क्रीन आकारों में आवश्यक स्केलिंग प्राप्त करना एक स्थिर समाधान है।
कंटेनर प्रश्न बहुत बेहतर होते क्योंकि वे हमें प्रदान करते हैं कंटेनर क्वेरी इकाइयां, जैसे cqw इकाई। आप शायद इसे पहले ही प्राप्त कर चुके हैं, लेकिन 1cqw के बराबर है 1% एक कंटेनर की चौड़ाई का। हमारे पास भी है cqi इकाई जो एक कंटेनर की इनलाइन चौड़ाई का माप है, और cqb एक कंटेनर की ब्लॉक चौड़ाई के लिए। तो, अगर हमारे पास एक कार्ड कंटेनर है 500px चौड़ा, ए 50cqw मान की गणना करता है 250px.
अगर मैं अपने कार्ड ग्रिड में कंटेनर प्रश्नों का उपयोग करने में सक्षम होता, तो मैं सेट अप कर सकता था .card एक कंटेनर के रूप में घटक:
.card {
container: card / size;
}तब मैं एक आंतरिक आवरण सेट कर सकता था padding कि पैमाने पर 10% का .cardकी चौड़ाई का उपयोग कर रहा है cqw इकाई:
.card__inner {
padding: 10cqw;
} यह कार्ड के किनारों और इसकी सामग्री के बीच अंतर को स्केल करने का एक अच्छा तरीका है, भले ही किसी भी व्यूपोर्ट चौड़ाई में कार्ड का उपयोग किया जाता हो। किसी मीडिया पूछताछ की आवश्यकता नहीं है!
एक अन्य विचार? प्रयोग करना cqw आंतरिक सामग्री के फ़ॉन्ट आकार के लिए इकाइयाँ, फिर पैडिंग लागू करें em इकाइयों:
.card__inner {
font-size: 5cqw;
padding: 2em;
} 5cqw एक मनमाना मूल्य है - बस एक जिसे मैंने तय किया। वह गद्दी अब भी बराबर है 10cqw के बाद से em इकाई के सापेक्ष है .card__inner फ़ॉन्ट आकार!
क्या आपने उसे पकड़ा? 2em के सापेक्ष है 5cqw फ़ॉन्ट आकार जो सेट है उसी डिब्बे पर. कंटेनर हमारे द्वारा उपयोग किए जाने वाले कार्यों से अलग काम करते हैं, जैसा कि em इकाइयां एक ही तत्व के सापेक्ष हैं font-size value. लेकिन मैंने जो देखा वह यह है कि कंटेनर क्वेरी इकाइयां संबंधित हैं निकटतम माता-पिता जो एक कंटेनर भी है.
उदाहरण के लिए, 5cqw पर आधारित नहीं है .card इस उदाहरण में तत्व की चौड़ाई:
.card {
container: card / size;
container-name: card;
font-size: 5cqw;
}इसके बजाय, यह कंटेनर के रूप में परिभाषित निकटतम माता-पिता के लिए स्केल करता है। इसलिए मैंने एक सेट अप किया .card__inner आवरण।
केस 2: वैकल्पिक लेआउट
मुझे एक अलग परियोजना में एक और कार्ड घटक की आवश्यकता थी। इस बार, मुझे लैंडस्केप लेआउट से पोर्ट्रेट लेआउट में संक्रमण के लिए कार्ड की आवश्यकता थी ... फिर लैंडस्केप पर वापस, और स्क्रीन के छोटे होने पर फिर से पोर्ट्रेट पर।
मैंने इस घटक को उन दो विशिष्ट व्यूपोर्ट रेंजों पर चित्र बनाने का गंदा काम किया है (चिल्लाओ न्यू मीडिया क्वेरी रेंज सिंटैक्स!), लेकिन फिर से, समस्या यह है कि इसके बाद इसे उस पर सेट किए गए मीडिया प्रश्नों, उसके माता-पिता और व्यूपोर्ट की चौड़ाई पर प्रतिक्रिया देने वाली किसी भी चीज़ के लिए लॉक कर दिया जाता है। हम कुछ ऐसा चाहते हैं जो किसी भी हालत में काम करे बिना इस बात की चिंता किए कि सामग्री कहां टूटेगी!
कंटेनर प्रश्नों ने इसे आसान बना दिया होगा, इसके लिए धन्यवाद @container शासन:
.info-card {
container-type: inline-size;
container-name: info-card;
}
@container info-card (max-width: 500px) {
.info-card__inner {
flex-direction: column;
}
}एक प्रश्न, अनंत तरलता:
लेकिन रुको! कुछ ऐसा है जिस पर आप ध्यान देना चाहेंगे। विशेष रूप से, प्रोप-आधारित डिज़ाइन सिस्टम के भीतर इस तरह के कंटेनर क्वेरी का उपयोग करना मुश्किल हो सकता है। उदाहरण के लिए, यह .info-card कॉम्पोनेंट में ऐसे चाइल्ड कंपोनेंट्स हो सकते हैं जो अपना रूप बदलने के लिए प्रॉप्स पर भरोसा करते हैं।
यह एक बड़ी बात क्यों है? कार्ड के पोर्ट्रेट लेआउट के लिए वैकल्पिक स्टाइलिंग की आवश्यकता हो सकती है लेकिन आप CSS के साथ JavaScript प्रॉप्स को नहीं बदल सकते। इस प्रकार, आप आवश्यक शैलियों की नकल करने का जोखिम उठाते हैं। मैंने वास्तव में इसे छुआ और किसी अन्य लेख में इसके आसपास कैसे काम करें. यदि आपको अपनी स्टाइलिंग की एक महत्वपूर्ण मात्रा के लिए कंटेनर प्रश्नों का उपयोग करने की आवश्यकता है, तो आपको मीडिया प्रश्नों पर भारी मौजूदा डिज़ाइन सिस्टम में उन्हें शूहोर्न करने की कोशिश करने के बजाय अपने पूरे डिज़ाइन सिस्टम को उनके चारों ओर आधारित करने की आवश्यकता हो सकती है।
केस 3: एसवीजी स्ट्रोक
यहाँ एक और सुपर कॉमन पैटर्न है जिसका मैंने हाल ही में उपयोग किया है जहाँ कंटेनर आकार के प्रश्नों के परिणामस्वरूप अधिक पॉलिश उत्पाद होगा। मान लें कि आपके पास शीर्षक के साथ लॉक किया गया आइकन है:
Heading
मीडिया प्रश्नों के बिना भी, शीर्षक के आकार के साथ आइकन को स्केल करना बहुत सीधा है। हालाँकि, समस्या यह है कि SVG's stroke-width छोटे आकार में इतना पतला हो सकता है कि उस पर ध्यान न दिया जा सके, और शायद बड़े आकार में सुपर थिक स्ट्रोक के साथ बहुत अधिक ध्यान आकर्षित करें।
मुझे इसके आकार और स्ट्रोक की चौड़ाई निर्धारित करने के लिए प्रत्येक आइकन उदाहरण के लिए कक्षाएं बनानी और लागू करनी होंगी। यह ठीक है अगर आइकन एक शीर्षक के बगल में है जो एक निश्चित फ़ॉन्ट आकार के साथ स्टाइल किया गया है, मुझे लगता है, लेकिन द्रव प्रकार के साथ काम करते समय यह इतना अच्छा नहीं है जो लगातार बदलता रहता है।
शीर्षक का फ़ॉन्ट आकार व्यूपोर्ट की चौड़ाई पर आधारित हो सकता है, इसलिए एसवीजी आइकन को उसी के अनुसार समायोजित करने की आवश्यकता होती है जहां इसका स्ट्रोक किसी भी आकार में काम करता है। आप शीर्षक के सापेक्ष स्ट्रोक की चौड़ाई बना सकते हैं font-size इसे सेट करके em इकाइयों। लेकिन अगर आपके पास स्ट्रोक आकार का एक विशिष्ट सेट है जिसे आपको टिके रहने की आवश्यकता है, तो यह काम नहीं करेगा क्योंकि यह अन्यथा रैखिक रूप से मापता है - इसे किसी विशिष्ट आकार में समायोजित करने का कोई तरीका नहीं है stroke-width व्यूपोर्ट चौड़ाई पर मीडिया प्रश्नों का सहारा लिए बिना कुछ बिंदुओं पर मूल्य।
लेकिन अगर उस समय मेरे पास कंटेनर प्रश्नों की विलासिता होती तो मैं यहां क्या करता:
.icon {
container: icon / size;
width: 1em;
height: 1em;
}
.icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: #ccc;
stroke-width: 0.8;
}
@container icon (max-width: 70px) {
.icon svg {
stroke-width: 1.5;
}
}
@container icon (max-width: 35px) {
.icon svg {
stroke-width: 3;
}
}कार्यान्वयन की तुलना करें और देखें कि कंटेनर क्वेरी संस्करण एसवीजी के स्ट्रोक को कंटेनर की चौड़ाई के आधार पर विशिष्ट चौड़ाई के लिए कैसे स्नैप करता है।
बोनस: अन्य प्रकार के कंटेनर आकार के प्रश्न
ठीक है, तो मैं वास्तव में एक वास्तविक परियोजना पर इसमें नहीं चला हूं। लेकिन जैसा कि मैं कंटेनर प्रश्नों के बारे में जानकारी के माध्यम से तलाशी कर रहा था, मैंने देखा कि अतिरिक्त चीजें हैं जो हम कंटेनर पर क्वेरी कर सकते हैं जो कंटेनर के आकार या भौतिक आयामों से संबंधित हैं।
मैंने देखा है कि अधिकांश उदाहरण क्वेरी करते हैं width, max-width, तथा min-width, height, block-size, तथा inline-size जैसा कि मैं इस पूरे लेख में करता रहा हूं।
@container info-card (max-width: 500px) {
.info-card__inner {
flex-direction: column;
}
}परंतु एमडीएन दो और बातों की रूपरेखा देता है हम के खिलाफ क्वेरी कर सकते हैं। एक है orientation जो सही समझ में आता है क्योंकि हम मीडिया प्रश्नों में हर समय इसका इस्तेमाल करते हैं। यह कंटेनर प्रश्नों से अलग नहीं है:
@media screen (orientation: landscape) {
.info-card__inner {
/* Style away! */
}
}
@container info-card (orientation: landscape) {
.info-card__inner {
/* Style away! */
}
} अन्य? यह है aspect-ratio, इस पर विश्वास करें या नहीं:
@container info-card (aspect-ratio: 3/2) {
.info-card__inner {
/* Style away! */
}
} यहां दोनों उदाहरणों के साथ खेलने के लिए एक संपादन योग्य डेमो दिया गया है:
मुझे अभी तक इनमें से किसी के लिए वास्तव में अच्छा उपयोग मामला नहीं मिला है। अगर आपके पास कोई विचार है या ऐसा लगता है कि यह आपकी परियोजनाओं में आपकी मदद कर सकता है, तो मुझे टिप्पणियों में बताएं!
