Chrome 111 में नया

Adriana Jara

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

  • View Transitions API की मदद से, अपने सिंगल पेज ऐप्लिकेशन में बेहतर ट्रांज़िशन बनाएं.
  • सीएसएस कलर लेवल 4 की सुविधा की मदद से, रंगों को अगले लेवल पर ले जाएं.
  • कलर की नई सुविधा का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, स्टाइल पैनल में नए टूल खोजें.
  • इसके अलावा, और भी सुविधाएं हैं.

मेरा नाम अड्रिआना जारा है. आइए, जानें कि Chrome 111 में डेवलपर के लिए क्या नया है.

Transitions API देखें.

वेब पर आसानी से ट्रांज़िशन बनाना मुश्किल काम है. व्यू ट्रांज़िशन एपीआई, व्यू के स्नैपशॉट लेने और स्टेटस के बीच ओवरलैप किए बिना डीओएम को बदलने की सुविधा देकर, बेहतर ट्रांज़िशन बनाने की प्रोसेस को आसान बनाता है.

View Transition API की मदद से बनाए गए ट्रांज़िशन. डेमो साइट आज़माएं–इसके लिए, Chrome 111 या इसके बाद के वर्शन की ज़रूरत है.

डिफ़ॉल्ट व्यू ट्रांज़िशन, क्रॉस फ़ेड होता है. नीचे दिया गया स्निपेट, इस अनुभव को लागू करता है.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

.startViewTransition() को कॉल करने पर, एपीआई पेज की मौजूदा स्थिति कैप्चर करता है.

इसके पूरा होने के बाद, .startViewTransition() को पास किया गया callback कॉल किया जाता है. यहीं पर डीओएम बदला जाता है. इसके बाद, एपीआई पेज की नई स्थिति कैप्चर करता है.

ध्यान दें कि एपीआई को सिंगल-पेज ऐप्लिकेशन (एसपीए) के लिए लॉन्च किया गया है. हालांकि, अन्य मॉडल के लिए भी इसे लागू किया जा रहा है.

इस एपीआई के बारे में कई जानकारी है. सैंपल और जानकारी वाले हमारे लेख में ज़्यादा जानें या MDN पर व्यू ट्रांज़िशन दस्तावेज़ देखें.

सीएसएस कलर लेवल 4.

सीएसएस कलर लेवल 4 की मदद से, सीएसएस अब हाई डेफ़िनिशन डिसप्ले के साथ काम करती है. साथ ही, एचडी गैमट से रंगों की जानकारी देती है. साथ ही, विशेषताओं के साथ कलर स्पेस भी ऑफ़र करती है.

इसका मतलब है कि अब आपके पास 50% ज़्यादा रंगों में से चुनने का विकल्प है! आपको लगता है कि 16 मिलियन रंग बहुत ज़्यादा हैं. मुझे भी ऐसा ही लगा था.

इस इमेज में, वाइड और नैरो कलर गेमट के बीच ट्रांज़िशन करती हुई इमेज की एक सीरीज़ दिखाई गई है. इससे, रंगों की चमक और उनके इफ़ेक्ट के बारे में पता चलता है.
इसे खुद आज़माएं

लागू करने के लिए, color() फ़ंक्शन का इस्तेमाल किया जाता है. इसका इस्तेमाल, R, G, और B चैनलों के साथ रंगों की जानकारी देने वाले किसी भी कलर स्पेस के लिए किया जा सकता है. color() पहले कलर स्पेस पैरामीटर लेता है. इसके बाद, आरजीबी के लिए चैनल वैल्यू की सीरीज़ और ज़रूरत पड़ने पर कुछ ऐल्फ़ा लेता है.

यहां अलग-अलग कलर स्पेस के साथ, कलर फ़ंक्शन का इस्तेमाल करने के कुछ उदाहरण दिए गए हैं.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

सीएसएस का इस्तेमाल करके, हाई डेफ़िनिशन वाले रंगों का पूरा फ़ायदा पाने के लिए, ज़्यादा दस्तावेज़ देखने के लिए यह लेख पढ़ें.

नए कलर डेवलपर टूल.

Devtools में नई सुविधाएं जोड़ी गई हैं, ताकि सीएसएस कलर लेवल 4 के स्पेसिफ़िकेशन के साथ काम किया जा सके.

स्टाइल पैनल में अब 12 नए कलर स्पेस और स्पेसिफ़िकेशन में बताए गए सात नए गैमट काम करते हैं. यहां color(), lch(), oklab() और color-mix() के साथ सीएसएस कलर डेफ़िनिशन के उदाहरण दिए गए हैं.

सीएसएस कलर डेफ़िनिशन के उदाहरण.

color-mix() का इस्तेमाल करके, एक रंग के प्रतिशत को दूसरे रंग में मिलाया जा सकता है. ऐसा करने पर, कंप्यूट किया गया पैनल में रंग का आखिरी आउटपुट देखा जा सकता है 'कंप्यूट किया गया' पैनल में, color-mix फ़ंक्शन का नतीजा.

साथ ही, कलर पिकर में ज़्यादा सुविधाओं के साथ सभी नए कलर स्पेस काम करते हैं. उदाहरण के लिए, color(display-p3 1 0 1) के कलर स्वैच पर क्लिक करें. गैमट की सीमा वाली लाइन भी जोड़ी गई है. इससे, sRGB और display-p3 गैमट के बीच का अंतर पता चलता है. इससे, चुने गए रंग के गैमट को बेहतर तरीके से समझा जा सकता है. गैमट की सीमा रेखा.

कलर पिकर की मदद से, रंगों को एक फ़ॉर्मैट से दूसरे फ़ॉर्मैट में भी बदला जा सकता है.

रंगों को एक फ़ॉर्मैट से दूसरे फ़ॉर्मैट में बदलना.

डीबगिंग कलर और devtools की अन्य नई सुविधाओं के बारे में ज़्यादा जानने के लिए, यह पोस्ट पढ़ें.

और भी कई सुविधाएं!

इसके अलावा, और भी कई चीज़ें हैं.

  • सीएसएस में त्रिकोणमितीय फ़ंक्शन, अतिरिक्त रूट फ़ॉन्ट यूनिट, और n-th चाइल्ड स्यूडो सिलेक्टर जोड़ा गया.
  • Document Picture in Picture API का ऑरिजिन ट्रायल चल रहा है
  • previousslide और nextslide ऐक्शन, अब Media Session API का हिस्सा हैं. डेमो यहां देखें.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 111 में हुए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

सदस्यता लें

अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

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