Interest Invokers और Command एट्रिब्यूट
घोषणात्मक क्रियाओं के लिए command और commandfor एट्रिब्यूट का अध्ययन करें
Interest Invokers और Command एट्रिब्यूट, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
दो उभरते हुए घोषणात्मक पैटर्न
ओपन यूआई समूह दो नई HTML विशेषताओं का मानकीकरण कर रहा है — क्लिक से शुरू होने वाली क्रियाओं के लिए command और हॉवर/फ़ोकस से शुरू होने वाली “रुचि” के लिए interesttarget (जो टूलटिप और पूर्वावलोकन का आधार है)। दोनों HTML में ऐसे घोषणात्मक व्यवहार जोड़ते हैं, जिनके लिए पहले JavaScript की आवश्यकता होती थी।
कमांड विशेषता
command="show-modal" और commandfor="dialog-id" वाला बटन बिना किसी JS के संवाद दिखाता है — इससे हाथ से किए जाने वाले dialog.showModal() कॉल की जगह यह सुविधा ले लेती है। अन्य कमांड हैं: command="close", command="toggle-popover" और command="show-popover"।
<button command="show-modal" commandfor="my-dialog">Open</button>
<dialog id="my-dialog">...</dialog>समर्थित कमांड
प्रारंभिक समूह आम यूआई पैटर्न पर केंद्रित है: संवाद दिखाना या छिपाना (अंतर्निहित <dialog>), पॉपओवर को टॉगल करना (पॉपओवर एपीआई), और समय के साथ इसमें और कमांड जुड़ सकते हैं। कस्टम तत्व oncommand इवेंट हैंडलर के माध्यम से घोषित कर सकते हैं कि वे कौन-से कमांड स्वीकार करते हैं।
कस्टम कमांड
अंतर्निहित कमांड के अलावा, विनिर्देश “--” से शुरू होने वाली कस्टम कमांड स्ट्रिंग की अनुमति देता है। लक्ष्य तत्व को JS में संभाले जा सकने वाला command इवेंट मिलता है: el.addEventListener("command", (e) => { if (e.command === "--save") save(); })।
रुचि-आह्वायक
interesttarget विशेषता किसी तत्व के “रुचि” लक्ष्य को चिह्नित करती है — आम तौर पर ऐसा टूलटिप, जो हॉवर या फ़ोकस करने पर दिखाई देता है। ब्राउज़र समय-निर्धारण (300 मिलीसेकंड का हॉवर-इरादा विलंब), स्थिति-निर्धारण (एंकर स्थिति-निर्धारण के साथ) और स्वतः बंद होने की प्रक्रिया संभालता है।
<button interesttarget="user-info">Profile</button>
<div id="user-info" popover="hint">Ada Lovelace — Admin</div>संकेत पॉपओवर के साथ संयोजन
संकेत पॉपओवर मोड रुचि होने पर दिखाई देने वाले टूलटिप-जैसे पॉपओवर के लिए बनाया गया है। ये गैर-मोडल होते हैं, फ़ोकस नहीं छीनते और रुचि समाप्त होने पर बंद हो जाते हैं। इंटरेस्टटार्गेट और संकेत पॉपओवर का संयोजन आपको केवल दो HTML विशेषताओं में मूल टूलटिप देता है।
सुलभता के लाभ
मूल संवाद फ़ोकस को सीमित रखते हैं; मूल पॉपओवर परतों का क्रम संभालते हैं; और मूल रुचि-आह्वायक हॉवर-इरादा समय-निर्धारण संभालने के साथ स्क्रीन रीडर को संबंधों की जानकारी देते हैं। कस्टम JS कार्यान्वयनों की जगह इन घोषणात्मक आधारभूत सुविधाओं का उपयोग करने से सुलभता की गुणवत्ता विश्वसनीय रूप से बेहतर होती है।
विनिर्देश की स्थिति
इन सुविधाओं का अभी भी मानकीकरण किया जा रहा है। विशेषताओं के सटीक नाम और कमांड का समूह बदल सकता है। ब्राउज़र कार्यान्वयन सबसे पहले क्रोमियम में दिखाई दे रहे हैं। व्यावहारिक उपयोग के लिए तब तक प्रतीक्षा करनी चाहिए, जब तक नाम स्थिर न हो जाएँ और कम से कम दो ब्राउज़र इन्हें उपलब्ध न करा दें — संभवतः अगले एक-दो वर्षों में।
JS पैटर्न का प्रतिस्थापन
इनमें से हर सुविधा उस JavaScript का स्थान लेती है, जिसे लाखों बार लिखा और फिर से लिखा गया है: संवाद प्रबंधन, पॉपओवर ट्रिगर और टूलटिप व्यवहार। इन पैटर्न को HTML में ले जाने से पृष्ठ का आकार घटता है, एकरूपता बेहतर होती है और ब्राउज़र अनुकूलन लागू कर सकता है।
स्रोत के रूप में ओपन यूआई
ओपन यूआई समुदाय समूह (open-ui.org) इस काम के बड़े हिस्से को आगे बढ़ाता है — नए HTML तत्वों और विशेषताओं का प्रस्ताव देकर, उनके प्रारूप बनाकर और मानकीकरण प्रक्रिया में उनका मार्गदर्शन करके। नवीनतम प्रस्तावों के लिए उनका ब्लॉग देखते रहें।
अन्य आधुनिक सुविधाओं से संबंध
कमांड, इंटरेस्टटार्गेट, पॉपओवर, संवाद, एंकर स्थिति-निर्धारण, दृश्य संक्रमण और अनुकूलन योग्य चयन सूचियाँ — ये सभी प्लेटफ़ॉर्म में घटक-लाइब्रेरी पैटर्न लाने के एक ही सुव्यवस्थित प्रयास का हिस्सा हैं। इनमें से हर सुविधा अलग-अलग छोटी है; साथ मिलकर ये वर्षों में HTML के यूआई शब्द-भंडार के सबसे बड़े विस्तार का प्रतिनिधित्व करती हैं।
अभी क्या करें
प्रस्तावों पर नज़र रखें (open-ui.org), फ़्लैग सक्षम करके क्रोमियम में प्रयोग करें और सुविधाओं के स्थिर होने पर उन्हें अपनाने की योजना बनाएँ। अपने मौजूदा कोडबेस की जाँच करें: गिनें कि संवाद, पॉपओवर और टूलटिप की जोड़-तोड़ के लिए कितना JS समर्पित है। अगले कुछ संस्करणों में उस कोड को हटाने का लक्ष्य है।
ज्ञान-जाँच
बटन पर कमांड विशेषता का उद्देश्य क्या है?
सारांश
दो उभरती हुई सुविधाएँ HTML के घोषणात्मक यूआई शब्द-भंडार का विस्तार करती हैं: क्लिक से शुरू होने वाली क्रियाओं (मोडल दिखाना, पॉपओवर टॉगल करना) के लिए कमांड + कमांडफ़ॉर और हॉवर/फ़ोकस से शुरू होने वाले टूलटिप के लिए इंटरेस्टटार्गेट + संकेत पॉपओवर। दोनों सामान्य JavaScript पैटर्न की जगह HTML विशेषताओं का उपयोग करती हैं, जिससे सुलभता बेहतर होती है और बंडल का आकार घटता है। ये सुविधाएँ अभी विकसित हो रही हैं; स्थिरता पर नज़र रखने के लिए ओपन यूआई को देखें और ब्राउज़र समर्थन आने पर इन्हें उपलब्ध कराएँ।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “Interest Invokers और Command एट्रिब्यूट” पाठ निःशुल्क है?
हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Interest Invokers और Command एट्रिब्यूट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Interest Invokers और Command एट्रिब्यूट” में मैं क्या सीखूँगा?
घोषणात्मक क्रियाओं के लिए command और commandfor एट्रिब्यूट का अध्ययन करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Interest Invokers और Command एट्रिब्यूट” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Declarative Shadow DOM
- Popover API
- selectlist एलिमेंट
- Interest Invokers और Command एट्रिब्यूट