कोई 15 साल पैह्लें मैं इक कंपनी च कम्म करा करदा हा जित्थें अस ट्रैवल एजेंटें, हवाई अड्डे दे कम्मगारें, ते एयरलाइन कम्पनियें आस्तै ऐप बनांदे हे। अस यूआई घटकें ते सिंगल-पेज ऐप क्षमताएं आस्तै अपना खुद दा इन-हाउस फ्रेमवर्क बी बनाया। साढ़े कोल हर इक चीज आस्तै घटक हे: फील्ड, बटन, टैब, रेंज, डाटाटेबल, मेनू, डेटपिकर, चयन, ते मल्टीसेलेक्ट। इत्थूं तगर जे साढ़े कोल इक डिव कम्पोनेंट बी हा। साढ़ा div घटक वैसे बड़ा शैल हा, इसनें असेंगी सारे ब्राउज़रें पर गोल कोने करने दी इजाजत दित्ती ही, जेह् ड़ी, मानो जां नेईं मानो, उस बेल्लै करना कोई आसान कम्म नेईं हा।
साढ़ा कम्म साढ़े इतिहास दे उस बिंदु पर होआ हा जिसलै जेएस, अजाक्स, ते डायनामिक एचटीएमएल गी इक क्रांति दे रूप च दिक्खेआ गेआ हा जेह्ड़ा असेंगी भविक्ख च लेई आया हा। अचानक, अस इक पृष्ठ गी गतिशील रूप कन्नै अपडेट करी सकदे हे, कुसै सर्वर थमां डेटा हासल करी सकदे हे, ते दुए पन्नें पर नेविगेट करने थमां बच सकदे हे, जेह् ड़ा धीमा दिक्खेआ जंदा हा ते दौं पन्नें दे बश्कार स्क्रीन पर इक बड्डा सफेद आयत चमकदा हा। इक मुहावरा हा, जेफ एटवुड (स्टैकओवरफ्लो दे संस्थापक) ने लोकप्रिय कीता हा, जिस च लिखे दा हा: “कोई बी एप्लीकेशन जेह् ड़ा जावास्क्रिप्ट च लिखेआ जाई सकदा ऐ, अंततः जावास्क्रिप्ट च लिखेआ जाग।”— जेफ एटवुड
उस बेल्लै साढ़े आस्तै एह् असल च जाइयै उनें ऐपें गी बनाने दी हिम्मत आह्ला लगदा हा। जेएस दे नाल सब कुछ करन दा कंबल मंजूरी लगदा सी। इस करी असें जेएस कन्नै सब किश कीता, ते अस सच्चें गै कम्म करने दे होर तरीकें उप्पर शोध करने दा समां नेईं कड्ढेआ। एचटीएमएल ते सीएसएस कीऽ करी सकदे न, असेंगी ठीक ढंगै कन्नै सिखने दी प्रोत्साहन नेईं ही। अस सच्चें गै वेब गी पूरी चाल्ली कन्नै इक विकसित ऐप प्लेटफार्म दे रूप च नेईं समझेआ हा। अस ज्यादातर इसगी इक ऐसी चीज दे रूप च दिक्खेआ जेह् ड़ी असेंगी अपने आस-पास कम्म करने दी लोड़ ही, खास करियै जिसलै ब्राउज़र समर्थन दी गल्ल आवै करदी ही। अस बस इस पर होर जेएस फेंक सकदे हे तां जे कम्म पूरा होई सकै। क्या वेब किस चाल्ली कम्म करदा ऐ ते प्लेटफार्म पर केह् उपलब्ध ऐ इसदे बारे च होर जानने लेई समां कड्ढने कन्नै मेरी मदद होई सकदी? ज़रूर, मैं शायद कोड दा इक गुच्छा मुंडवा सकदा हा जिसदी सच्ची जरूरत नेईं ही। पर, उस वक्त, शायद उतना नहीं। तुस दिक्खो, उस बेल्लै ब्राउज़र दे अंतर काफी महत्वपूर्ण हे। एह् इक समां हा जिसलै इंटरनेट एक्सप्लोरर अजें बी दबदबा आह् ला ब्राउज़र हा, जिस च फायरफॉक्स नेड़े दा दूआ हा, पर क्रोम दी तेजी कन्नै लोकप्रियता हासल करने दे कारण बजार हिस्सेदारी खोह्नना शुरू होई गेई ही। हालांकि क्रोम ते फायरफॉक्स वेब मानकें पर सहमत होने च काफी माहिर हे, पर जिस माहौल च साढ़े ऐप चलदे हे, उंदा मतलब ऐ जे असेंगी लंबे समें तगर आईई6 दा समर्थन करना पौंदा हा। इत्थूं तगर जे जदूं असेंगी आईई8 दा समर्थन करने दी इजाजत दित्ती गेई ही तां बी असेंगी ब्राउज़रें दे बश्कार मते सारे मतभेदें कन्नै निबड़ना पेआ हा। इतना ही कैनी, बल्कि ओ वक्त दे वेब विच बस उतनी क्षमताएं दा निर्माण ठीक प्लेटफार्म विच कैनी हा।
आज की फास्ट फॉरवर्ड। चीजें च जबरदस्त बदलाव आया ऐ। न सिर्फ साढ़े कोल पैह्लें कोला बी मती ऐसी क्षमताएं न, सगुआं एह् उपलब्ध होने दी दर बी बधी गेई ऐ। तां मैं इक बारी फी एह् सवाल पुच्छना ऐ जे वेब किस चाल्ली कम्म करदा ऐ ते प्लेटफार्म पर केह् उपलब्ध ऐ इसदे बारे च होर जानने लेई समां कड्ढने कन्नै अज्ज तुसेंगी मदद मिलग? बिल्कुल हां। अज्ज वेब प्लेटफार्म गी समझना ते इसदा इस्तेमाल करना सिक्खने कन्नै तुसेंगी होर डेवलपर्स दे मुकाबले बड़ा फायदा होंदा ऐ। चाहे तुस प्रदर्शन, सुलभता, प्रतिक्रियाशीलता, एह् सारे इकट्ठे करियै कम्म करो, जां सिर्फ यूआई फीचर भेजने पर कम्म करो, जेकर तुस एह् इक जिम्मेदार इंजीनियर दे रूप च करना चांह् दे ओ तां तुंदे कोल उपलब्ध उपकरणें गी जानने कन्नै तुसेंगी अपने लक्ष्यें तगर तेज़ी कन्नै ते बेहतर तरीके कन्नै पुज्जने च मदद मिलदी ऐ। कुछ चीजां जिन्हां वास्ते तुहानूं हुण लाइब्रेरी दी लोड़ नहीं हो सकदी अज्ज ब्राउज़र कीऽ समर्थन करदे न, एह् जानदे होई, तां एह् सवाल ऐ जे अस केह् खाई सकने आं? क्या 2025 च गोल कोने करने लेई असेंगी इक div घटक दी लोड़ ऐ? बेशक, अस नेईं करदे। सीमा-त्रिज्या संपत्ति गी इस बिंदु पर 15एं ब’रें शा मते समें थमां इसलै बरतेआ जाने आह् ले सब्भै ब्राउज़रें आसेआ समर्थत कीता गेआ ऐ। औय कोने-आकार बी जल्द ही आ यशा शै, औय बी फैंसी कोने के लरए। आओ, अपेक्षाकृत हालिया फीचरें उप्पर इक नज़र पाचै जेह् ड़े हून सारे बड्डे ब्राउज़रें च उपलब्ध न, ते जिंदा इस्तेमाल तुस अपने कोडबेस च मौजूदा निर्भरताएं गी बदलने लेई करी सकदे ओ. मुद्दा एह् नेईं ऐ जे तुरत अपनी सारी प्यारी लाइब्रेरी गी खाई लैओ ते अपने कोडबेस गी दुबारा लिखो। रही गल्ल बाकी हर चीज दी तां तुसेंगी पैह् ले ब्राउज़र समर्थन गी ध्यान च रक्खना होग ते अपने प्रोजेक्ट आस्तै विशिश्ट होर कारकें दे आधार उप्पर फैसला करना होग। निम्नलिखित फीचर त्रै मुक्ख ब्राउज़र इंजन (क्रोमियम, वेबकिट, ते गेको) च लागू कीते गेदे न, पर तुंदे कोल ब्राउज़र समर्थन दी बक्ख-बक्ख जरूरतां हो सकदियां न जेह् ड़ियां तुसेंगी तुरत इस्तेमाल करने थमां रोकदियां न। हुण अजें बी इनें फीचरें दे बारे च जानने दा इक अच्छा समां ऐ, हालांकि, ते शायद कुसै समें इन्हें दा इस्तेमाल करने दी योजना बनाओ। पोपोवर्स ते डायलॉग पोपोवर एपीआई,
ज़रूर, तुंदी इंटरनेट कनेक्शन दी गति बी शायद बधी गेई ऐ, पर एह् हर कुसै आस्तै नेईं ऐ। ते हर इक दी डिवाइस दी क्षमता बी इक जेही नेईं होंदी। उनें चीजें लेई त्रीयें पार्टी कोड गी खींचने दा मतलब ऐ जेह् ड़ी तुस प्लेटफार्म कन्नै करी सकदे ओ, इसदे बजाय, मते शा मता मतलब ऐ जे तुस मता कोड भेजदे ओ, ते इसलेई तुस सामान्य रूप कन्नै कम्म करने आह् ले थमां घट्ट ग्राहकें तगर पुज्जदे ओ। वेब पर, खराब लोडिंग प्रदर्शन कन्नै बड्डी परित्याग दर होंदी ऐ ते ब्रांड दी प्रतिष्ठा गी नुकसान पुज्जदा ऐ। डिवाइस पर कम कोड चलाना इ’दे अलावा, कोड जेह् ड़ा तुस अपने ग्राहकें दे डिवाइस पर भेजदे ओ तां संभावना ऐ जे ओह् तेज़ी कन्नै चलदा ऐ जेकर एह् प्लेटफार्म दे उप्पर जावास्क्रिप्ट अमूर्तताएं दा कम्म करदा ऐ। एह् बी संभवत: डिफ़ॉल्ट रूप कन्नै मता जवाबदेह ते मता सुलभ ऐ। इस सब कन्नै ग्राहक मते ते खुश होंदे न। मेरे साथी एलेक्स रसेल दे सालाना प्रदर्शन असमानता अंतर ब्लॉग दी जांच करो, जेह् ड़ा दस्सदा ऐ जे प्रीमियम डिवाइस धन असमानता दे कारण अरबें-खरबें बरतूनी आह् ले बजारें च मते तौले गैरहाजिर न। ते एह् खाई समें कन्नै गै बधदी जा करदी ऐ।
बिल्ट-इन चिनाई लेआउट इक वेब प्लेटफार्म फीचर जेह् ड़ा जल्द गै औने आह् ला ऐ ते जिसदे बारे च मैं बड़ा उत्साहित ऐं ओह् ऐ सीएसएस चिनाई।
मैं शुरू करदा हां कि चिनाई की है। चिनाई क्या है चिनाई इक किस्म दा लेआउट ऐ जिसगी सालें पैह्लें पिनट्रेस ने लोकप्रिय बनाई दित्ता हा। एह् सामग्री दे स्वतंत्र ट्रैक बनांदा ऐ जिसदे अंदर आइटम अपने आप गी ट्रैक दी शुरूआत दे जित्थै तगर होई सकै उतने नेड़े पैक करदे न।
कई लोग चिनाई गी पोर्टफोलियो ते फोटो गैलरी आस्तै इक शानदार विकल्प दे रूप च दिक्खदे न, जेह्ड़ा एह् निश्चित रूप कन्नै करी सकदा ऐ। पर चिनाई जेह्ड़ी तुस Pinterest पर दिक्खदे ओ उसदे कोला बी मती लचीला ऐ, ते एह् सिर्फ झरने आह्ले लेआउट तगर सीमित नेईं ऐ। इक चिनाई लेआउट च:
ट्रैक स्तंभ जां पंक्तियां होई सकदियां न:
सामग्री दे ट्रैक सारें दा आकार इक गै नेईं होना चाहिदा:
आइटम कई ट्रैकें च फैली सकदे न:
आइटमें गी विशिष्ट पटरी पर रक्खेआ जाई सकदा ऐ; उ’नेंगी हमेशा स्वचालित प्लेसमेंट एल्गोरिथम दा पालन करना नेईं पौंदा:
डेमोस क्रोमियम च सीएसएस चिनाई दे आगामी कार्यान्वयन दा इस्तेमाल करियै मैं कीते गेदे किश साधारण डेमो दित्ते गेदे न। इक फोटो गैलरी डेमो, जेह् ड़ा दस्सदा ऐ जे किस चाल्ली आइटम (इस मामले च शीर्षक) मते सारे ट्रैकें गी फैला सकदे न:
इक होर फोटो गैलरी जेह् ड़ी बक्ख-बक्ख आकारें दे ट्रैक दस्सदी ऐ:
इक खबर साइट लेआउट जिस च किश ट्रैक दूएं कोला चौड़े होंदे न, ते किश आइटम लेआउट दी पूरी चौड़ाई च फैले दे न:
इक कनबन बोर्ड जेह् ड़ा दस्सदा ऐ जे आइटमें गी विशिष्ट पटरी पर रक्खेआ जाई सकदा ऐ:
नोट: दीपिछले डेमो क्रोमियम दे इक संस्करण कन्नै कीते गेदे हे जेह् ड़ा अजें तगर मते सारे वेब बरतूनी गी उपलब्ध नेईं ऐ, कीजे CSS चिनाई गी ब्राउज़रें च लागू करना हून गै शुरू होई गेआ ऐ। हालांकि, वेब डेवलपर पैह्लें गै बरें थमां चिनाई लेआउट बनाने लेई लाइब्रेरी दा इस्तेमाल खुशी-खुशी करा करदे न। आज चिनाई दा इस्तेमाल करदे साइटें दरअसल, अज्ज वेब पर चिनाई काफी आम ऐ। Pinterest दे अलावा मिगी मिले दे किश उदाहरण दित्ते गेदे न:
ते किश होर, कम स्पष्ट, उदाहरण:
तो, इह लेआउट किवें बणाए गए? उपायें दा समाधान इक चाल जेह् ड़ी मैं इस्तेमाल कीती गेदी दिक्खी ऐ ओह् ऐ इसदे बजाय फ्लेक्सबॉक्स लेआउट दा इस्तेमाल करना, इसदी दिशा गी स्तंभ च बदलना, ते इसगी लपेटने आस्तै सेट करना। इस चाल्ली, तुस बक्ख-बक्ख उंचाई आह् ली चीजें गी मते सारे, स्वतंत्र स्तंभें च रक्खी सकदे ओ, जिस कन्नै चिनाई लेआउट दा आभास होई सकदा ऐ:
हालांकि, इस वर्कअराउंड कन्नै दो सीमाएं न:
आइटम दा क्रम उस तों अलग है जो असली चिनाई लेआउट दे नाल होवेगा। फ्लेक्सबॉक्स कन्नै, आइटम पैह् ले स्तंभ गी भरदे न ते, जदूं एह् भरोची जंदा ऐ तां, उसदे बाद अगले स्तंभ च जांदे न। चिनाई दे नाल, आइटम जिस ट्रैक (या इस मामले विच कॉलम) विच ज्यादा जगह उपलब्ध होवे, उस विच ढेर हो जांदी। पर एह् बी, ते शायद इस थमां बी मती जरूरी गल्ल एह् ऐ जे इस वर्कअराउंड दी लोड़ ऐ जे तुस फ्लेक्सबॉक्स कंटेनर गी इक निश्चित ऊंचाई सेट करो; वरना कोई लपेट नहीं होंदा।
थर्ड पार्टी चिनाई लाइब्रेरी होर उन्नत मामलें लेई, डेवलपर लाइब्रेरी दा इस्तेमाल करदे आए न। इसदे लेई सबनें थमां मशहूर ते लोकप्रिय लाइब्रेरी दा नांऽ बस चिनाई ऐ, ते एनपीएम दे मताबक एह् हर हफ्ते लगभग 200,000 बारी डाउनलोड होंदा ऐ। स्क्वायरस्पेस इक लेआउट घटक बी उपलब्ध करोआंदा ऐ जेह् ड़ा इक चिनाई लेआउट रेंडर करदा ऐ, नो-कोड विकल्प आस्तै, ते मती सारी साइटें इसदा इस्तेमाल करदियां न। एह् दवैं विकल्प लेआउट च आइटम रखने लेई जावास्क्रिप्ट कोड दा उपयोग करदे न. बिल्ट-इन चिनाई मैं सच्चें गै उत्साहित ऐं जे चिनाई हून ब्राउज़रें च बिल्ट-इन सीएसएस फीचर दे रूप च दिक्खने गी लग्गी दी ऐ। समें कन्नै, तुस चिनाई दा इस्तेमाल उस्सै चाल्लीं करी सकगे जि’यां तुस ग्रिड जां फ्लेक्सबॉक्स करदे ओ, यानी कुसै बी वर्कअराउंड जां त्रीयें पार्टी कोड दी लोड़ दे बगैर। माइक्रोसॉफ्ट च मेरी टीम क्रोमियम ओपन सोर्स प्रोजेक्ट च बिल्ट-इन चिनाई समर्थन लागू करा करदी ऐ, जिस पर एज, क्रोम, ते होर मते सारे ब्राउज़र आधारत न। मोज़िला असल च पैह्ला ब्राउज़र विक्रेता हा जिसने 2020 च वापस चिनाई दे प्रयोगात्मक लागू करने दा प्रस्ताव कीता हा।ते एप्पल ने बी इस नमें वेब लेआउट गी आदिम बनाने च बड़ी रुचि लेई ऐ। फीचर गी मानक बनाने दा कम्म बी अग्गें बधदा जा करदा ऐ, जिस च सीएसएस वर्किंग ग्रुप दे अंदर सामान्य दिशा ते इत्थूं तगर जे इक नमें डिस्प्ले टाइप डिस्प्ले दे बारे च सहमति ऐ: ग्रिड-लेन। जेकर तुस चिनाई दे बारे च होर जानना चांह् दे ओ ते प्रगति गी ट्रैक करना चांह् दे ओ तां मेरा सीएसएस चिनाई संसाधन पृष्ठ दिक्खो। समें कन्नै, जदूं चिनाई इक बेसलाइन फीचर बनी जाग, जि’यां ग्रिड जां फ्लेक्सबॉक्स, तां अस इसदा बस इस्तेमाल करी सकगे ते इसदा फायदा लैगे:
बेहतर प्रदर्शन, बेहतर जवाबदेही, इस्तेमाल च सहूलियत ते सरल कोड।
आओ इन्हें गी होर नेड़में कन्नै दिक्खने आं। बेहतर प्रदर्शन अपना खुद दी चिनाई-जैसी लेआउट सिस्टम बनाने, जां इसदे बजाय त्रीयें पार्टी दी लाइब्रेरी दा इस्तेमाल करने दा मतलब ऐ जे तुसेंगी स्क्रीन पर आइटम रखने लेई जावास्क्रिप्ट कोड चलाना होग. इसदा मतलब एह् बी ऐ जे एह् कोड रेंडर ब्लॉकिंग होग। दरअसल, या तां कुसै बी चीजै दा पता नेईं चलग, जां चीजां सच्ची थाह् रें पर जां सच्चे आकारें च नेईं होङन, जदूं तगर ओह जावास्क्रिप्ट कोड नेईं चलदा। चिनाई लेआउट दा इस्तेमाल अक्सर वेब पेज दे मुक्ख हिस्से आस्तै कीता जंदा ऐ, जिसदा मतलब ऐ जे कोड तुंदी मुक्ख सामग्री गी उस थमां बाद च दिक्खने च मदद करदा होग, जेह् ड़ा तुंदी एलसीपी, जां सबनें थमां बड्डा सामग्रीपूर्ण पेंट मीट्रिक गी घट्ट करदा ऐ, जेह् ड़ा अनुमानित प्रदर्शन ते सर्च इंजन अनुकूलन च बड़ी भूमिका निभांदा ऐ। मैं चिनाई जेएस लाइब्रेरी दा परीक्षण इक साधारण लेआउट कन्नै ते DevTools च इक धीमी 4G कनेक्शन दा अनुकरण करियै कीता। लाइब्रेरी बड़ी बड्डी नेईं ऐ (24KB, 7.8KB gzipped), पर मेरी परीक्षण शर्तें दे तहत लोड होने च 600ms लग्गे। इत्थै इक प्रदर्शन रिकार्डिंग ऐ जेह् ड़ी दस्सदी ऐ जे चिनाई लाइब्रेरी आस्तै लम्मा 600ms लोड समां, ते जे जिसलै एह् होआ करदा हा तां कोई होर रेंडरिंग गतिविधि नेईं होई ऐ:
इसदे अलावा, शुरूआती लोड समें दे बाद, डाउनलोड कीती गेदी स्क्रिप्ट गी उसदे बाद पार्स करने, संकलित करने ते फिर चलाने दी लोड़ ही. जो सब, जिवें पहले आख्या गया है, पेज दे रेंडरिंग नू ब्लॉक कर रहे सी। ब्राउज़र च बिल्ट-इन चिनाई कार्यान्वयन कन्नै, साढ़े कोल लोड ते चलाने आस्तै कोई स्क्रिप्ट नेईं होग। ब्राउज़र इंजन सिर्फ शुरूआती पृष्ठ रेंडरिंग कदम दे दौरान अपनी गल्ल करग। बेहतर जवाबदेही जि'यां कोई पृष्ठ पैह् ले लोड होंदा ऐ तां ब्राउज़र विंडो दा आकार बदलने कन्नै उस पृष्ठ च लेआउट गी दुबारा रेंडर कीता जंदा ऐ. इस बिंदु पर, हालांकि, जेकर पृष्ठ मेसनरी जेएस लाइब्रेरी दा इस्तेमाल करा करदा ऐ तां स्क्रिप्ट गी दुबारा लोड करने दी लोड़ नेईं ऐ, कीजे एह् पैह् ले थमां गै ऐइत्थें। हालांकि, कोड जेह् ड़ा आइटमें गी सही थाह् रें पर लेई जंदा ऐ, उसी चलाने दी लोड़ ऐ। हुण एह् खास लाइब्रेरी इस गल्लै गी करने च काफी तेज़ लगदी ऐ जिसलै पेज लोड होंदा ऐ। हालांकि, एह् आइटमें गी एनिमेट करदा ऐ जिसलै उनेंगी विंडो रिसाइज पर कुसै होर थाह् र पर जाने दी लोड़ होंदी ऐ, ते इस कन्नै बड़ा फर्क पौंदा ऐ। बेशक, बरतूनी अपने ब्राउज़र विंडो दा आकार बदलने च उन्ना समां नेईं लांदे जितना अस डेवलपर करदे आं। पर एह् एनिमेटेड आकार बदलने दा अनुभव काफी जरिंग होई सकदा ऐ ते पृष्ठ गी अपने नमें आकार दे अनुकूल होने च लगने आह् ले अनुमानित समें च जोड़दा ऐ। इस्तेमाल च सहूलियत ते सरल कोड वेब फीचर दा इस्तेमाल करना किन्ना आसान ऐ ते कोड किन्ना सरल दिक्खदा ऐ, एह् महत्वपूर्ण कारक न जेह् ड़े तुंदी टीम आस्तै बड़ा फर्क पाई सकदे न। एह् कदें बी अंतिम बरतूनी दे अनुभव जिन्ना महत्वपूर्ण नेईं होई सकदे न, बेशक्क, पर डेवलपर दा अनुभव रखरखाव गी प्रभावित करदा ऐ। बिल्ट-इन वेब फीचर दा इस्तेमाल करने कन्नै उस मोर्चे पर महत्वपूर्ण फायदे होंदे न:
जेह् ड़े डेवलपर पैह् ले थमां गै HTML, CSS, ते JS गी जानदे न ओह् मती संभावना ऐ जे ओह् उस सुविधा दा इस्तेमाल आसानी कन्नै करी सकङन कीजे एह् इस चाल्लीं डिजाइन कीता गेदा ऐ जे एह् खरी चाल्ली इकट्ठा होई सकै ते बाकी वेब प्लेटफार्म कन्नै मेल खंदा ऐ। फीचर दा इस्तेमाल किस चाल्ली कीता जंदा ऐ इस च बदलाव गी तोड़ने दा कोई खतरा नेईं ऐ। उस फीचर गी बरतून नेईं करने दा लगभग शून्य जोखिम ऐ।
बिल्ट-इन चिनाई दे मामले च, कीजे एह् इक लेआउट प्रिमिटिव ऐ, तुस इसदा इस्तेमाल CSS थमां करदे ओ, ठीक ग्रिड जां फ्लेक्सबॉक्स दी तर्ज पर, कोई जेएस शामल नेईं ऐ. एह्दे कन्नै गै, लेआउट कन्नै सरबंधत होर CSS गुण, जि’यां गैप, उ’यां कम्म करदे न जि’यां तुस उम्मीद करदे ओ. इसदे बारे च जानने आस्तै कोई चाल जां वर्कअराउंड नेईं ऐ , ते जेह् ड़ियां गल्लां तुस सिक्खदे ओ ओह् एमडीएन पर दस्तावेज कीते गेदे न। मेसनरी जेएस lib आस्तै, आरंभ करना थोड़ा जटिल ऐ: इसगी स्तंभ ते गैप आकार सेट करने आस्तै छिपे दे HTML तत्वें दे कन्नै-कन्नै, इक विशिष्ट सिंटैक्स कन्नै इक डेटा विशेषता दी लोड़ होंदी ऐ. प्लस, जेकर तुस स्तंभें गी स्पैन करना चांह् दे ओ तां तुसेंगी समस्याएं थमां बचने आस्तै गैप साइज गी अपने आपै च शामल करने दी लोड़ ऐ:
<शैली> .ट्रैक-साइजर, ऐ। .आइटम { चौड़ाई: 20% ऐ; } ऐ .गटर-साइजर { चौड़ाई: 1रेम ऐ; } ऐ .आइटम { ऊंचाई: 100px ऐ; मार्जिन-ब्लॉक-अंत: 1रेम ऐ; } ऐ .आइटम: nth-बच्चा (अजीब) { ऊंचाई: 200px ऐ; } ऐ .आइटम--चौड़ाई2 { चौड़ाई: कैलक (40% + 1 रेम); } ऐ दा
आओ इसदी तुलना इस कन्नै करचै जे इक बिल्ट-इन चिनाई दा कार्यान्वयन केह् होग: <शैली> .कंटेनर { प्रदर्शन: ग्रिड-लेन; ग्रिड-लेन: दोहराओ (4, 20%); अंतराल: 1रेम दा; } ऐ .आइटम { ऊंचाई: 100px ऐ; } ऐ .आइटम: nth-बच्चा (अजीब) { ऊंचाई: 200px ऐ; } ऐ .आइटम--चौड़ाई2 { ग्रिड-स्तंभ: स्पैन 2 ऐ; } ऐ दा
सरल, मता कॉम्पैक्ट कोड जेह् ड़ा सिर्फ गैप जनेह् चीजें दा इस्तेमाल करी सकदा ऐ ते जित्थै स्पैनिंग ट्रैक स्पैन 2 कन्नै कीता जंदा ऐ, जि’यां ग्रिड च, ते तुसेंगी सच्ची चौड़ाई दी गणना करने दी लोड़ नेईं ऐ जेह् ड़ी गैप दा आकार शामल ऐ। किस चाल्ली जानना ऐ जे केह् उपलब्ध ऐ ते कदूं उपलब्ध ऐ ? कुल मिलाइयै, सवाल असल च एह् नेईं ऐ जे तुसेंगी जेएस लाइब्रेरी उप्पर बिल्ट-इन चिनाई दा इस्तेमाल करना चाहिदा ऐ जां नेईं, बल्के एह् कदूं ऐ। चिनाई जेएस लाइब्रेरी कमाल दी ऐ ते कई सालें थमां वेब प्लेटफार्म च इक गैप गी भरदी ऐ, ते मते सारे खुश डेवलपर्स ते यूजर्स आस्तै। जेकर तुस इसदी तुलना बिल्ट-इन चिनाई दे अमल कन्नै करो तां इसदी किश खामियां न, बेशक्क, पर जेकर ओह अमल तैयार नेईं ऐ तां ओह् महत्वपूर्ण नेईं न। मेरे लेई इनें मस्त नमें वेब प्लेटफार्म फीचरें गी सूचीबद्ध करना बड़ा सौखा ऐ की जे मैं इक ब्राउज़र विक्रेता पर कम्म करना, ते इसलेई मैं जानने दी प्रवृत्ति रखना जे केह् आने आह् ला ऐ। पर डेवलपर अक्सर साझा करदे न, सर्वेक्षण दे बाद सर्वेक्षण, कि नमीं चीजें दा ट्रैक रखना मुश्कल ऐ। जानकारी च रौह्ना मुश्कल ऐ, ते कम्पनियां हर चाल्लीं हर चाल्लीं सिक्खने गी प्राथमिकता नेईं दिंदियां न। इस च मदद करने लेई, इत्थै किश संसाधन दित्ते गेदे न जेह् ड़े सरल ते संकुचित तरीके कन्नै अपडेट उपलब्ध करोआंदे न तां जे तुसेंगी लोड़चदी जानकारी जल्दी हासल होई सकै:
वेब प्लेटफार्म च एक्सप्लोरर साइट दी सुविधा ऐ: तुसें गी इसदे रिलीज नोट्स पेज च रुचि होई सकदी ऐ। ते, जेकर तुसें गी आरएसएस पसंद ऐ तां रिलीज नोट फीड, ते कन्नै गै बेसलाइन नमें उपलब्ध ते व्यापक रूप कन्नै उपलब्ध फीड्स दी जांच करो।
वेब दाप्लेटफार्म स्थिति डैशबोर्ड: तुसें गी इसदे बक्ख-बक्ख बेसलाइन साल दे पेज पसंद आई सकदे न।
क्रोम प्लेटफार्म स्थिति’ रोडमैप पेज।
जेकर तुंदे कोल थोड़ा होर समां ऐ तां तुस ब्राउज़र विक्रेताएं दे रिलीज नोटें च बी रुचि लैई सकदे ओ:
क्रोम किनारा फायरफॉक्स सफारी
होर बी मते संसाधनें लेई, मेरा वेब प्लेटफार्म चीटशीट नेविगेट करना दिक्खो। मेरी गल्ल अजें बी लागू नेईं होई ऐ इ’यै समस्या दा दूआ पास्सा ऐ। भलेआं तुसें गी ट्रैक रखने दा समां, ऊर्जा ते तरीके लब्भदे न, पर तुंदी आवाज़ गी सुनने ते तुंदे पसंदीदा फीचरें गी लागू करने च अजें बी निराशा ऐ। शायद तुस बरें थमां इंतजार करा करदे ओ जे कुसै खास बग गी हल कीता जा, जां कुसै खास फीचर गी ब्राउज़र च भेजेआ जा जित्थै एह् अजें बी गायब ऐ। मैं जेह् ड़ा आखना ऐ जे ब्राउज़र विक्रेता जरूर सुनदे न। मैं केईं पार-संगठन टीमें दा हिस्सा आं जित्थें अस हर समें डेवलपर सिग्नल ते प्रतिक्रियाएं पर चर्चा करदे आं। अस प्रतिक्रिया दे मते सारे बक्ख-बक्ख स्रोत दिक्खने आं, हर ब्राउज़र विक्रेता पर आंतरिक ते मंच, ओपन सोर्स प्रोजेक्ट, ब्लॉग, ते सर्वेक्षण पर बाहरी/सार्वजनिक दोनों। ते, अस हमेशा डेवलपर्स आस्तै उंदी खास जरूरतें ते इस्तेमाल दे मामलें गी सांझा करने दे बेहतर तरीके बनाने दी कोशश करा’रदे आं। इसलेई, जेकर तुस करी सकदे ओ तां कृपा करियै ब्राउज़र विक्रेताएं थमां होर मती मंग करो ते तुसेंगी लोड़चदे फीचरें गी लागू करने लेई असेंगी दबाव बनाओ। मेनू मिलदा है कि इस विच वक्त लगदा है, ते डरावना वी हो सकदा है (प्रवेश विच उच्ची बाधा दा जिक्र नहीं करना), पर ए वी कम्म करदा है। इत्थै किश तरीके न जेह् ड़े तुस अपनी (जां तुंदी कंपनी दी) आवाज़ गी सुनाई सकदे ओ: जेएस दी सालाना स्थिति, सीएसएस दी स्थिति, ते एचटीएमएल दी स्थिति दे सर्वेक्षण लैओ। ब्राउज़र विक्रेता अपने कम्मै गी किस चाल्ली प्राथमिकता दिंदे न इस च उंदी बड़ी मती भूमिका होंदी ऐ। जेकर तुसेंगी ब्राउज़रें च लगातार लागू करने आस्तै इक विशिष्ट मानक-आधारत एपीआई दी लोड़ ऐ तां अगले इंटरओप प्रोजेक्ट पुनरावृत्ति पर इक प्रस्ताव जमा करने पर विचार करो. इस च मता समां लोड़चदा ऐ, पर इस गल्लै उप्पर विचार करो जे Shopify ते RUMvision ने इंटरप 2026 आस्तै अपनी इच्छा सूची गी किस चाल्ली साझा कीता ऐ इस चाल्ली दी विस्तृत जानकारी ब्राउज़र विक्रेताएं आस्तै प्राथमिकता देने लेई मती उपयोगी होई सकदी ऐ। ब्राउज़र विक्रेताएं गी प्रभावित करने आस्तै होर मते उपयोगी लिंक आस्तै, मेरा वेब प्लेटफार्म चीटशीट नेविगेट करना दिक्खो। निष्कर्ष निकालना बंद करने आस्तै, मेद ऐ जे इस लेख कन्नै तुंदे कोल किश गल्लां सोचने आस्तै छडी गेदे न:
चिनाई ते होर आने आह् ले वेब फीचरें लेई उत्साह। किश वेब फीचर जिंदा इस्तेमाल तुस शुरू करना चांह् दे ओ। कस्टम जां 3rd-पार्टी कोड दे किश टुकड़े तुस बिल्ट-इन फीचरें दे पक्ष च हटाई सकदे ओ। आने आह् ले चीजें दा ट्रैक रखने ते ब्राउज़र विक्रेताएं गी प्रभावित करने दे किश तरीके।
एह्दे शा बी मती गल्ल एह् ऐ जे मैं उम्मीद करना जे मैं तुसें गी वेब प्लेटफार्म दी पूरी क्षमता कन्नै इस्तेमाल करने दे फायदें बारै आश्वस्त करी दित्ता ऐ।
