- वेब पर JS-निर्भर फीचर्स को HTML/CSS से बदलने के आधुनिक तरीकों का परिचय
details·summary, datalist, popover जैसे standard elements का उपयोग करके accordion, autocomplete, modal और offscreen navigation लागू करना- यह तरीका download·evaluation·memory usage को कम करके performance और user experience को बेहतर बनाता है
- हर फीचर के लिए CodePen उदाहरण, MDN docs, browser compatibility जानकारी साथ में दी गई है
- JS का उपयोग केवल वहीं करना चाहिए जहाँ उसकी वास्तव में ज़रूरत हो, और HTML/CSS की विकसित क्षमताओं का सक्रिय उपयोग करना चाहिए
HTML और CSS से JS फीचर्स का विकल्प
- लंबे समय तक JavaScript उन फीचर्स के लिए ज़िम्मेदार रहा है जिन्हें HTML और CSS से लागू नहीं किया जा सकता था
- लेकिन HTML और CSS की क्षमताएँ बढ़ने के साथ, कुछ JS फीचर्स को अब native web technologies से बदला जा सकता है
- JS को download, decompress, evaluate और memory में बनाए रखना पड़ता है, इसलिए जहाँ संभव हो फीचर्स को HTML/CSS में स्थानांतरित करना अधिक प्रभावी है
- दिशा यह है कि JS जटिल logic पर फोकस करे, और सरल UI control को HTML/CSS को सौंप दिया जाए
Accordion / expandable content panel
details और summary elements से बिना JS के accordion बनाया जा सकता है
- content को click करके खोला और बंद किया जा सकता है, और
open attribute से default state तय होती है
- एक ही
name attribute इस्तेमाल करने पर एक समय में केवल एक panel खुला रहेगा
- CSS से styling की जा सकती है या JS से open/close state को control भी किया जा सकता है
- संबंधित सामग्री: MDN
details docs, CodePen उदाहरण, browser compatibility table
Autocomplete suggestion input
input और datalist के संयोजन से auto-filtering dropdown बनाया जा सकता है
- टाइप करते समय suggestion list अपने आप filter होती है
- text के अलावा
number, time जैसे कई input types भी समर्थित हैं
- Firefox अभी केवल text-based input को support करता है, और mobile accessibility की कुछ सीमाएँ हैं
- संबंधित सामग्री: MDN
datalist docs, SitePoint tutorial, browser compatibility table
Modal / popover
popover और popovertarget attributes से बिना JS के modal और popover लागू किए जा सकते हैं
auto, hint, manual ये तीन modes उपलब्ध हैंauto बाहरी click या ESC से बंद हो जाता है, जबकि manual केवल manually बंद होता है
- Firefox और iOS में
hint mode समर्थित नहीं है
- संबंधित सामग्री: MDN
popover docs, Chrome blog, CodePen उदाहरण, accessibility से जुड़ा वीडियो
Offscreen navigation / content
popover फीचर का उपयोग करके offscreen navigation menu बनाया जा सकता है
- अर्थपूर्ण संरचना के लिए
nav element का उपयोग, और CSS translate से उसे स्क्रीन के अंदर-बाहर ले जाना
- बाहरी click पर यह बंद हो जाता है, और
popover="manual" से manual close सेट किया जा सकता है
::backdrop pseudo-element से background को semi-transparent बनाया जा सकता है
- संबंधित सामग्री: MDN Popover API, Chrome blog, CodePen उदाहरण
निष्कर्ष
- JS की ताकत को मानते हुए भी, इसे केवल ज़रूरी जगहों पर ही इस्तेमाल करना चाहिए
- हालिया HTML/CSS प्रगति के कारण JS-रहित कई विकल्प उभरकर आए हैं
- और अधिक उदाहरण लेखक की ब्लॉग पोस्ट “Replace JS with No-JS or Lo-JS Options” में देखे जा सकते हैं
- JS को न्यूनतम रखना और performance optimization के ज़रिए user experience बेहतर बनाने पर ज़ोर
अभी कोई टिप्पणी नहीं है.