Chrome 104 में नया

Pete LePage

यहां आपके जानने योग्य तथ्य दिए गए हैं:

मेरा नाम पीट लेपेज है. चलिए, देखते हैं कि Chrome 104 में डेवलपर के लिए क्या नया है.

रीजन कैप्चर की मदद से, काटने के लिए कोई जगह चुनना

getDisplayMedia() की मदद से, मौजूदा टैब से वीडियो स्ट्रीम बनाई जा सकती है. हालांकि, कभी-कभी आपको पूरे टैब के बजाय, उसका सिर्फ़ एक छोटा हिस्सा चाहिए होता है. अब तक, हर वीडियो फ़्रेम को मैन्युअल तरीके से काटें.

क्षेत्र कैप्चर की मदद से, वेब ऐप्लिकेशन स्क्रीन के उस खास हिस्से को तय कर सकता है जिसे वह शेयर करना चाहता है. उदाहरण के लिए, Google Slides में आपको बदलाव करने के लिए, स्टैंडर्ड व्यू में रहने और मौजूदा स्लाइड शेयर करने की सुविधा मिल सकती है.

ब्राउज़र विंडो का स्क्रीनशॉट, जिसमें एक वेब ऐप्लिकेशन दिख रहा है. इसमें मुख्य कॉन्टेंट एरिया और क्रॉस-ऑरिजिन iframe को हाइलाइट किया गया है.
मुख्य कॉन्टेंट का सेक्शन नीले रंग में है और क्रॉस-ऑरिजिन iframe लाल रंग में है.

इसका इस्तेमाल करने के लिए, शेयर करने के लिए कोई एलिमेंट चुनें. इसके बाद, उस एलिमेंट के आधार पर नया CropTarget बनाएं. इसके बाद, getDisplayMedia() को कॉल करके स्क्रीन शेयर करना शुरू करें. इससे, उपयोगकर्ता से स्क्रीन शेयर करने की अनुमति मांगी जाती है. इसके बाद, track.cropTo() को कॉल करें और पहले से बनाए गए cropTarget को पास करें.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

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

लेवल 4 के सिंटैक्स और आकलन की मदद से, आसान मीडिया क्वेरी

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

Chrome 104 में मीडिया क्वेरी - लेवल 4 - सिंटैक्स और आकलन की सुविधा जोड़ी गई है. इससे, आपको सामान्य मैथमैटिकल तुलना ऑपरेटर का इस्तेमाल करके मीडिया क्वेरी लिखने की सुविधा मिलती है.

इसलिए, 400 से 600 पिक्सल के बीच के व्यूपोर्ट को दिखाने के लिए, इस तरह के बजाय:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

इसे इस तरह लिखा जा सकता है:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

मीडिया क्वेरी को कम शब्दों में बनाने के अलावा, नया सिंटैक्स ज़्यादा सटीक हो सकता है. min- और max- क्वेरी में शामिल हैं, उदाहरण के लिए: min-width: 400px 400 पिक्सल या उससे ज़्यादा चौड़ाई के लिए टेस्ट करता है. नए सिंटैक्स की मदद से, अपनी बात को साफ़ तौर पर बताया जा सकता है.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

यह सुविधा Firefox में पहले से ही काम करती है. साथ ही, एक ऐसा PostCSS प्लग इन भी है जो नए सिंटैक्स को पुराने सिंटैक्स में फिर से लिख देगा. इससे, ब्राउज़र के साथ काम करने की सुविधा मिलती है!

ज़्यादा जानकारी के लिए, रेचल का लेख पढ़ें Chrome 104 में रेंज मीडिया क्वेरी के लिए नया सिंटैक्स .

शेयर किए गए एलिमेंट के ट्रांज़िशन की सुविधा के लिए, ऑरिजिन ट्रायल की नई सुविधा शुरू की गई

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

शेयर किए गए एलिमेंट के ट्रांज़िशन से, Chrome 104 में ऑरिजिन ट्रायल शुरू हो जाएगा. इससे आपको ट्रांज़िशन को आसान बनाने में मदद मिलेगी. इस बात से कोई फ़र्क़ नहीं पड़ता कि ये ट्रांज़िशन, क्रॉस-डॉक्यूमेंट (कई पेजों वाले ऐप्लिकेशन के मामले में) या इंट्रा-डॉक्यूमेंट (उदाहरण के लिए, एक पेज वाले ऐप्लिकेशन) में हुए हैं या नहीं.

यहां एक पेज वाले ऐप्लिकेशन के लिए ट्रांज़िशन के काम करने का एक उदाहरण दिया गया है. नेविगेट फ़ंक्शन में, नए पेज का कॉन्टेंट पाएं. इसके बाद, देखें कि ट्रांज़िशन काम करते हैं या नहीं. अगर नहीं, तो पेज को ट्रांज़िशन के बिना अपडेट करें. अगर ऐसा है, तो एक transition() बनाएं और उस पर start() को कॉल करें, ताकि डीओएम बदलाव पूरा होने पर एपीआई को इसकी सूचना दी जा सके.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

हुड के तहत, Shared एलिमेंट ट्रांज़िशन के लिए सीएसएस ऐनिमेशन का इस्तेमाल किया जाता है, ताकि आप फ़ेड इन इफ़ेक्ट से, स्लाइड करके या अपनी पसंद के मुताबिक बदलाव कर सकें.

मैंने इस बारे में सिर्फ़ खास जानकारी दी है. इसलिए, वेब पर पेज ट्रांज़िशन की सुविधा वाला जैक का वीडियो देखें या एक्सप्लेनर देखें.

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

बेशक वहां और भी बहुत कुछ है.

  • जब कुकी को साफ़ तौर पर Expires या Max-Age एट्रिब्यूट के साथ सेट किया जाता है, तो वैल्यू अब 400 दिनों से ज़्यादा नहीं होगी.
  • मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई में बेहतर सुविधाएं जोड़ी गई हैं.
  • साथ ही, overflow-clip-margin सीएसएस प्रॉपर्टी से यह तय होता है कि क्लिप किए जाने से पहले, किसी एलिमेंट के कॉन्टेंट को कितनी दूर तक पेंट करने की अनुमति है.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ अहम हाइलाइट के बारे में बताया गया है. Chrome 104 में हुए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

सदस्यता लें

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

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