Chrome 106 में नया

Pete LePage
Adriana Jara

यहां आवश्यक जानकारी दी गई है:

  • संख्याओं को फ़ॉर्मैट करते समय, आपको ज़्यादा कंट्रोल देने के लिए नए Intl एपीआई मौजूद हैं.
  • पॉप-अप एपीआई के लिए ऑरिजिन ट्रायल की सुविधा उपलब्ध है. इसकी मदद से, उपयोगकर्ता को ज़रूरी कॉन्टेंट के बारे में आसानी से बताया जा सकता है.
  • इंटरऑप को बेहतर बनाने के लिए, हम सीएसएस की कुछ सुविधाएं जोड़ रहे हैं.
  • और भी बहुत कुछ है.

मेरा नाम पीट लीपेज है और मेरा नाम एड्रियाना जारा है. चलिए, जानते हैं और देखते हैं कि Chrome 106 में डेवलपर के लिए नया क्या है.

नए Intl API

Intl API, कॉन्टेंट को स्थानीय फ़ॉर्मैट में दिखाने में मदद करता है.

अन्य Intl API की तरह, यह बोझ सिस्टम पर डाल देता है—इसलिए आपको हर उपयोगकर्ता को जटिल लोकलाइज़ेशन कोड भेजने या उसके रखरखाव की ज़रूरत नहीं है.

एपीआई यह जानता है कि मुद्रा का चिह्न कहां डाला जाएगा, तारीख और समय को कैसे फ़ॉर्मैट किया जाता है या सूची कैसे बनाई जाती है.

Chrome 106 में, नंबर फ़ॉर्मैट से जुड़ी कई नई सुविधाएं जोड़ी गई हैं.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

क्या आपको कीमत की सीमा दिखानी है? formatRange ने आपको ये सुविधाएं दी हैं.

नया numberFormat ऑब्जेक्ट बनाएं, style और दूसरे विकल्प दें. साथ ही, यह भी बताएं कि कितने अंक दिखाने हैं.

इसके बाद, फ़ॉर्मैट की गई स्ट्रिंग पाने के लिए formatRange() को कॉल करें.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

क्या आपको किसी संख्या को दशमलव के बाद के दो अंकों तक सटीक तरीके से पांच की सबसे करीबी बढ़ोतरी के बराबर पूरा करना है? कोई बात नहीं.

minimumFractionDigits और roundingIncrement डालें. इसके बाद, format() को कॉल करें.

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

इतना ही नहीं, ब्राउज़र को trailingZeroDisplay की मदद से, पीछे के शून्यों को शामिल करने के लिए भी कहा जा सकता है. इससे कीमत कम या ज़्यादा होने में मदद मिलती है.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

ज़्यादा जानकारी के लिए, एमडीएन पर Intl Number फ़ॉर्मैट के दस्तावेज़ देखें.

पॉप-अप एपीआई से यूज़र इंटरफ़ेस (यूआई) आसानी से बनाया जा सकता है. ऐसा तब होता है, जब आपको अपने उपयोगकर्ता के सामने जानकारी देने की ज़रूरत होती है.

popup एट्रिब्यूट, एलिमेंट को साइट की सबसे ऊपर लेयर पर अपने-आप लाता है. साथ ही, विज़िबिलिटी को टॉगल करने के लिए आसान कंट्रोल भी देता है. अब आपको चीज़ों को पोज़िशन, स्टैक करने, फ़ोकस या कीबोर्ड इंटरैक्शन की चिंता करने की ज़रूरत नहीं है. सबसे अच्छी बात यह है कि इसके लिए JavaScript की ज़रूरत नहीं होती.

सिर्फ़ नीचे दिए गए स्निपेट की मदद से एपीआई, एलिमेंट को दूसरे सभी कॉन्टेंट के ऊपर रेंडर करता है. साथ ही, यह उपयोगकर्ता के इनपुट और फ़ोकस मैनेजमेंट को भी मैनेज करता है.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

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

साथ ही डेवलपर के पास सबसे ऊपर वाली लेयर की स्टाइल,पोज़िशनिंग और साइज़ पर पूरा कंट्रोल होता है. साथ ही, उसके पास डिफ़ॉल्ट तौर पर सेट किए गए व्यवहार को बदलने की सुविधा भी होती है. सिर्फ़ CSS और एचटीएमएल का इस्तेमाल किया जा रहा है.

ज़्यादा उदाहरणों और एपीआई के विकल्पों के लिए, जे का लेख देखें.

अपने उपयोगकर्ताओं को आसानी से समय पर जानकारी देने के लिए, ऑरिजिन ट्रायल के लिए साइन अप करें. अपने विचारों से हमें अवगत कराएं.

सीएसएस की नई सुविधाएं

सीएसएस की दो नई सुविधाएं हैं, जो इंटरऑप को बेहतर बनाती हैं और उम्मीद है कि इनसे आपकी ज़िंदगी कुछ आसान हो जाएगी.

शहर में एक नई लंबाई की इकाई है: ic पार्टी में शामिल हो रहा है. ic, ch के समान है. हालांकि, ic का इस्तेमाल खास तौर पर आइडियोग्राम का इस्तेमाल करने वाली भाषाओं में लिखे गए टेक्स्ट के लिए किया जाता है. बुनियादी तौर पर, यह वर्ण [जगह का कोई पॉइंट] यानी पानी की चौड़ाई या ऊंचाई के आधार पर इसकी लंबाई मापता है.

यह टेक्स्ट को साइज़ करने के लिए डिज़ाइन की गई है. इसकी मदद से, टेक्स्ट की चौड़ाई को सीमित किया जा सकता है, ताकि उसे आसानी से पढ़ा जा सके. साथ ही, यह टेक्स्ट के साइज़ पर ध्यान दिए बिना अनुमान लगाने लायक कंट्रोल देती है.

उदाहरण के लिए, अगर कंटेनर का max-width सेट किया जाता है, तो मान लें कि 10ic पर सेट किया गया है. आपको पता है कि कंटेनर में ज़्यादा से ज़्यादा 10 पूरी चौड़ाई वाले ग्लिफ़ हो सकते हैं, चाहे फ़ॉन्ट-साइज़ कुछ भी हो. यहां दिए गए उदाहरण में इसके बारे में जानें:

grid-template-columns और grid-template-rows के लिए, इंटरपोलेशन के लिए सीएसएस ग्रिड सपोर्ट की सुविधा आ रही है. इसे 106 के लिए प्लान किया गया था, लेकिन अभी लॉन्च नहीं हो रहा है और इसे Chrome 107 में लॉन्च किया जाएगा. हालांकि, Chrome के बीटा वर्शन में इसे अब भी आज़माया जा सकता है. उदाहरण के लिए, Bramus का कोड यहां दिया गया है:

देखें

और ज़्यादा!

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

  • हम उपयोगकर्ता एजेंट को कम करने की योजना का पांचवें चरण शुरू कर रहे हैं.
  • एचटीटीपी2 पुश और स्थायी कोटा टाइप के साथ काम करने की सुविधा बंद की जा रही है.
  • सीएसएस प्रॉपर्टी hyphenate-character अब प्रीफ़िक्स के बिना उपलब्ध है.

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

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

सदस्यता लें

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

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