यहां आपके जानने योग्य तथ्य दिए गए हैं:
- सीएसएस की तीन नई सुविधाएं, आसानी से एंट्री और एग्ज़िट ऐनिमेशन जोड़ने का काम करती हैं.
- कलेक्शन ग्रुपिंग की मदद से, बड़े ऑर्डर वाले डेटासेट कंप्यूट करें.
- DevTools लोकल बदलाव को आसान बनाता है.
- इसके अलावा, और भी सुविधाएं हैं.
मेरा नाम अड्रिआना जारा है. आइए, देखते हैं कि 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 प्रोग्रामिंग को map-group-reduce के तौर पर समझना बेहतर होता है.
डेटा को ग्रुप में जोड़ने की सुविधा की मदद से, डेवलपर हाई ऑर्डर डेटासेट का पता लगा सकते हैं. उदाहरण के लिए, किसी कोहॉर्ट की औसत उम्र या किसी वेबपेज के लिए हर दिन की LCP वैल्यू.
ऐरे ग्रुपिंग, 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 में नया क्या है.
और भी कई सुविधाएं!
इसके अलावा, और भी कई चीज़ें हैं.
grid-template-columnsऔरgrid-template-rowsके लिए,subgridवैल्यू को अब Chrome में लागू कर दिया गया है.WebSQLके बंद होने का ट्रायल चल रहा है. साथ ही,unloadइवेंट को रोकने के लिए, डेवलपर को मुफ़्त में आज़माने का मौका मिला है.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास हाइलाइट के बारे में बताया गया है. इसके लिए नीचे दिए गए लिंक देखें Chrome 117 में हुए अतिरिक्त बदलावों के बारे में बताया है.
- Chrome DevTools (117) में नया क्या है
- Chrome 117 में बंद किए गए और हटाए गए फ़ंक्शन
- Chrome 117 के लिए ChromeStatus.com के अपडेट
- Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
- Chrome के रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, इसकी सदस्यता लें Chrome डेवलपर का YouTube चैनल, और जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.
नमस्ते, मैं अड्रिआना जारा हूं. Chrome 117 रिलीज़ होने के बाद, मैं आपको बताऊंगी कि Chrome में नया क्या है!