🌠 🧓🏿 🐪 उपयोगी HTML, सीएसएस, और जावास्क्रिप्ट तकनीक 🔦 🤞 🐅

तकनीक कार्य के साथ सामना करने का एक तरीका है, और हम, डेवलपर्स और फ्रंट-एंड के डिजाइनरों में इन विधियों का एक बहुत कुछ है। उसी समय, नियमित काम में डूबे रहने के कारण, हम कभी-कभी यह ध्यान नहीं देते हैं कि हमारे आसपास का क्षेत्र कितनी तेजी से बदल रहा है। 2002 से 2010 की अवधि में, फ्रंट-एंड डेवलपर्स का समुदाय वस्तुतः निरर्थक कोड और संसाधनों के अल्सर द्वारा कवर किया गया था, जिसमें से साइटों के काम और उनके उपयोग की सुविधा दोनों का सामना करना पड़ा। इससे निपटने के लिए, हम एक टन हैक्स, ट्रिक्स और ट्रिक्स, कोड-नामित "तकनीक" के साथ आए। हम अपने द्वारा सौंपे गए कार्यों को पूरा करना जारी रखते हैं, हम सिर्फ सबसे प्रभावी तरीकों का उपयोग नहीं करते हैं।

पीछे मुड़कर, हम ध्यान दें कि पिछले कुछ वर्षों में, उनके आवेदन के लिए नए, बेहतर मानकों और तरीकों को स्थापित किया गया है, जिससे हम अधिक उन्नत "तकनीक" बना सकते हैं। हमारे सामने खोली गई इस नई दुनिया को "आधुनिक वेब" कहा जाता है। वेब 2.0, जो अपने समय में प्रशंसित थी, आज हमारे लिए भ्रामक और स्थिर हो गई है। एक ओर, इसमें कोई संदेह नहीं है कि इसी तरह के भाग्य को "आधुनिक वेब" कहा जाता है। दूसरी ओर, अब तक हम इस शब्द का उपयोग कर सकते हैं और इसका दुरुपयोग कर सकते हैं जितना हम चाहते हैं, जबकि हम समझते हैं कि इसका क्या मतलब है।

HTML5 को 2010 में पेश किया गया था, जो पूरी तरह से नया, अर्ध-मानकीकृत वेब वातावरण प्रदान करता है। ओपेरा, फ़ायरफ़ॉक्स, क्रोम और सफारी जैसे ब्राउज़रों ने नवाचारों को स्वीकार कर लिया है, और उनके डेवलपर्स मानकों को लागू करने और एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस की खोज से परे चले गए हैं। कल्पना करने के लिए कि ये ब्राउज़र कितने स्वायत्त हैं, आप www.HTML5readiness.com पर HTML5 समर्थन का एक उत्कृष्ट दृश्य डेमो देख सकते हैं।

अब आप Google Chrome फ़्रेम के लिए इंटरनेट एक्सप्लोरर से जुड़ी कठिनाइयों को दरकिनार कर सकते हैं। जब से Google ने इसे 2010 में पेश किया, तब से Google Chrome फ़्रेम Internet Explorer में HTML5 समर्थन के लिए सबसे लोकप्रिय ऐड-ऑन बन गया है। IE के सभी संस्करणों में, आप Chrome फ़्रेम जोड़ सकते हैं, जिसके लिए यह हमारी साइट के <head> टैग में अगला <meta> टैग जोड़ने के लिए पर्याप्त है।

<meta http-equiv="X-UA-Compatible" content=" chrome=1" />

निम्नलिखित कोड का उपयोग करते हुए, हम IE उपयोगकर्ताओं की पेशकश कर सकते हैं जिनके पास अभी तक जावास्क्रिप्ट का उपयोग करके इसे डाउनलोड करने के लिए ऐड-ऑन नहीं है:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <script> window.onload = function(){ CFInstall.check({ mode: "overlay", destination: "http://www.yourdomain.com" }); }; </script>

शायद आपको याद है कि आपको प्रत्येक विशेष ब्राउज़र के लिए ट्रिक्स का एक गुच्छा कैसे प्राप्त करना था ताकि आपकी वेबसाइट उनमें अच्छी तरह से प्रदर्शित हो, कट छवियों के साथ अनगिनत खाली तत्व बनाएं, यह सुनिश्चित करने के लिए विस्तृत और यहां तक कि अनावश्यक जावास्क्रिप्ट कोड लिखें जो सबसे सरल कार्यक्षमता काम करता है। एक अर्थ में, हम अब उसी समस्याओं से पीड़ित हैं। हम अभी भी पूर्ण नियंत्रण के लिए संघर्ष कर रहे हैं, प्लेसमेंट, शैली और कार्यक्षमता को "कसने" के लिए सर्वोत्तम उपकरणों की तलाश कर रहे हैं, बस आज यह पहले से ही एक अलग स्तर पर हो रहा है।

