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. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. 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;
}

/*  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 क्लॉज़ और Map किराये के प्रोग्रामिंग का इस्तेमाल करते हैं. (इसे Map-group-reduce के तौर पर बेहतर माना जाता है).

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

कैटगरी ग्रुपिंग की मदद से, इन स्थितियों को चालू करने के लिए, Object.groupBy और Map.groupBy स्टैटिक तरीके का इस्तेमाल किया जाता है.

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

इस उदाहरण में, एमडीएन दस्तावेज़ में प्रॉडक्ट का एक कलेक्शन दिया गया है. इसमें 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 आपको Sources पर ले जाता है > बदलाव > एडिटर की मदद से, आप वेब कॉन्टेंट को बदल सकते हैं.

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

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

देखें कि Chrome 117 में DevTools के बारे में पूरी जानकारी और ज़्यादा जानकारी के लिए, DevTools में नया क्या है.

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

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

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

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

सदस्यता लें

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

यो सोय एड्रियाना जारा, Chrome 117 के रिलीज़ होते ही, मैं आपको Chrome की नई सुविधाओं के बारे में बताऊंगी!