Chrome 69 में नया

पीट लीपेज
पीट लीपेज

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

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

  • CSS Scroll Snap की मदद से बिना किसी रुकावट के, बेहतरीन, और स्क्रोल किया जा सकता है.
  • डिसप्ले कटआउट की मदद से, स्क्रीन का पूरा हिस्सा इस्तेमाल किया जा सकता है. इसमें डिसप्ले कटआउट के पीछे की जगह भी शामिल है, जिसे कभी-कभी नॉच भी कहा जाता है.
  • 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 एपीआई

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

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

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

और ज़्यादा!

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

कोनिकल ग्रेडिएंट

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

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

क्या आपको वीडियो में सभी छिपी हुई मज़ाक़िया चीज़ें मिलीं?

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 डेवलपर के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तो आपको ईमेल से सूचना दी जाएगी.

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