Www.html5readiness.com से एक इन्फोग्राफिक यह दर्शाता है कि ब्राउज़र HTML5 और CSS3 गुणों का समर्थन कैसे करते हैं।

स्थान

clearfix

फ्लोट संपत्ति को सीएसएस 2.1 में वापस पेश किया गया था, लेकिन यह वह रामबाण नहीं बन पाया जिसकी हमें उम्मीद थी। मुख्य समस्याओं में से एक अस्थायी बच्चे के साथ माता-पिता के आकार को बनाए रखना है। इसे हल करने के लिए, क्लीयरफिक्स नामक एक हैक का आविष्कार किया गया था। निम्नलिखित HTML लें:

 <div class="wrapper clearfix"> <div class="left">...</div> <div class="right">...</div> </div>

हैक निकोलस गैलाघेर द्वारा लिखा गया था:

 .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }

>> यदि आप अपनी परियोजनाओं को विकसित करने के लिए HTML5Boilerplate का उपयोग करते हैं, तो यह तकनीक पहले से ही पर्यावरण में एकीकृत है।

बॉक्स आकार

डेवलपर्स सालों से इस बात पर बहस कर रहे हैं कि कौन सा बॉक्स बेहतर है। क्वर्क्स और मानक मोड के बीच टकराव वास्तव में एक प्रश्न में निहित है: स्थापना और भरने के दौरान स्थापना के बाद एक तत्व के आयाम को बदलना चाहिए, या नहीं। अब हर कोई मूल रूप से सहमत है कि यह तत्व के अंदर उपलब्ध स्थान के हिस्से के रूप में सीमाओं को गिनने और भरने के लिए समझ में आता है, न कि उन्हें इसकी चौड़ाई और ऊंचाई में जोड़ें।

हालांकि, बक्से के आकार को बदलने के लिए हैक के व्यापक उपयोग के साथ, इस विवाद ने अपनी प्रासंगिकता खो दी है। अब ब्राउज़र आपकी लीड का अनुसरण करेगा, न कि इसके विपरीत। क्रिस कोएर और पॉल आयरिश द्वारा विकसित इस बहुमुखी तकनीक को निम्नानुसार लागू किया जा सकता है:

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

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

मल्टी कॉलम

