यहां आवश्यक जानकारी दी गई है:
- 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;
}
}
ऐसा कैस्केड की प्राथमिकता की वजह से होता है. लेयर वाली स्टाइल से नए कैस्केड हवाई जहाज़ बनते हैं.
सीएसएस @layer नियम का इस्तेमाल करके लेयर कैस्केड करें. यह Chrome 99,
Firefox 97, और Safari 15.4 बीटा में काम करता है. ज़्यादा जानकारी के लिए
आपके ब्राउज़र पर कैस्केड लेयर आ रहे हैं
देखें.
इनपुट एलिमेंट के लिए show Picker()
एक डेट पिकर दिखाने के लिए हमें लंबे समय के लिए कस्टम विजेट लाइब्रेरी या हैक का सहारा लेना पड़ता था. एचटीएमएल 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का विकल्प- सीएसएस टेक्स्ट मॉडिफ़ायर की ज़्यादा सहायता
- और ज़्यादा.
गहरे रंग वाले मोड के लिए वेब ऐप्लिकेशन मेनिफ़ेस्ट में PWA को अलग-अलग रंग उपलब्ध कराने की अनुमति देने के लिए, एक नया ऑरिजिन ट्रायल उपलब्ध है.
हैंडराइटिंग पहचानने वाला एपीआई इस्तेमाल करना शुरू कर दिया गया है.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास बातों के बारे में बताया गया है. Chrome 99 में होने वाले दूसरे बदलावों के बारे में जानने के लिए, नीचे दिए गए लिंक पर जाएं.
- Chrome DevTools (99) में नया क्या है
- Chrome 99 के इस्तेमाल पर रोक लगाना और उसे हटाना
- Chrome 99 के लिए ChromeStatus.com से जुड़े अपडेट
- Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची
- Chrome रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.
मैं हूं पीट लेपेज और Chrome 100 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome की नई चीज़ क्या है!