यहां आवश्यक जानकारी दी गई है:
- मौजूदा टैब को कैप्चर करने के लिए,
getDisplayMedia()का इस्तेमाल करते समय क्षेत्र कैप्चर करने की सुविधा का इस्तेमाल करके, अब क्रॉप की गई जगह तय की जा सकती है. - मीडिया क्वेरी सिंटैक्स को गणितीय तुलना करने वाले ऑपरेटर इस्तेमाल करके लिखा जा सकता है.
- शेयर किए गए एलिमेंट ट्रांज़िशन से, ऑरिजिन ट्रायल शुरू होता है.
- और भी बहुत कुछ है.
मेरा नाम पीट लीपेज है. आइए, जानते हैं और देखते हैं कि Chrome 104 में डेवलपर के लिए नया क्या है.
रीजन कैप्चर की मदद से, काटे जाने का क्षेत्र तय करें
getDisplayMedia() की मदद से, मौजूदा टैब से वीडियो स्ट्रीम बनाई जा सकती है. हालांकि, कई बार ऐसा भी होता है कि आपको पूरा टैब नहीं, बल्कि उसका सिर्फ़ एक छोटा सा हिस्सा चाहिए. अब तक, हर वीडियो फ़्रेम को मैन्युअल रूप से
काटा जाता था.
क्षेत्र कैप्चर करने की सुविधा से, वेब ऐप्लिकेशन स्क्रीन का वह हिस्सा तय कर सकता है जिसे वह शेयर करना चाहता है. उदाहरण के लिए, Google Slides आपको बदलाव करने के स्टैंडर्ड व्यू में बने रहने और मौजूदा स्लाइड को शेयर करने की अनुमति दे सकता है.
इसका इस्तेमाल करने के लिए, शेयर करने के लिए एलिमेंट चुनें. इसके बाद, उस एलिमेंट के आधार पर एक नया 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- क्वेरी शामिल हैं, उदाहरण के लिए:
400 पिक्सल या उससे ज़्यादा चौड़ाई के लिए min-width: 400px टेस्ट. नए सिंटैक्स की मदद से,
अपनी चीज़ों को बेहतर तरीके से समझा जा सकता है.
@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 Element ट्रांज़िशन, सीएसएस ऐनिमेशन का इस्तेमाल करता है. इसलिए, फ़ेड इन इफ़ेक्ट का इस्तेमाल करके, स्लाइड इन करके या जो भी चाहें, इसे बदला जा सकता है.
मैंने अभी-अभी शुरुआत की है, इसलिए जेक का वीडियो देखें Bringing Page ट्रांज़िशनs to the Web या पूरी जानकारी को पढ़ें.
और ज़्यादा!
बेशक, यहां बहुत कुछ है.
- कुकी को किसी खास
ExpiresयाMax-Ageएट्रिब्यूट के साथ सेट करने पर, वैल्यू को 400 दिनों से ज़्यादा तक सीमित नहीं किया जाएगा. - मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई में बेहतर सुविधाएं जोड़ी गई हैं.
overflow-clip-marginसीएसएस प्रॉपर्टी से यह पता चलता है कि किसी एलिमेंट के कॉन्टेंट को, क्लिप करने से पहले कितनी दूर तक पेंट किया जा सकता है.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास बातों के बारे में बताया गया है. Chrome 104 में और बदलावों के बारे में जानने के लिए, नीचे दिए गए लिंक देखें.
- Chrome DevTools में नया क्या है (104)
- Chrome 104 के इस्तेमाल पर रोक लगाना और उसे हटाना
- Chrome 104 के लिए ChromeStatus.com से जुड़े अपडेट
- Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची
- Chrome रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.
मैं हूं पीट लेपेज और Chrome 105 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome में नया क्या है!