यहां आपके जानने योग्य तथ्य दिए गए हैं:
- Chrome और Firefox के 100वें वर्शन के रिलीज़ होने में अब कुछ ही हफ़्ते बचे हैं.
- सीएसएस कैस्केड लेयर से आपको अपने सीएसएस पर ज़्यादा कंट्रोल मिलता है. साथ ही, इससे स्टाइल की खास बातों के बीच के टकराव से भी बचा जा सकता है.
showPicker()वाला तरीका आपकोdate,color, औरdatalistजैसे<input>एलिमेंट के लिए, प्रोग्राम के हिसाब से ब्राउज़र पिकर दिखाने की सुविधा देता है.- और यहां और भी बहुत कुछ है.
मेरा नाम पीट लेपेज है. आइए, जानें कि Chrome 99 में डेवलपर के लिए क्या नया है.
Chrome 100 और Firefox 100
Chrome 100 का इस्तेमाल मार्च (2022 के आखिर में) में किया जाएगा. वहीं, Firefox 100 से मई की शुरुआत में, होने के कुछ समय बाद शिपिंग शुरू कर दी जाएगी. ये दोनों वर्शन नंबर की बड़ी उपलब्धि हैं और इन्हें तीन अंकों में रोल आउट किया जाएगा. हालांकि, अगर आपके कोड में दो अंकों की ज़रूरत है, तो नए वर्शन के नंबर की वजह से आपको समस्याएं आ सकती हैं.
वर्शन नंबर की जांच करने वाले या उपयोगकर्ता एजेंट स्ट्रिंग को पार्स करने वाले किसी भी कोड की जांच की जानी चाहिए, ताकि यह पक्का किया जा सके कि उसमें कोई समस्या नहीं है.
Chrome में, #force-major-version-to-100 फ़्लैग से मौजूदा वर्शन नंबर 100 हो जाएगा.
साथ ही, Firefox Nightly के सेटिंग मेन्यू में जाकर, "Firefox 100 उपयोगकर्ता-एजेंट स्ट्रिंग" विकल्प को चालू किया जा सकता है. अपनी साइट की जांच करना एक अच्छा विचार है, ताकि यह पक्का किया जा सके कि सब कुछ आपकी उम्मीद के मुताबिक काम कर रहा है.
पूरी जानकारी के लिए, Chrome और Firefox जल्द ही मेजर वर्शन 100 पर पहुंचेंगे लेख पढ़ें.
सीएसएस कैस्केड लेयर
सीएसएस कैस्केड लेयर और सीएसएस @layer नियम के लिए सहायता, Chrome 99 में उपलब्ध है. इनसे आपकी सीएसएस फ़ाइलों पर साफ़ तौर पर कंट्रोल मिलता है, ताकि स्टाइल की खासियत के विवादों को रोका जा सके. यह बड़े कोडबेस, डिज़ाइन सिस्टम
और ऐप्लिकेशन में तीसरे पक्ष की स्टाइल को मैनेज करते समय खास तौर पर काम का होता है.
ये सीएसएस कैस्केड में एक नई लेयर जोड़ते हैं. लेयर वाली स्टाइल में, किसी लेयर की प्राथमिकता हमेशा किसी सिलेक्टर की खास जानकारी से ज़्यादा होती है.
अगर आपको .card में किसी लिंक को स्टाइल करना है, तो .post में आपको ज़्यादा सटीक सिलेक्टर दिखेगा. @layer के नियम का इस्तेमाल करके, हर लिंक के स्टाइल के बारे में ज़्यादा जानकारी दी जा सकती है. साथ ही, यह पक्का किया जा सकता है कि आपके कार्ड में मौजूद लिंक का स्टाइल, आपकी पोस्ट में मौजूद लिंक के स्टाइल को बदल दे.
@layer base {
a {
font-weight: 800;
color: red;
}
.link {
color: blue;
}
}
ऐसा कैस्केड प्रिसिडेंसी की वजह से होता है. लेयर वाली स्टाइल से नए कैस्केड प्लैन बनते हैं.
CSS @layer नियम का इस्तेमाल करके कैस्केड लेयर, Chrome 99, Firefox 97, और Safari 15.4 बीटा में काम करती हैं. ज़्यादा जानकारी के लिए, आपके ब्राउज़र में कैस्केड लेयर आने वाली हैं देखें.
इनपुट एलिमेंट के लिए showPicker()
लंबे समय से, हमें डेट पिकर दिखाने के लिए, कस्टम विजेट लाइब्रेरी या हैक का इस्तेमाल करना पड़ता था. एचटीएमएल InputElements में, showPicker() का एक नया तरीका है.
यह ब्राउज़र पिकर दिखाने का कैननिकल तरीका है. यह तरीका, सिर्फ़ date के लिए ही नहीं, बल्कि
time, color, और पिकर वाले अन्य <input> एलिमेंट के लिए भी इस्तेमाल किया जा सकता है.
इसका इस्तेमाल करने के लिए, <input> एलिमेंट पर showPicker() को कॉल करें. इस उदाहरण में, मैंने इसे try…catch ब्लॉक में रैप किया है. इससे मुझे फ़ॉलबैक देने की सुविधा मिलती है,
अगर ब्राउज़र एपीआई के साथ काम नहीं करता है या पिकर नहीं दिखा सकता. इस तरह,
यह पक्का किया जाता है कि उपयोगकर्ताओं को अब भी अच्छा अनुभव मिले.
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// A date picker is shown.
} catch (error) {
// Use an external library when this fails.
}
});
पूरी जानकारी के लिए, तारीख, समय, रंग, और फ़ाइलों के लिए ब्राउज़र पिकर दिखाएं लेख पढ़ें. साथ ही, <input> के उन सभी अलग-अलग टाइप के बारे में जानें जिनका इस्तेमाल showPicker() के लिए किया जा सकता है.
और भी कई सुविधाएं!
इसके अलावा, और भी बहुत कुछ है.
Canvas2D API को अपडेट किया गया है. इसमें नई सुविधाएं जोड़ी गई हैं. जैसे:
ContextLostऔरContextRestoredके लिए दो नए इवेंटwillReadFrequentlyका एक विकल्प- सीएसएस टेक्स्ट मॉडिफ़ायर की ज़्यादा सुविधा
- और ज़्यादा.
डार्क मोड के लिए वेब ऐप्लिकेशन मेनिफ़ेस्ट में, पीडब्ल्यूए को वैकल्पिक रंग उपलब्ध कराने की अनुमति देने के लिए, एक नया ऑरिजिन ट्रायल शुरू किया गया है.
साथ ही, हैंडराइटिंग की पहचान करने वाला एपीआई भी लॉन्च हो गया है.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ अहम हाइलाइट के बारे में बताया गया है. Chrome 99 में हुए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.
- Chrome DevTools (99) में नया क्या है
- Chrome 99 में बंद किए गए और हटाए गए फ़ंक्शन
- Chrome 99 के लिए ChromeStatus.com के अपडेट
- Chromium सोर्स की रिपॉज़िटरी में बदलाव की सूची
- Chrome के रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
मेरा नाम पीट लेपेज है और जैसे ही Chrome 100 रिलीज़ होगा, मैं आपको Chrome की नई सुविधाओं के बारे में बताऊंगी!