काफ़ी समय हो गया है! 'Chrome में नया क्या है' वीडियो वापस आ गया है. इसमें इनके बारे में जानकारी दी गई है:
- सीएसएस टेक्स्ट-बॉक्स, जिसकी मदद से फ़ॉन्ट मेट्रिक का इस्तेमाल करके, वर्टिकल स्पेस को सटीक तरीके से कंट्रोल किया जा सकता है.
- फ़ाइल सिस्टम ऐक्सेस एपीआई, जो अब Android और वेब व्यू पर काम करता है.
moveBeforeकी मदद से, डीओएम एलिमेंट को उसकी मौजूदा स्थिति में एक जगह से दूसरी जगह ले जाने का तरीका.<dialog>एलिमेंट में Light dismiss आता है.- साथ ही, बेसलाइन और अन्य सुविधाओं में भी कई अपडेट हैं!
मेरा नाम मारीको है. आइए, पिछले तीन वर्शन में Chrome में जोड़े गए नए फ़ीचर के बारे में जानें.
सीएसएस टेक्स्ट-बॉक्स
सीएसएस text-box प्रॉपर्टी की मदद से, फ़ॉन्ट मेट्रिक का इस्तेमाल करके वर्टिकल स्पेस को सटीक तरीके से कंट्रोल किया जा सकता है.
हर फ़ॉन्ट, वर्णों के ऊपर और नीचे अलग-अलग स्पेस बनाता है. इससे एलिमेंट का साइज़ तय होता है.
अब तक, इन स्पेस का साइज़ कंट्रोल नहीं किया जा सकता था.
नई text-box-trim प्रॉपर्टी से यह पता चलता है कि किन किन हिस्सों को ट्रिम करना है, ऊपर या नीचे, और text-box-edge प्रॉपर्टी से यह पता चलता है कि उसे कैसे ट्रिम करना है.
उदाहरण के लिए, कैप हाइट पर ट्रिम करें, जो अपरकेस वर्णों के ऊपर होता है.
इसे शॉर्टहैंड text-box प्रॉपर्टी का इस्तेमाल करके भी लिखा जा सकता है.
इन नई प्रॉपर्टी को इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, सीएसएस text-box-trim लेख पढ़ें.
फ़ाइल सिस्टम को ऐक्सेस करने का एपीआई
Chrome 133 में जोड़ा गया, DOM प्राइमिटिव Node.prototype.moveBefore की मदद से, एलिमेंट की स्थिति को रीसेट किए बिना, एलिमेंट को DOM ट्री में एक से दूसरी जगह ले जाया जा सकता है.
जब किसी DOM एलिमेंट को हटाकर फिर से डाला जाता है, तो उस एलिमेंट की स्थिति रीसेट हो जाती है. इस नए प्राइमिटिव का इस्तेमाल करके, किसी नोड की स्थिति को बनाए रखा जाता है.
इसलिए, iframe लोड रहते हैं, ऐक्टिव एलिमेंट फ़ोकस में रहते हैं, पॉपओवर और डायलॉग बॉक्स जैसे आइटम खुले रहते हैं, और सीएसएस ट्रांज़िशन या ऐनिमेशन चलते रहते हैं.
डीओएम एलिमेंट को एक जगह से दूसरी जगह ले जाने का ऐसा तरीका जिससे उसकी स्थिति में कोई बदलाव न हो
फ़ाइल सिस्टम ऐक्सेस एपीआई, Chrome डेस्कटॉप पर कुछ समय से उपलब्ध है. इस एपीआई की मदद से, वेब ऐप्लिकेशन उपयोगकर्ता के लोकल फ़ाइल सिस्टम में मौजूद फ़ाइलों के साथ इंटरैक्ट कर सकते हैं. Chrome 132 से, यह एपीआई Android और वेबव्यू पर भी उपलब्ध है.
किसी फ़ाइल को पढ़ने के लिए, showOpenFilePicker() को कॉल करें. यह तरीका, फ़ाइल पिकर दिखाता है. इसके बाद, एक फ़ाइल हैंडल दिखाता है. इसका इस्तेमाल करके, फ़ाइल को पढ़ा जा सकता है.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
किसी फ़ाइल को डिस्क पर सेव करने के लिए, उसी फ़ाइल हैंडल का इस्तेमाल किया जा सकता है जो आपको पहले मिला था. इसके अलावा, नया फ़ाइल हैंडल पाने के लिए, showSaveFilePicker() को कॉल किया जा सकता है.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
<dialog> एलिमेंट पर, लाइट डिसमिज़ की सुविधा आती है
अगर आपने पॉपओवर बनाने के लिए Popover API का इस्तेमाल किया है, तो आपको पता होगा कि Popover API की एक अच्छी सुविधा, लाइट डिसमिज़ करने की सुविधा है. उपयोगकर्ता बैकग्राउंड पर क्लिक कर सकते हैं और 'बंद करें' बटन को दबाए बिना, पॉपओवर एलिमेंट बंद हो जाता है.
लाइट को बंद करने की यह सुविधा, अब <dialog> एलिमेंट में भी काम करती है!
closedby एट्रिब्यूट को any पर सेट करने पर, डायलॉग बॉक्स के बाहर क्लिक करके या Escape बटन दबाकर, डायलॉग बॉक्स को बंद किया जा सकता है.
<dialog closedby="any">...</dialog>
यह वही तरीका है जो पॉपओवर को ऑटो पर सेट करने पर होता है.
बेसलाइन में अपडेट
साथ ही, बेसलाइन के बारे में खबरें
बेसलाइन की सुविधा अब उपलब्ध है
पहला, बेसलाइन हाल ही में उपलब्ध हुई ये सुविधाएं, हाल ही में सभी चार मुख्य ब्राउज़र में लॉन्च की गई हैं.
scrollbar-gutter और scrollbar-width
scrollbar-gutter CSS प्रॉपर्टी की मदद से, स्क्रोलबार के लिए जगह तय की जा सकती है. इससे, स्क्रोलबार के दिखने या न दिखने पर, लेआउट में अनचाहे बदलावों से बचा जा सकता है. scrollbar-width की मदद से, स्क्रॉलबार को छोटा किया जा सकता है. इसके अलावा, स्क्रॉल करने की सुविधा पर असर डाले बिना, स्क्रॉलबार को पूरी तरह से छिपाया भी जा सकता है.
ruby-align
ruby-align CSS प्रॉपर्टी की मदद से, रूबी बेस टेक्स्ट और रूबी एनोटेशन टेक्स्ट के अलाइनमेंट की जानकारी दी जा सकती है.
Promise.try
Promise.try, सिंक्रोनस रिक्वेस्ट के लिए गड़बड़ी को मैनेज करने का एक आसान तरीका है. इसका इस्तेमाल करके, Promise.resolve के साथ अनुरोध करने पर, कॉलबैक फ़ंक्शन को हटाया जा सकता है.
Wasm कचरा कलेक्शन और टेल कॉल ऑप्टिमाइज़ेशन
WebAssembly में अब गै़रबेज कलेक्शन और टेल कॉल ऑप्टिमाइज़ेशन की सुविधा काम करती है.
बेसलाइन, ज़्यादातर लोगों के लिए उपलब्ध
ऐरे findLast() और findLastIndex()
ऐरे के आखिर में मौजूद आइटम पाने के लिए, ऐरे findLast() और findLastIndex() बहुत आसान तरीके हैं. यह सुविधा, पिछले 30 महीनों से सभी मुख्य ब्राउज़र पर काम कर रही है. इसका मतलब है कि यह सुविधा अब सभी के लिए उपलब्ध है.
अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी
अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी, अब बेसलाइन के तौर पर भी उपलब्ध हैं. इनकी मदद से, सीएसएस ट्रांसफ़ॉर्म को बेहतर तरीके से कंट्रोल किया जा सकता है.
बेसलाइन के बारे में ज़्यादा जानकारी
अगर आपको बेसलाइन और 'हाल ही में उपलब्ध' और 'बड़े पैमाने पर उपलब्ध' के बीच के अंतर के बारे में ज़्यादा जानना है, तो मैंने जो छोटा वीडियो बनाया है उसे देखें.
वेब प्लैटफ़ॉर्म के स्टेटस के डैशबोर्ड पर जाकर, किसी सुविधा के बेसलाइन स्टेटस के बारे में ज़्यादा जानकारी भी पाई जा सकती है!
इंटरऑप प्रोजेक्ट, साल 2025 में फिर से शुरू हो रहा है
आखिर में, इंटरऑपरेबिलिटी प्रोजेक्ट 2025 में वापस आ रहा है. इसमें, व्यू ट्रांज़िशन, सीएसएस ऐंकर पोज़िशनिंग, और नेविगेशन एपीआई जैसे फ़ोकस एरिया शामिल हैं. प्रोजेक्ट की सूचना ज़रूर देखें!
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
मेरी पहचान मारिको कोसाका है. मैं तीन महीने बाद, Chrome में हुए नए बदलावों के बारे में ज़्यादा जानकारी देने के लिए वापस आऊंगी!