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 Lock 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.
});

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

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

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

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

• सीएसएस4 स्पेसिफ़िकेशन की मदद से, अब कोनिक ग्रेडिएंट का इस्तेमाल करके, सर्कल के चारों ओर कलर ट्रांज़िशन बनाए जा सकते हैं. Lea Verou के पास सीएसएस 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 में नया क्या है!