Chrome 69 में नया

Pete LePage

Chrome को पहली बार रिलीज़ किए हुए दस साल हो चुके हैं. तब से, बहुत कुछ बदल गया है. हालांकि, मॉडर्न वेब ऐप्लिकेशन के लिए एक बेहतरीन बुनियाद बनाने का हमारा लक्ष्य अब भी पहले जैसा है!

हमने Chrome 69 में, इन सुविधाओं के लिए सहायता जोड़ी है:

• CSS स्क्रोल स्नैप की मदद से, स्क्रोल करने का बेहतर अनुभव दिया जा सकता है.
• डिसप्ले में मौजूद कट्स की मदद से, स्क्रीन के पूरे हिस्से का इस्तेमाल किया जा सकता है. इसमें डिसप्ले में मौजूद कट्स के पीछे का वह हिस्सा भी शामिल है जिसे कभी-कभी नॉच कहा जाता है.
• Web Locks API की मदद से, किसी ऑब्जेक्ट को ऐसिंक्रोनस तरीके से लॉक किया जा सकता है. साथ ही, उस पर काम करने के दौरान उसे लॉक किया जा सकता है और फिर उसे अनलॉक किया जा सकता है.

इसके अलावा, और भी बहुत कुछ है!

मेरा नाम पीट लेपेज है. आइए, जानें कि Chrome 69 में डेवलपर के लिए क्या नया है!

क्या आपको बदलावों की पूरी सूची चाहिए? Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची देखें.

सीएसएस स्क्रोल स्नैप

चेतावनी: इस पोस्ट में सीएसएस स्क्रोल स्नैप के बारे में बताया गया है, जो मौजूदा स्टैंडर्ड है. इसे सीएसएस स्क्रोल स्नैप पॉइंट से न जोड़ें. इसे बंद कर दिया गया है और अब यह स्टैंडर्ड ट्रैक पर नहीं है.

डेमो देखें | सोर्स

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

इमेज कैरसेल के लिए, स्क्रॉल कंटेनर में scroll-snap-type: x mandatory; और हर इमेज में scroll-snap-align: center; जोड़ें. इसके बाद, जब उपयोगकर्ता कैरसेल पर स्क्रोल करेगा, तो हर इमेज को आसानी से सही जगह पर स्क्रोल किया जाएगा.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

सीएसएस स्क्रोल स्नैपिंग की सुविधा, तब भी अच्छी तरह से काम करती है, जब स्नैप टारगेट अलग-अलग साइज़ के हों या स्क्रोलर से बड़े हों! ज़्यादा जानकारी और सैंपल के लिए, CSS स्क्रोल स्नैप की मदद से, स्क्रोलिंग को बेहतर तरीके से कंट्रोल करना पोस्ट देखें!

डिसप्ले कटआउट (जिन्हें नॉच भी कहा जाता है)

डिसप्ले में मौजूद कटिंग आउट से कॉन्टेंट के छिपने से बचाने के लिए, ब्राउज़र मोबाइल डिवाइस पर कुछ अतिरिक्त मार्जिन जोड़ते हैं.

मोबाइल डिवाइसों की संख्या लगातार बढ़ रही है. इनमें से कई डिवाइसों में डिसप्ले काट-आउट होता है. इसे कभी-कभी नॉच भी कहा जाता है. इस समस्या को हल करने के लिए, ब्राउज़र आपके पेज में थोड़ा अतिरिक्त मार्जिन जोड़ते हैं, ताकि कॉन्टेंट को नॉच से छिपाया न जा सके.

अगर आपको उस स्पेस का इस्तेमाल करना है, तो क्या होगा?

सीएसएस एनवायरमेंट वैरिएबल और viewport-fit मेटा टैग की मदद से, अब ऐसा किया जा सकता है. उदाहरण के लिए, ब्राउज़र को डिसप्ले के कटआउट वाले हिस्से में बड़ा करने के लिए, viewport मेटा टैग में viewport-fit प्रॉपर्टी को cover पर सेट करें.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

इसके बाद, अपने कॉन्टेंट को लेआउट करने के लिए, safe-area-inset-* सीएसएस एनवायरमेंट वैरिएबल का इस्तेमाल किया जा सकता है.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

ध्यान दें: याद रखें: इसकी अच्छी तरह से जांच करना ज़रूरी है. इससे ब्राउज़र को यह पता चलता है कि डिसप्ले ककटआउट के पीछे कुछ कॉन्टेंट छिपने पर भी कोई समस्या नहीं है. साथ ही, पोर्ट्रेट और लैंडस्केप, दोनों मोड में जांच करना न भूलें.

