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

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

कलेक्शन ग्रुप

प्रोग्रामिंग में, अरे ग्रुपिंग एक बहुत ही सामान्य कार्रवाई है. इसे अक्सर तब देखा जाता है, जब हम एसक्यूएल के ग्रुप BY क्लॉज़ और Map बाईं प्रोग्रामिंग (जिसे मैप-ग्रुप-रिड्यूस कहते हैं) का इस्तेमाल करते हैं.

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

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

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

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

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

और ज़्यादा!

निश्चित रूप से बहुत कुछ है.

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

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

सदस्यता लें

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

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