पिछले साल इंटरऑप 2023 खत्म हो गया. ब्राउज़र वेंडर और अन्य पक्षों की इस कोशिश का मकसद ज़्यादा इंटरऑपरेबल वेब बनाना है. इसमें अलग-अलग ब्राउज़र के ज़रिए आपको ज़्यादा बेहतर अनुभव दिया जा सकता है. इस पोस्ट में अंतिम परिणामों के साथ-साथ Chrome टीम की कुछ पसंदीदा सुविधाएं भी शामिल हैं.
फ़ाइनल स्कोर
इतनी सारी हरी-भरी जगहों को देखना अच्छा लगता है और इनकी तुलना 2023 की शुरुआत से के स्कोर से करें. हमने इस सफ़र को आगे बढ़ाते हुए, हर ब्राउज़र के स्कोर में काफ़ी बढ़ोतरी देखी है.
हम किस बात को लेकर उत्साहित हैं?
इंटरऑप 2023 डैशबोर्ड पर, साल 2023 के लिए फ़ोकस किए जाने वाले विषयों की पूरी सूची देखें. फ़ोकस वाले कुछ क्षेत्र, जैसे कि :has(), कंटेनर क्वेरी, और inert एट्रिब्यूट में पूरी सुविधा को शामिल किया गया है. कुछ अन्य उदाहरण
उदाहरण के लिए, Flexbox पर किए गए काम ने किसी मौजूदा क्रॉस-ब्राउज़र सुविधा में
कुछ छोटी-मोटी जांच की गड़बड़ियों के बारे में बताया है.
:has()
"आखिर में, सीएसएस के लिए पैरंट सिलेक्टर! इस बारे में पहले दिन से ही अनुरोध किया जा रहा है और अब सभी ब्राउज़र पर इसका होना शानदार है. साथ ही, इसका मतलब है कि इस सिलेक्टर को एम्युलेट करने के लिए, डेवलपर को कम JavaScript चलाने की ज़रूरत है."—थॉमस स्टेनर, Chrome पर डेवलपर रिलेशन इंजीनियर.
फ़ंक्शनल सूडो-क्लास
:has() को लेकर, लोग बहुत उत्साहित हैं. इसकी वजह यह है कि इस प्लैटफ़ॉर्म पर डेवलपर के खास अनुरोध की वजह से ऐसा हुआ है. इससे आपको एक पैरंट सिलेक्टर मिलता है—आपके पास उसमें मौजूद चीज़ों के आधार पर एलिमेंट चुनने का विकल्प होता है. हालांकि, इसका इस्तेमाल और भी कई कामों के लिए किया जा सकता है. जैसा कि सीएसएस रैप किया गया में बताया गया है, पैरंट एलिमेंट से ज़्यादा एलिमेंट चुने जा सकते हैं और तिरछा भी चुना जा सकता है.
:has() डेमो: डॉकChrome टीम में डेवलपर रिलेशन इंजीनियर, यूना क्रावेट्स बताती हैं कि:
":has() का सिलेक्टर, सीएसएस की सबसे लचीली और नई उपलब्ध सुविधाओं में से एक है. इसकी मदद से, किसी भी पैरंट को उनकी मौजूदगी, स्थिति या यहां तक कि चाइल्ड एलिमेंट की संख्या के आधार पर स्टाइल किया जा सकता है. इसमें खास बात यह है कि इसे भाई-बहनों को स्टाइल देने के लिए, इसे अन्य कॉम्बिनेशन के साथ मिलाकर अपने यूज़र इंटरफ़ेस (यूआई) की स्टाइल कंट्रोल किया जा सकता है. यह बहुत सुविधाजनक सुविधा है! मैंने पहले ही कई शानदार डेमो देखे हैं. इनसे :has() की मदद से, अतिरिक्त स्क्रिप्टिंग की ज़रूरत कम पड़ती है."
जैसा कि Chrome के सॉफ़्टवेयर इंजीनियर फ़िलिप जेगेन्स्टेड ने बताया है कि साल 2023 में सीएसएस के स्टेट ऑफ़ सीएसएस सर्वे में पूछे गए सवाल पर, सहायता न मिलने की वजह से डेवलपर को :has() सबसे बड़ी सुविधा का सामना करना पड़ा.
इसलिए, इसे उपलब्ध कराने के लिए, सिर्फ़ हम ही नहीं हैं.
ऐडम आर्गाइल के साथ-साथ, ऊना और The CSS Podcast पर has() के बारे में बात की जा सकती है. इसके बाद, वेब कम्यूनिटी पर मौजूद इन पोस्ट से, :has() के बारे में ज़्यादा जानकारी पाई जा सकती है.
- उदाहरणों के हिसाब से, सीएसएस
:has()सिलेक्टर के बारे में जानें - स्क्रोल को
:has()से लॉक करना - सीएसएस
:has()के लिए इस्तेमाल का उदाहरण
कंटेनर से जुड़ी क्वेरी
साल 2023, ऐसे कई काम करने के लिए शानदार साल रहा है जो नामुमकिन थे. :has() के अलावा, वेब प्लैटफ़ॉर्म को आखिरकार कंटेनर क्वेरी के लिए क्रॉस-ब्राउज़र सपोर्ट मिला. रिस्पॉन्सिव डिज़ाइन के कॉन्सेप्ट के आने के एक साल बाद ही, आप साल 2011 से कंटेनर (या एलिमेंट) से जुड़ी क्वेरी पूछ रहे हैं. इसका मतलब है कि यह टूल सभी मुख्य ब्राउज़र इंजन में उपलब्ध है.
ऊना और एडम ने सीएसएस पॉडकास्ट में कंटेनर के बारे में की गई क्वेरी के बारे में बात की. यूना ने 'डिज़ाइनिंग इन द ब्राउज़र' के एक एपिसोड में इन क्वेरी के बारे में बताया. कम्यूनिटी कई सलाह और आइडिया भी शेयर कर रही है.
सबग्रिड
इंटरऑप 2023 में, सबग्रिड शामिल करना मेरा पसंदीदा है. इसकी मदद से, पैरंट एलिमेंट पर एक ग्रिड बनाया जा सकता है. इसके बाद, उस पैरंट एलिमेंट पर बताए गए ट्रैक साइज़ का इस्तेमाल, उस मुख्य ग्रिड के अंदर मौजूद ग्रिड पर किया जा सकता है. Microsoft Edge के वेब प्लैटफ़ॉर्म इंजीनियर काम कर रहे हैं. इस वजह से ही 2023 में सभी मुख्य ब्राउज़र इंजन में सबग्रिड उपलब्ध हो गया. इससे Chrome के स्कोर को बढ़ाने और इस शानदार सुविधा को सभी के लिए उपलब्ध कराया जा सका.
Chrome डेवलपर रिलेशन इंजीनियर एड्रियाना जारा ने मुझे बताया कि कैसे ग्रिड और सबग्रिड से एक शानदार यूज़र इंटरफ़ेस (यूआई) बनाना आसान हो गया,
"मुझे विज़ुअल, लेआउट, लगातार एक जैसा लुक, और स्क्रीन के हिसाब से ढलना बहुत खराब लगता है. हालांकि, ग्रिड और सबग्रिड की मदद से ऐसा डिज़ाइन बनाया जा सकता है जो अलग-अलग स्क्रीन साइज़ में अच्छी तरह से काम करे और कॉन्टेंट के हिसाब से अपने-आप बदल जाए! यह मेरा पसंदीदा है, क्योंकि इससे वेबसाइट बनाने की बुनियादी ज़रूरतों को पूरा किया जाता है, जो उपयोगकर्ताओं को बिना किसी खास विशेषज्ञता के बेहतरीन अनुभव देती है."
मैंने 12 डेज़ ऑफ़ वेब के लिए एक लेख में सबग्रिड के इस्तेमाल के कुछ उदाहरण दिए हैं. इस पोस्ट में बताई गई अन्य सुविधाओं की तरह ही, सीएसएस पॉडकास्ट के एपिसोड को इस बारे में पूरी जानकारी दी जा सकती है. इसके अलावा, वेब पर मौजूद कई सारे संसाधन भी उपलब्ध हैं.
- सीएसएस सबग्रिड के बारे में जानें
- वीडियो: सबग्रिड की मदद से, आसान और एक जैसा लेआउट
- सीएसएस ग्रिड और सबग्रिड का इस्तेमाल करके कॉन्टेंट बनाना
कलर स्पेस और फ़ंक्शन
कोई हैरानी की बात नहीं थी कि Chrome सीएसएस डेवलपर एडम आर्गील ने मुझे बताया कि कलर स्पेस और फ़ंक्शन उनका पसंदीदा फ़ीचर था,
"HSL चैनल की वैल्यू के वैरिएबल मैथमैटिकल गणित को अलविदा कहें. नमस्ते, जस्ट-इन-टाइम कलर वैरिएंट वन-लाइनर. नए कलर स्पेस और फ़ंक्शन से न सिर्फ़ कलर वर्कफ़्लो की समस्याएं हल होती हैं, बल्कि वे ज़्यादा बेहतर, भरोसेमंद, और चमकीले रंगों और ग्रेडिएंट का ऐक्सेस भी देते हैं. ज़िंदगी को आसान बनाने के साथ-साथ कुछ क्षमताएं अनलॉक करने में भी दिलचस्पी नहीं. मज़ेदार मसालों के साथ तैयार हो जाएं और यह पकवान बेहद लज़ीज़ है."
एडम इन नई सुविधाओं को समझने के लिए कुछ शानदार कॉन्टेंट बना रहे हैं. जैसे, हाई डेफ़िनिशन सीएसएस की कलर गाइड और gradient.style. साथ ही, वे सीएसएस पॉडकास्ट पर कलर फ़ंक्शन के बारे में बता रहे हैं.
इन सुविधाओं को सभी मुख्य ब्राउज़र इंजन के साथ इस्तेमाल करना बहुत अच्छा लगता है. इन बेहतरीन लेखों में ज़्यादा जानकारी पाएं.
- सीएसएस के साथ कलर मिक्स करना
- सीएसएस में कलर फ़ॉर्मैट
- सीएसएस में एलसीएच के कलर: क्या, क्यों, और कैसे?
इंटरऑप 2024 से जुड़ी जानकारी
जब सुविधाएं एक-दूसरे के साथ काम करने लायक हो जाती हैं, तब वे बेसलाइन का हिस्सा बन जाती हैं. यह नई सुविधा के लिए उपलब्ध है. इंटरऑप 2023 में शामिल सभी लोगों के काम की वजह से, यह देखना दिलचस्प है कि 2023 के दौरान इस ग्रुप में कितने नए लोग शामिल हुए. साल 2024 के लिए जिन क्षेत्रों पर ध्यान देने की ज़रूरत है उनके बारे में एलान करने का समय जल्द आने वाला है. हम सभी के लिए तैयार हैं कि इस साल वेब प्लैटफ़ॉर्म और बेहतर हो सकता है.