WebKit ब्लॉग पर, iPhone X के लिए वेबसाइट डिज़ाइन करने के बारे में एक बेहतरीन पोस्ट है. इसके अलावा, ज़्यादा जानकारी के लिए एक्सप्लेनर देखें.

Web Locks API

Web Locks API की मदद से, किसी ऑब्जेक्ट को असिंक्रोनस तरीके से लॉक किया जा सकता है. साथ ही, उस पर काम करने के दौरान उसे लॉक किया जा सकता है और फिर उसे अनलॉक किया जा सकता है. लॉक होने के दौरान, ऑरिजिन में कोई भी दूसरी स्क्रिप्ट उसी लॉक को हासिल नहीं कर सकती. इससे, शेयर किए गए रिसॉर्स के इस्तेमाल को मैनेज करने में मदद मिलती है.

उदाहरण के लिए, अगर एक से ज़्यादा टैब में चल रहा कोई वेब ऐप्लिकेशन यह पक्का करना चाहता है कि सिर्फ़ एक टैब नेटवर्क से सिंक हो रहा है, तो सिंक कोड network_sync_lock नाम का लॉक हासिल करने की कोशिश करेगा.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

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

MDN पर वेब लॉक के बारे में जानकारी के बारे में बेहतरीन लेख मौजूद है. इसमें ज़्यादा जानकारी और कई उदाहरण शामिल हैं. इसके अलावा, ज़्यादा जानकारी के लिए, स्पेसिफ़िकेशन देखें.

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

डेवलपर के लिए, Chrome 69 में ये सिर्फ़ कुछ बदलाव हैं. इसमें और भी कई बदलाव किए गए हैं.

• सीएसएस4 स्पेसिफ़िकेशन की मदद से, अब कोनिक ग्रेडिएंट का इस्तेमाल करके, सर्कल के चारों ओर कलर ट्रांज़िशन बनाए जा सकते हैं. Lea Verou के पास एक ऐसा CSS conic-gradient() पॉलीफ़िल है जिसका इस्तेमाल किया जा सकता है. इस पेज पर, कम्यूनिटी के सबमिट किए गए कई बेहतरीन सैंपल शामिल हैं.
• एलिमेंट पर, एट्रिब्यूट की मौजूदगी को टॉगल करने के लिए, classList.toggle() की तरह ही एक नया तरीका toggleAttribute() है.
• JavaScript ऐरे में दो नए तरीके जोड़े जा रहे हैं: flat() और flatMap(). ये एक नया ऐरे दिखाते हैं, जिसमें सभी सब-ऐरे एलिमेंट शामिल होते हैं.
• साथ ही, OffscreenCanvas, मुख्य थ्रेड से काम को वर्कर्स में ले जाता है. इससे परफ़ॉर्मेंस में आने वाली रुकावटों को दूर करने में मदद मिलती है.

छिपी हुई मज़ाक़िया चीज़ें

क्या आपको वीडियो में सभी ईस्टर अंडे मिले?

• Chrome कॉमिक बुक
• Chromercise बैंड
• आलू का तोप
• Pete Monster
• सीडीएस 2017 में लकड़ी से बना डायनो

Chrome में नई सुविधाओं के 28 एपिसोड बनाने में मदद करने वाले सभी लोगों का धन्यवाद. इनमें से हर एक व्यक्ति शानदार है!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

क्या आपको यह देखना है कि हमारे पहले एपिसोड के बाद, Chrome में क्या-क्या नया हुआ है? 30 सेकंड का यह मज़ेदार प्रोग्रेस वीडियो देखें. इसमें, हमारे पहले वीडियो से लेकर आज तक के इतिहास को दिखाया गया है!

वीडियो देखने और टिप्पणियां करने और सुझाव देने के लिए, आपका धन्यवाद! हम सभी सुझावों को पढ़ते हैं और उन पर गंभीरता से विचार करते हैं. आपके सुझावों की वजह से, ये वीडियो बेहतर हुए हैं!

वीडियो देखने के लिए धन्यवाद!

Chrome Bloopers में नया क्या है

हमने आपके लिए एक मज़ेदार ब्लूपर रील बनाया है! इसे देखने के बाद, मुझे कुछ बातें पता चली हैं:

• जब मैं बोलते समय गलती करता हूं, तो कुछ अजीब आवाज़ें निकलती हैं.
• मैं चेहरे के हाव-भाव बनाता/बनती हूं और जीभ बाहर निकालता/निकालाती हूं.
• मैं बहुत ज़्यादा हिलता-डुलता हूं.

सदस्यता लें

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

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