Chrome 69 में नया

Pete LePage

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

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

• सीएसएस स्क्रोल स्नैप की मदद से, आसानी से स्क्रोल किया जा सकता है.
• डिसप्ले कटआउट की मदद से, स्क्रीन के पूरे हिस्से का इस्तेमाल किया जा सकता है. इसमें डिसप्ले कटआउट के पीछे की जगह भी शामिल है. इसे कभी-कभी नॉच भी कहा जाता है.
• Web Locks API की मदद से, एसिंक्रोनस तरीके से लॉक हासिल किया जा सकता है. साथ ही, काम पूरा होने तक उसे होल्ड करके रखा जा सकता है. इसके बाद, उसे रिलीज़ किया जा सकता है.

इसके अलावा, और भी कई सुविधाएं उपलब्ध हैं!

मैं पीट लेपेज हूँ. आइए, Chrome 69 में डेवलपर के लिए उपलब्ध नई सुविधाओं के बारे में जानें!

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

CSS Scroll Snap

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

इमेज कैरोसेल के लिए, मैं स्क्रोल कंटेनर में 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 Scroll Snap की मदद से स्क्रोलिंग को बेहतर तरीके से कंट्रोल करना पोस्ट देखें!

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

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

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

सीएसएस एनवायरमेंट वैरिएबल और 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 में किए गए कुछ बदलाव हैं. हालांकि, इसमें और भी कई बदलाव किए गए हैं.

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

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

क्या आपको वीडियो में मौजूद सभी ईस्टर एग मिले?

• Chrome कॉमिक बुक
• Chromercise बैंड
• पोटैटो कैनन
• Pete Monster
• CDS 2017 में मिला लकड़ी का डायनो

उन सभी लोगों को हमारा खास धन्यवाद जिन्होंने 'New in 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 में नया क्या है!