यहां आवश्यक जानकारी दी गई है:
- व्यू ट्रांज़िशन एपीआई की मदद से, अपने एक पेज वाले ऐप्लिकेशन में बेहतर ट्रांज़िशन बनाएं.
- सीएसएस कलर लेवल 4 की मदद से, कलर को बेहतर बनाएं.
- रंग की नई सुविधाओं का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, स्टाइल पैनल में नए टूल खोजें.
- और भी बहुत कुछ.
मैं हूं एड्रियाना जारा. आइए और जानें कि 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 कॉल किया जाता है. यहां पर DOM बदल दिया जाता है. इसके बाद, एपीआई पेज की नई स्थिति को कैप्चर करता है.
ध्यान दें कि एपीआई को एक पेज वाले ऐप्लिकेशन (एसपीए) के लिए लॉन्च किया गया है, लेकिन अन्य मॉडल के लिए भी काम किया जा रहा है.
इस एपीआई में कई जानकारी मौजूद है. ज़्यादा जानकारी के लिए, सैंपल और जानकारी वाले लेख में जाएं या एमडीएन पर ट्रांज़िशन से जुड़े दस्तावेज़ देखें.
सीएसएस कलर लेवल 4.
सीएसएस कलर लेवल 4 के साथ, सीएसएस अब हाई डेफ़िनिशन डिसप्ले पर काम करती है. इसमें एचडी श्रेणी से किसी भी रंग के बारे में बताया गया है. साथ ही, विशेषज्ञताओं के साथ कलर स्पेस भी दिए गए हैं.
संक्षेप में, यह चुनने के लिए 50% ज़्यादा रंग हैं! आपको लगा कि 1.6 करोड़ रंग काफ़ी लग रहे हैं. मुझे भी लगा था.
इसे खुद आज़माएं
लागू करने में 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() का इस्तेमाल करते समय, कंप्यूटेड पैनल में कलर का फ़ाइनल आउटपुट देखा जा सकता है
साथ ही, कलर पिकर में ज़्यादा सुविधाओं वाले सभी नए कलर स्पेस भी मिलते हैं. उदाहरण के लिए, रंग के कलर स्वैच(display-p3 1 0 1) पर क्लिक करें. एक गैमट बाउंड्री लाइन भी जोड़ी गई है, ताकि आपके चुने हुए रंग के गैमट को बेहतर तरीके से समझने के लिए, एसआरजीबी और डिसप्ले-p3 गैमट में अंतर किया जा सके.
कलर पिकर की मदद से, अलग-अलग कलर फ़ॉर्मैट के बीच कलर बदले जा सकते हैं.
DevTools में कलर और अन्य नई सुविधाओं को डीबग करने के बारे में ज़्यादा जानकारी पाने के लिए, यह पोस्ट देखें.
और ज़्यादा!
निश्चित रूप से बहुत कुछ है.
- सीएसएस ने त्रिकोणमितीय फ़ंक्शन, अतिरिक्त रूट फ़ॉन्ट यूनिट, और n-वें चाइल्ड स्यूडो सिलेक्टर को जोड़ा है.
- दस्तावेज़ में पिक्चर में पिक्चर एपीआई का ऑरिजिन ट्रायल किया जा रहा है
previousslideऔरnextslideकार्रवाइयां अब Media Session API का हिस्सा हैं. डेमो देखने के लिए यहां जाएं.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 111 में और बदलावों के बारे में जानने के लिए, नीचे दिए गए लिंक देखें.
- Chrome DevTools में नया क्या है (111)
- Chrome 111 के इस्तेमाल पर रोक लगाना और उसे हटाना
- Chrome 111 के लिए ChromeStatus.com से जुड़े अपडेट
- Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची
- Chrome रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.
मैं हूँ एड्रियाना जारा और Chrome 112 के रिलीज़ होते ही, मैं आपको बताऊँगी कि Chrome की नई सुविधा क्या है!