एलिमेंट में सुझाए गए सुधार

Thomas Steiner

पब्लिश किया गया: 12 मई, 2025

सुझाया गया एचटीएमएल <permission> एलिमेंट अब भी ऑरिजिन ट्रायल में है. Chrome की टीम इसे बेहतर बना रही है. यह हमारे शुरुआती ऑरिजिन ट्रायल में तय किए गए बुनियादी सिद्धांतों पर आधारित है. इस पोस्ट में, वेब ऐप्लिकेशन में अनुमतियों का अनुरोध करते समय, आपको ज़्यादा सुविधाएं और कंट्रोल देने के लिए किए गए सुधारों के बारे में बताया गया है. <permission> एलिमेंट के बारे में ज़्यादा जानने के लिए, हमारा पिछला लेख An origin trial for a new HTML <permission> element पढ़ें. इसमें <permission> एलिमेंट के बारे में जानकारी दी गई है. साथ ही, इसकी शुरुआती क्षमताओं के बारे में भी बताया गया है.

फ़ॉलबैक यूज़र एक्सपीरियंस के लिए कॉन्टेंट से जुड़ी सहायता

Chrome 136 तक, <permission> एलिमेंट को बिना कॉन्टेंट वाले वॉइड एलिमेंट के तौर पर तय किया गया था. Chrome 137 से, यह कॉन्टेंट के साथ काम करता है. इसका मतलब है कि अब इसे ओपनिंग और क्लोज़िंग टैग के साथ मार्क अप करना ज़रूरी है:

<permission>
  <!-- optional content -->
</permission>

इस बदलाव की मदद से, एलिमेंट के कॉन्टेंट में फ़ॉलबैक यूज़र इंटरफ़ेस शामिल किए जा सकते हैं. ये फ़ॉलबैक, उन ब्राउज़र में दिखते हैं जो <permission> एलिमेंट के साथ काम नहीं करते. इसके अलावा, ये तब भी दिखते हैं, जब type एट्रिब्यूट का इस्तेमाल किया जाता है. इससे अलग-अलग ब्राउज़र एनवायरमेंट में, बेहतर तरीके से काम न करने की समस्या को कम किया जा सकता है. साथ ही, उपयोगकर्ताओं को बेहतर अनुभव दिया जा सकता है.

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

प्रोग्राम के हिसाब से, सुविधाओं का पता लगाने की ज़्यादा जानकारी

हमने एक स्टैटिक मेथड, isTypeSupported() लॉन्च की है. इससे आपको यह तय करने में मदद मिलेगी कि अनुमति के कुछ खास टाइप के लिए, सहायता उपलब्ध है या नहीं:

HTMLPermissionElement.isTypeSupported('geolocation');

यह तरीका एक बूलियन वैल्यू दिखाता है. इससे पता चलता है कि अनुमति का तय किया गया टाइप काम करता है या नहीं. मौजूदा सुविधा का पता लगाने वाली सुविधा typeof HTMLPermissionElement !== 'undefined' के साथ मिलकर, अब प्रोग्राम के हिसाब से यह पक्का किया जा सकता है कि <permission> एलिमेंट और अनुमति के खास टाइप, दोनों के लिए सहायता उपलब्ध है.

ध्यान दें कि स्पेस से अलग किए गए एक से ज़्यादा तरह के अनुमति टाइप भी पास किए जा सकते हैं (उदाहरण के लिए, "camera microphone"). इससे यह पता चलेगा कि पूरी स्ट्रिंग, "type" की मान्य वैल्यू है या नहीं. उदाहरण के लिए, इन पैरामीटर के साथ isTypeSupported() को कॉल करने पर, ये नतीजे मिलते हैं:

• "camera" → true
• "geolocation" → true
• "camera geolocation" → false (भले ही, दोनों टाइप अलग-अलग इस्तेमाल किए जा सकते हों, लेकिन इन्हें एक साथ इस्तेमाल नहीं किया जा सकता.)

इवेंट के अपडेट किए गए नाम

Chrome 136 में, हमने पहले से मौजूद इवेंट की जगह दो नए इवेंट लॉन्च किए हैं:

• onpromptdismiss (ondismiss की जगह लेता है)
• onpromptaction (onresolve की जगह लेता है)

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

आइकॉन के लिए सहायता

हम <permission> एलिमेंट में आइकॉन इस्तेमाल करने की सुविधा चालू करने पर काम कर रहे हैं. यह सुविधा Chrome 138 में उपलब्ध होगी. इस सुविधा की मदद से, अनुमति के टाइप के हिसाब से पहले से तय किए गए आइकॉन दिखाए जा सकेंगे. साथ ही, स्टाइलिंग के सीमित विकल्प भी उपलब्ध होंगे. जैसे, रंग और साइज़ में बदलाव करना. एपीआई की सटीक जानकारी को अब भी अंतिम रूप दिया जा रहा है. 

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

डिफ़ॉल्ट स्टाइल

आइकॉन का डिफ़ॉल्ट रंग, अनुमति वाले एलिमेंट के टेक्स्ट के रंग जैसा होता है.

बदली गई स्टाइलिंग

यहां दिए गए उदाहरणों में, डिफ़ॉल्ट स्टाइल में किए गए बदलावों के बारे में बताया गया है.

आइकॉन का रंग बदलना

::permission-icon {
  fill: black;
}

आइकॉन की आउटलाइन में बदलाव

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

आइकॉन बंद करना

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

::permission-icon {
  display: none;
}

शैली संबंधी दिशानिर्देश

<permission> एलिमेंट को स्टाइल करने के बारे में पूरी जानकारी के लिए, <permission> स्टाइल करने से जुड़े दिशा-निर्देश देखें. इसमें सबसे सही तरीके और पाबंदियां भी शामिल हैं. इस संसाधन में, आपके ऐप्लिकेशन में मौजूद एलिमेंट को बेहतर तरीके से स्टाइल करने के बारे में ज़्यादा जानकारी दी गई है.

प्लैटफ़ॉर्म और सुविधाओं के लिए बेहतर सहायता

<permission> एलिमेंट अब इन प्लैटफ़ॉर्म और सुविधाओं के साथ काम करता है:

• Android पर काम करता है: अब यह एलिमेंट Android डिवाइसों पर काम करता है. इससे, अलग-अलग प्लैटफ़ॉर्म पर इसका इस्तेमाल किया जा सकता है.
• जियोलोकेशन की सुविधा: अब preciselocation बूलियन एट्रिब्यूट के साथ <permission> एलिमेंट का इस्तेमाल करके, type="geolocation" अनुमतियों का अनुरोध किया जा सकता है. preciselocation एट्रिब्यूट से सिर्फ़ प्रॉम्प्ट के शब्दों पर असर पड़ता है. हालांकि, हम आने वाले समय में होने वाले अपडेट में, जगह की सामान्य और सटीक जानकारी की अनुमतियों के बीच अंतर करने पर काम कर रहे हैं.

मीटिंग में सामने आए नतीजे

<permission> एलिमेंट में किए गए ये सुधार, अनुमति के अनुरोधों को आसान बनाने और वेब पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, हमारी लगातार की जा रही कोशिशों का हिस्सा हैं. हमारा सुझाव है कि आप इन नई सुविधाओं का इस्तेमाल करके देखें और सुझाव/राय दें या शिकायत करें. इससे हमें इस सुविधा को बेहतर बनाने में मदद मिलेगी.