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