Chrome 106 में नया

Pete LePage
Adriana Jara

यहां आपके जानने योग्य तथ्य दिए गए हैं:

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

मेरा नाम पीट लेपेज है और मैं एड्रियाना जारा हूं. आइए, इस बारे में ज़्यादा जानें कि Chrome 106 में डेवलपर के लिए क्या नया है.

नए इंटरनैशनल एपीआई

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%

ज़्यादा जानकारी के लिए, MDN पर इंटरनैशनल नंबर फ़ॉर्मैट के दस्तावेज़ देखें.

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

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

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

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

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

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

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

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

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

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

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

यह एक ऐसी यूनिट है जिसे टेक्स्ट का साइज़ तय करने के लिए डिज़ाइन किया गया है. इससे, टेक्स्ट को पढ़ने में आसानी हो जाती है. साथ ही, टेक्स्ट के साइज़ के बावजूद, इस पर आसानी से कंट्रोल किया जा सकता है.

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

देखें

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

देखें

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

इसके अलावा, और भी कई चीज़ें हैं.

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

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

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

सदस्यता लें

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

नमस्ते, मैं अड्रिआना जारा हूं. Chrome 107 रिलीज़ होने के बाद, मैं आपको बताऊंगी कि Chrome में नया क्या है!