लेखन और मुद्रण की परंपरा ने इंटरनेट पर पाठ्य सूचनाओं के प्रदर्शन को बहुत प्रभावित किया, लेकिन यह दुर्भाग्य था: इस मामले में, वह अभी भी चर्मपत्र के चरण में फंस गया था। लंबे समय से प्रतीक्षित Paged-Media और CSS क्षेत्र के मानकों की शुरूआत के बाद कुछ समस्याओं को हल किया जा सकता है। यद्यपि यह कहा जाना चाहिए कि जब सीएसएस बहु-स्तंभों को लागू करना शुरू किया गया था, तो "एक पत्रिका की तरह" स्थानों के साथ पहला कदम उठाया गया था। ऐसा प्रभाव बनाने के लिए आवश्यक कोड बहुत सरल है:

 p { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

आकार की गणना

तत्वों के आकार की गणना करना मुश्किल हो सकता है। पहले, हमारे पास लेआउट में उपयोग की जाने वाली इकाइयों की गणना के लिए कोई उपकरण नहीं थे, मिश्रित इकाइयों की गणना का उल्लेख नहीं करने के लिए, लेकिन सब कुछ कैल्क के लिए धन्यवाद बदल गया। यह एक भरण बनाता है जो तत्वों की मूल चौड़ाई को प्रभावित नहीं करता है और बॉक्स-साइज़िंग जैसी किसी भी चीज़ का उपयोग नहीं करता है: बॉर्डर-बॉक्स; हाल तक तक, यह केवल अतिरिक्त तत्वों को जोड़कर संभव था।

 .padded { margin: 0 auto; position: relative; width: -webkit-calc(100% - (20px * 2)); width: -moz-calc(100% - (20px * 2)); width: calc(100% - (20px *2)); }

>> कैल्क () मूल तत्व शून्य की चौड़ाई के आधार पर चौड़ाई की सही गणना करने का ध्यान रखता है जो २० पीएक्स पर एक विशिष्ट भरण करता है। मैंने तत्व 2 के प्रत्येक पक्ष के लिए इसे दो से गुणा किया, सापेक्ष स्थिति का उपयोग करते हुए तत्व को केंद्रित किया, और स्वचालित बाएं और दाएं फ्रेम सेट किया।

शैलियों

पारदर्शिता

सही शैली में एक तत्व बनाना हमेशा सीएसएस में उपलब्ध उपकरणों पर निर्भर करता था। पारदर्शिता पहले समर्थित गुणों में से एक है जो आपको 2000 के दशक के मध्य में मिलेंगे। HTML5 के आगमन और अधिक प्रभावी मानकीकरण के साथ, ब्राउज़र ने डिफ़ॉल्ट ऑप्सिटी गुण को लागू करना शुरू कर दिया, और नए रंग मॉड्यूल मानक के रूप में अल्फा चैनल के लिए समर्थन किया। इसमें RGBA और HSLA मॉडल के लिए मैनुअल भी शामिल हैं।

 a { color: rgba(0,255,0,0.5); background: rgba(0,0,255,0.05); border: rgba(255,0,0,0.5); }

>> RGBA और HSLA कलर मॉडल हमेशा HEX मान के साथ उपयोग किए जा सकते हैं। वहां आपको दिलचस्प रंगों और विशिष्ट नामों की एक लंबी सूची मिलेगी, जिन्हें इस मानक में देखा जा सकता है। वे तत्वों का एक गतिशील मिश्रण बनाने के लिए उपयोगी होते हैं।

फिल्टर

CSS में फ़िल्टर के साथ काम करना बहुत दिलचस्प है। पृष्ठ पर तत्वों के रूप और स्वरूप को गतिशील रूप से बदलने की क्षमता होने से बाहर से कोई एक्स्ट्रा कलाकार आश्चर्यजनक नहीं है, इसके अलावा, फ़ोटोशॉप के साथ बिताए समय को काफी कम करना संभव होगा।

 <img src="market.jpg">

 img { -webkit-filter: grayscale(100%); }

>> सीएसएस फिल्टर अब तक केवल वेबकिट इंजन पर आधारित ब्राउज़रों में समर्थित हैं, इसलिए अब मुख्य टूल के बजाय इसे अतिरिक्त के रूप में उपयोग करना बेहतर है। फ़िल्टर के बारे में अधिक यहाँ पढ़ें।

CSS फ़िल्टर आपको ब्राउज़र में सीधे पृष्ठों पर छवियों को परिष्कृत करने की अनुमति देता है। उपलब्ध फ़िल्टरों के सेट के और अधिक उदाहरण यहाँ देखे जा सकते हैं ।

छवि प्रतिस्थापन

इस तकनीक का उपयोग लंबे समय से किया गया है, लेकिन, दुर्भाग्य से, यहां तक कि नवीनतम और सबसे परिष्कृत प्रतिस्थापन तकनीक भी कमियां के बिना नहीं हैं। हालांकि, हाल ही में दो अद्भुत तरीके लोकप्रिय हो गए हैं, जिनमें से प्रत्येक अपने तरीके से अद्वितीय है। इनमें से पहला स्कॉट केलमैन द्वारा लिखा गया था:

 <h1 class='hide-text'>My Website's Logo</h1>

 .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }

दूसरी विधि के निर्माता निकोलस गैलाघेर हैं :

 .hide-text { font: 0/0 a; text-shadow: none; color: transparent; }

स्कॉट केलमैन और निकोलस गैलाघर द्वारा छवि स्विचिंग विधि

उत्तरदायी वीडियो

अनुकूली लेआउट में श्रव्य तत्वों को सही पैमाने पर प्रकट करना काफी कठिन है। अब जब अधिक से अधिक साइटों में एक स्व-ट्यूनिंग डिज़ाइन है, तो यह सुनिश्चित करने के लिए ध्यान रखा जाना चाहिए कि तत्वों और रिज़ॉल्यूशन का आकार सही ढंग से है। एंबेडेड वीडियो इस तथ्य के कारण ऑडियोविज़ुअल मीडिया के सबसे "जिद्दी" प्रकारों में से एक है कि अतिरिक्त सर्वर सामग्री प्रदान करते हैं। एक विशिष्ट YouTube वीडियो एम्बेड करना कुछ इस तरह दिखता है:

 <div class="video"> <iframe width="640" height="390" src="http://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen=""></iframe> </div>

>> "रैपिंग" एक अन्य तत्व में एक आइफ्रेम हमें अनुकूलन क्षमता को लागू करने की अनुमति देगा जो हमें चाहिए।

 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

