Chrome 117 में नया

Adriana Jara

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

मेरा नाम एड्रियाना जारा है. आइए, Chrome 117 में डेवलपर के लिए उपलब्ध नई सुविधाओं के बारे में जानें.

एंट्री और एग्ज़िट ऐनिमेशन के लिए नई सीएसएस सुविधाएं.

सीएसएस की इन तीन नई सुविधाओं की मदद से, एंट्री और एग्ज़िट ऐनिमेशन आसानी से जोड़े जा सकते हैं. साथ ही, डायलॉग और पॉपओवर जैसे टॉप लेयर के डिसमिस किए जा सकने वाले एलिमेंट को आसानी से ऐनिमेट किया जा सकता है.

पहली सुविधा transition-behavior है. display जैसी अलग-अलग प्रॉपर्टी के लिए ट्रांज़िशन करने के लिए, transition-behavior के लिए allow-discrete वैल्यू का इस्तेमाल करें.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

इसके बाद, @starting-style नियम का इस्तेमाल करके, display: none से टॉप-लेयर में एंट्री इफ़ेक्ट को ऐनिमेट किया जाता है. @starting-style का इस्तेमाल करके, ऐसी स्टाइल लागू करें जिसे ब्राउज़र, पेज पर एलिमेंट खुलने से पहले देख सके.

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

आखिर में, सबसे ऊपर की लेयर से किसी popover या dialog को फ़ेड आउट करने के लिए, ट्रांज़िशन की सूची में overlay प्रॉपर्टी जोड़ें. ट्रांज़िशन या ऐनिमेशन में ओवरले शामिल करें, ताकि ओवरले को अन्य सुविधाओं के साथ ऐनिमेट किया जा सके. साथ ही, यह पक्का करें कि ऐनिमेशन के दौरान, ओवरले सबसे ऊपर वाली लेयर में रहे. इससे वीडियो ज़्यादा बेहतर दिखेगा.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

एंट्री और एग्ज़िट ऐनिमेशन को बेहतर बनाने के लिए, सीएसएस की चार नई सुविधाओं के बारे में जानें. इससे आपको यह जानकारी मिलेगी कि मोशन के साथ उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, इन सुविधाओं का इस्तेमाल कैसे किया जाए.

ऐरे ग्रुपिंग

प्रोग्रामिंग में, ऐरे ग्रुपिंग एक बहुत ही सामान्य ऑपरेशन है. यह अक्सर तब देखा जाता है, जब हम SQL के GROUP BY क्लॉज़ और MapReduce प्रोग्रामिंग का इस्तेमाल करते हैं. MapReduce प्रोग्रामिंग को मैप-ग्रुप-रिड्यूस के तौर पर बेहतर तरीके से समझा जा सकता है.

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

ऐरे ग्रुपिंग की सुविधा, इन स्थितियों में काम करती है. इसके लिए, Object.groupBy और Map.groupBy स्टैटिक तरीके जोड़े जाते हैं.

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

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

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish">;, type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) = type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

ज़्यादा जानकारी के लिए, groupBy दस्तावेज़ देखें.

DevTools में लोकल ओवरराइड की सुविधा को बेहतर बनाया गया है.

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

वेब कॉन्टेंट को बदलने के लिए, नेटवर्क पैनल खोलें. इसके बाद, किसी अनुरोध पर राइट क्लिक करें और कॉन्टेंट बदलें को चुनें.

अनुरोध के ड्रॉप-डाउन मेन्यू में मौजूद, ओवरराइड करने के विकल्प.

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

कोई फ़ोल्डर चुनें और सबसे ऊपर मौजूद कार्रवाई बार में जाकर, उसे ऐक्सेस करने की अनुमति दें.

ओवरराइड सेट अप हो जाने के बाद, DevTools आपको सोर्स > ओवरराइड > एडिटर पर ले जाता है, ताकि वेब कॉन्टेंट को ओवरराइड किया जा सके.

ध्यान दें कि बदले गए संसाधनों को नेटवर्क पैनल में सेव किया गया. के तौर पर दिखाया जाता है. यह देखने के लिए कि क्या बदला गया है, आइकॉन पर कर्सर घुमाएं.

नेटवर्क पैनल में किसी अनुरोध के बगल में मौजूद ओवरराइड आइकॉन.

Chrome 117 में DevTools के बारे में ज़्यादा जानकारी और सभी नई सुविधाओं के बारे में जानने के लिए, DevTools में नया क्या है लेख पढ़ें.

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

बेशक, इसमें और भी कई सुविधाएं हैं.

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

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

सदस्यता लें

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

मैं एड्रियाना जारा हूं. Chrome 117 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome में नया क्या है!