Chrome 99 में नया

Pete LePage

यहां आपके जानने योग्य तथ्य दिए गए हैं:

  • 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 के नए विकल्प को हाइलाइट किया गया है

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> एलिमेंट के लिए भी इस्तेमाल किया जा सकता है.

ब्राउज़र पिकर के स्क्रीनशॉट
Chrome डेस्कटॉप, Chrome मोबाइल, Safari डेस्कटॉप, Safari मोबाइल, और Firefox डेस्कटॉप (जुलाई 2021) में ब्राउज़र के लिए तारीख चुनने वाले टूल.

इसका इस्तेमाल करने के लिए, <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 डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

मेरा नाम पीट लेपेज है. Chrome 100 रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!