कंटेनर क्वेरी ने डेवलपर के रिस्पॉन्सिव डिज़ाइन के तरीके में क्रांति ला दी है. Netflix की टीम को पता है कि इन क्वेरी से डेवलपमेंट को आसान बनाने, सुविधाओं को बेहतर बनाने, और परफ़ॉर्मेंस को बेहतर बनाने में कितना फ़ायदा मिल सकता है. इस पोस्ट में, कंटेनर क्वेरी इस्तेमाल करने के मुख्य फ़ायदों के बारे में बताया गया है. साथ ही, इनकी तुलना पुराने तरीकों से की गई है. खास तौर पर, उन तरीकों से जिनमें लेआउट कंट्रोल के लिए JavaScript का इस्तेमाल किया जाता है. इसमें हर पॉइंट को समझाने के लिए कोड के उदाहरण शामिल हैं. इनसे पता चलता है कि कंटेनर क्वेरी, डेवलपर के तौर पर आपके काम को कितना आसान बना सकती हैं.
1. आसान कॉम्पोनेंट डिज़ाइन, "बॉटम-अप" बनाम "टॉप-डाउन"
Netflix की टीम को सबसे अहम बदलाव तब मिला, जब उन्होंने "टॉप-डाउन" डिज़ाइन के तरीके से "बॉटम-अप" डिज़ाइन के तरीके पर स्विच किया. कंटेनर क्वेरी से पहले, पैरंट कंटेनर को अपने चाइल्ड कंटेनर के लेआउट की ज़रूरी शर्तों के बारे में पूरी जानकारी होनी चाहिए थी. कंटेनर क्वेरी के साथ, यह लॉजिक उलट जाता है. इससे चाइल्ड कॉम्पोनेंट, अपने कंटेनर के साइज़ के आधार पर अपना लेआउट कंट्रोल कर सकते हैं. इससे, माता-पिता की भूमिका आसान हो जाती है और कोड में लेआउट लॉजिक की संख्या कम हो जाती है.
उदाहरण: कंटेनर क्वेरी बनाम मीडिया क्वेरी और JavaScript
इससे पहले (JavaScript की ज़रूरत है):
/* Layout with media queries */
.card {
width: 100%;
}
@media (min-width: 600px) {
.card {
width: 50%;
}
}
@media (min-width: 900px) {
.card {
width: 33.33%;
}
}
// JavaScript to detect parent container size
const container = document.querySelector('.container');
const card = document.querySelector('.card');
function adjustLayout() {
if (window.innerWidth >= 900) {
card.style.width = '33.33%';
} else if (window.innerWidth >= 600) {
card.style.width = '50%';
} else {
card.style.width = '100%';
}
}
window.addEventListener('resize', adjustLayout);
adjustLayout();
इसके बाद:
/* Container Query */
.container {
container-type: inline-size;
}
.card {
width: 100%;
}
@container (min-width: 600px) {
.card {
width: 50%;
}
}
@container (min-width: 900px) {
.card {
width: 33.33%;
}
}
इस उदाहरण में दिखाया गया है कि पैरंट कंटेनर को अब चाइल्ड लेआउट को मैनेज करने की ज़रूरत क्यों नहीं है. @container
नियम की मदद से, .card
अपने आस-पास मौजूद कंटेनर के साइज़ के हिसाब से बदलाव कर सकता है. इससे लेआउट लॉजिक को आसान बनाने के साथ-साथ, JavaScript की ज़रूरत भी पूरी तरह से खत्म हो जाती है.
2. जटिल मीडिया क्वेरी के बिना रिस्पॉन्सिव डिज़ाइन
Netflix की टीम ने यह पता लगाया कि कंटेनर क्वेरी, रिस्पॉन्सिवनेस को कैसे आसान बनाती हैं. खास तौर पर, मोबाइल-फ़र्स्ट डिज़ाइन के लिए. जटिल मीडिया क्वेरी लिखने के बजाय, फिर से इस्तेमाल किए जा सकने वाले ऐसे कॉम्पोनेंट बनाए जा सकते हैं जो अपने कंटेनर के साइज़ के आधार पर अडजस्ट होते हैं. इससे अलग-अलग स्क्रीन साइज़ और डिवाइसों पर डाइनैमिक लेआउट बनाने में मदद मिलती है. यह सुविधा, Netflix जैसे ऐप्लिकेशन के लिए खास तौर पर मददगार है, जहां मोबाइल ट्रैफ़िक का ज़्यादातर हिस्सा होता है.
उदाहरण: कंटेनर क्वेरी के साथ कॉम्पोनेंट की रिस्पॉन्सिवनेस
इससे पहले:
/* Desktop versus Mobile
this only works if.sidebar is directly contained by a viewport-width element */
.sidebar {
width: 300px;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
}
}
इसके बाद:
/* Responsive sidebar based on container,
.sidebar can be placed in any element of any width */
.container {
container-type: inline-size;
}
.sidebar {
width: 100%;
}
@container (min-width: 768px) {
.sidebar {
width: 300px;
}
}
.sidebar
अब व्यूपोर्ट पर आधारित मीडिया क्वेरी के बजाय,
कंटेनर के साइज़ के हिसाब से काम करता है. इससे, यह व्यूपोर्ट या पैरंट
कंटेनर के साइज़ के बारे में जानने के बिना, डाइनैमिक लेआउट में ज़्यादा आसानी से बदलाव कर पाता है.
3. लेआउट मैनेजमेंट के लिए, JavaScript पर कम निर्भरता
कंटेनर क्वेरी से पहले, Netflix के साथ-साथ कई टीमों को डाइनैमिक लेआउट के लिए, JavaScript पर निर्भर रहना पड़ता था. विंडो के साइज़ के बारे में क्वेरी करने पर, JavaScript लेआउट में बदलावों को ट्रिगर करेगा. इससे, कॉन्टेंट को समझने में मुश्किल होगी और गड़बड़ियों की संभावना भी बढ़ जाएगी. कंटेनर क्वेरी, सीएसएस को कंटेनर के साइज़ के आधार पर लेआउट रिस्पॉन्सिवनेस को मैनेज करने की अनुमति देकर, इस ज़रूरत को खत्म कर देती हैं.
उदाहरण: JavaScript पर आधारित लेआउट लॉजिक हटाना
इससे पहले:
const cardContainer = document.querySelector('.card-container');
const cards = cardContainer.children;
function adjustLayout() {
if (cardContainer.offsetWidth > 900) {
cards.forEach(card => card.style.width = '33.33%');
} else if (cardContainer.offsetWidth > 600) {
cards.forEach(card => card.style.width = '50%');
} else {
cards.forEach(card => card.style.width = '100%');
}
}
window.addEventListener('resize', adjustLayout);
adjustLayout();
इसके बाद:
.card-container {
container-type: inline-size;
}
.card {
width: 100%;
}
@container (min-width: 600px) {
.card {
width: 50%;
}
}
@container (min-width: 900px) {
.card {
width: 33.33%;
}
}
इस तरीके से, ज़रूरी JavaScript की संख्या कम हो जाती है. साथ ही, रनटाइम कैलकुलेशन से बचकर परफ़ॉर्मेंस भी बेहतर होती है.
4. कम कोड, कम गड़बड़ियां
Netflix की टीम को पता चला कि कंटेनर क्वेरी का इस्तेमाल करने से, कोड की लाइनों की संख्या कम हो गई और लेआउट से जुड़े गड़बड़ियों की संख्या भी कम हो गई. लेआउट लॉजिक को JavaScript से सीएसएस में ले जाने और जटिल मीडिया क्वेरी की ज़रूरत को खत्म करने से, डेवलपर ज़्यादा बेहतर कोड लिख सकते हैं.
उदाहरण: लेआउट कोड को कम करना
Netflix की टीम ने पाया कि कंटेनर क्वेरी का इस्तेमाल करने के बाद, सीएसएस कोड में काफ़ी कमी आई है. कुछ कॉम्पोनेंट के लिए, यह कमी 30% तक की है. साथ ही, टीम ने चाइल्ड कॉम्पोनेंट को कंट्रोल करने वाले लॉजिक को हटाकर, कई जटिल और कभी-कभी समस्या पैदा करने वाली मीडिया क्वेरी को आसान बना दिया. इससे, टीम को अलग-अलग तरह की समस्याओं को हल करने में मदद मिली. इससे न सिर्फ़ डेवलपमेंट की प्रोसेस तेज़ होती है, बल्कि गड़बड़ी होने की संभावना भी कम हो जाती है. साथ ही, बग भी कम होते हैं.
इससे पहले:
/* Before with complex media queries */
.card {
width: 100%;
}
@media (min-width: 600px) {
.card {
width: 50%;
}
}
@media (min-width: 900px) {
.card {
width: 33.33%;
}
}
इसके बाद
.container {
container-type: inline-size;
}
.card {
width: 100%;
}
@container (min-width: 600px) {
.card {
width: 50%;
}
}
@container (min-width: 900px) {
.card {
width: 33.33%;
}
}
5. डेवलपर के लिए बेहतर अनुभव
bq. "इससे मेरा काम काफ़ी आसान हो गया"
कंटेनर क्वेरी का सबसे ज़्यादा अहम फ़ायदा यह है कि इससे डेवलपर को बेहतर अनुभव मिलता है. सीएसएस को ज़्यादा आसान और कॉम्पोनेंट पर फ़ोकस करने वाले तरीके से काम करने पर, डेवलपर फिर से इस्तेमाल किए जा सकने वाले और आसानी से बदले जा सकने वाले कॉम्पोनेंट बनाने पर ध्यान दे सकते हैं. उन्हें इस बात की चिंता नहीं करनी पड़ती कि वे हर संभावित लेआउट स्थिति में कैसे काम करेंगे.
Netflix की टीम के एक सदस्य ने कहा, "शुरुआत से ही सीएसएस को इस तरह काम करना चाहिए था."
6. Polyfill फ़ॉलबैक
हालांकि, कंटेनर क्वेरी अब सभी मुख्य ब्राउज़र में उपलब्ध हैं, लेकिन ब्राउज़र के अब भी इस्तेमाल में रहे पुराने वर्शन के बारे में चिंता है. फ़ॉलबैक बहुत ज़रूरी है. Netflix की टीम, वेब कम्यूनिटी के योगदान देने वालों के बनाए गए इस JavaScript polyfill का इस्तेमाल करती है. सुविधा का पता लगाने की सुविधा की मदद से, इसे लागू करना आसान है:
if (! CSS.supports("container-type:size")) {
/*use polyfill from
https://www.npmjs.com/package/container-query-polyfill */
}
काम की बात
कंटेनर क्वेरी, सीएसएस में एक बड़ा कदम है. इससे डेवलपर के लिए, आसानी से फ़्लेक्सिबल और रिस्पॉन्सिव कॉम्पोनेंट बनाने में मदद मिलती है. इन कॉम्पोनेंट का इस्तेमाल, साइट के अलग-अलग हिस्सों में दोबारा किया जा सकता है. लेआउट के लिए JavaScript पर निर्भरता कम करने, मुश्किल मीडिया क्वेरी को हटाने, और डेवलपमेंट को तेज़ करने से, परफ़ॉर्मेंस और रखरखाव, दोनों में काफ़ी फ़ायदे मिलते हैं. फ़िलहाल, ज़्यादातर इस्तेमाल के उदाहरण Netflix के Tudum पेजों पर हैं. साथ ही, Netflix के दूसरे हिस्सों में कंटेनर क्वेरी का इस्तेमाल करने के संभावित प्लान भी हैं. Netflix की टीम, डेवलपर टूलबॉक्स में कंटेनर क्वेरी को सबसे बेहतर टूल मानती है. साथ ही, यह भी मानती है कि ज़्यादा से ज़्यादा डेवलपर इनकी सुविधाओं और फ़ायदों का इस्तेमाल करेंगे. कंटेनर क्वेरी, रिस्पॉन्सिव डिज़ाइन के लिए आसान और बेहतर तरीका उपलब्ध कराती हैं. भले ही, इसका इस्तेमाल मौजूदा कॉम्पोनेंट को फिर से डिज़ाइन करने के लिए किया जा रहा हो या फिर नए कॉम्पोनेंट को डिज़ाइन करने के लिए.
अगर आपने अब तक कंटेनर क्वेरी का इस्तेमाल नहीं किया है, तो इसे आज़माएं. आपको पता चलेगा कि यह आपके वर्कफ़्लो को ऐसे आसान बना देता है जिसकी आपने उम्मीद भी नहीं की होगी.