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

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

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

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

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

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

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

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

सदस्यता लें

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

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