>> इस पद्धति का आधार आवरण के पेडिंग-नीचे वीडियो सेट कर रहा है: 56.25%; पैडिंग का उपयोग करने का अर्थ है कि प्रतिशत मूल तत्व की चौड़ाई के आधार पर होगा; '56, 25% 'हमें 16: 9 का संकल्प देगा। आप चाहें तो खुद को गिनें। 9/16 = 0.5625। 0.5625 * 100 = 56.25 (प्रतिशत में हमारा मूल्य)।

कार्यक्षमता

सरल आइटम चयन

कुछ जावास्क्रिप्ट पुस्तकालयों (जैसे jQuery) की बढ़ती लोकप्रियता के साथ, ECMAScript समिति और W3C मानक आयोग ने कार्यक्षमता में मूलभूत विवरणों में से एक का उल्लेख किया जिसमें डेवलपर्स ने शुरू में कमी की थी: तत्वों की पसंद। GetElementByID () और getElementsByClassName () जैसे तरीके तेज़ हैं, लेकिन विकास समुदाय से चयनकर्ता इंजन के रूप में लचीले और विश्वसनीय नहीं हैं; मानकीकरण समिति ने इस लचीलेपन को मूल चयनकर्ता विधि में querySelectorAll () के रूप में अनुकरण किया।

 var items = document.querySelectorAll('#header .item');

>> querySelectorAll () एक ही समय में विभिन्न और कई चयनकर्ताओं के साथ काम कर सकता है। इसके बारे में यहाँ और पढ़ें।

नए डेटासेट बनाना

सरणी तत्वों की गणना लिखने के लिए बहुत थकाऊ हो गई है। () छोरों के लिए लेखन और पुनर्लेखन, स्पष्ट रूप से, उबाऊ है। जेएस संस्करण 1.6 में, नक्शा () विधि दिखाई दी है, जो सरणी के आसान खोज और इसके आधार पर एक नए सरणी के निर्माण का समर्थन करती है।

 var people = ['Heather','James','Kari','Kevin']; var welcomes = people.map(function(name){ return 'Hi ' + name + '!'; });

जब आप इस कोड को कंसोल.लॉग (स्वागत करता है) फ़ंक्शन का उपयोग करते हैं, तो आप नए ऐरे [Hi हाय हीदर! ’,! हाय जेम्स!’, K हाय कारी! ’, Kevin हाय केविन’ में अभिवादन देखेंगे। ]।

दस्तावेजों की "सफाई"

व्यक्तिगत जावास्क्रिप्ट लाइब्रेरी अक्सर ब्राउज़र विंडो में स्रोत दस्तावेज़ और ऑब्जेक्ट के साथ हस्तक्षेप करती हैं। यह अन्य व्यक्तिगत पुस्तकालयों के साथ-साथ डेवलपर के लिए भी असुविधाजनक हो सकता है। किसी भी स्थिति में, प्रत्येक की एक नई प्रति बनाकर सभी वस्तुओं के "स्वच्छ" संस्करणों के साथ खुद को प्रदान करने का प्रयास करें। ऐसा करने का सबसे अच्छा तरीका एक आइफ्रेम तत्व बनाना है, इसे डोम मॉडल में डालें, और इन वस्तुओं की नई प्रतियां संग्रहीत करें।

 var iframe = document.createElement('iframe'); iframe.style.display = "none"; iframe = document.body.appendChild(iframe); var _window = iframe.contentWindow; var _document = iframe.contentDocument || iframe.contentWindow.document; document.body.removeChild(iframe);

हालाँकि सर्वर सॉफ़्टवेयर में कई सुधार किए गए हैं, लेकिन हमारी परियोजनाओं के स्थान, शैली और कार्यक्षमता के प्रकाश में हमारे द्वारा किए जाने वाले कार्यों के अनुसार अपनी तकनीकों को पूरक और पूरा करना जारी रखना बहुत महत्वपूर्ण है। पारिस्थितिकी तंत्र की वृद्धि और विकास का समर्थन करने के लिए, मानकीकरण समितियों और ब्राउज़र निर्माताओं को आगे बढ़ने, नए मानकों का प्रस्ताव करने और नई सुविधाओं को लागू करने, अन्य डेवलपर्स और डिजाइनरों के साथ ज्ञान साझा करने के लिए प्रोत्साहित करने की आवश्यकता है। अधिक समझ, एक नखरे के साथ कम नृत्य।

लेख अनुवाद: आवश्यक HTML, सीएसएस और जावास्क्रिप्ट तकनीक

उपयोगी HTML, सीएसएस, और जावास्क्रिप्ट तकनीक