HTML और CSS लिखते समय 6 सबसे आम गलतियाँ डेवलपर्स करते हैं

नमस्कार, हेब्र! मैं आपको Stas Melnikov द्वारा HTML और CSS लिखते समय " 6 सबसे सामान्य गलतियों वाले डेवलपर्स " लेख का अनुवाद प्रस्तुत करता हूं।

लेबल तत्व के बजाय प्लेसहोल्डर विशेषता का उपयोग करना

अक्सर, डेवलपर लेबल तत्व के बजाय प्लेसहोल्डर विशेषता का उपयोग करते हैं। लेकिन इस मामले में, स्क्रीन रीडर उपयोगकर्ता (स्क्रीन रीडर) खेतों में नहीं भर सकते हैं, क्योंकि स्क्रीन रीडर प्लेसहोल्डर विशेषता से पाठ नहीं पढ़ सकता है।

<input type="email" placeholder="Enter your email"> 

इसलिए, मैं नाम फ़ील्ड और प्लेसहोल्डर विशेषता उदाहरण डेटा के लिए लेबल तत्व का उपयोग करने की सलाह देता हूं जिसे उपयोगकर्ता को भरना होगा।

 <label> <span>Enter your email</span> <input type="email" placeholder="eg example@gmail.com"> </label> 

सजावटी ग्राफिक्स बिछाने के लिए img तत्व का उपयोग करना

मैं अक्सर डेवलपर्स को सामग्री चित्रों के साथ सजावटी ग्राफिक्स को भ्रमित करते हुए देखता हूं। उदाहरण के लिए, वे img तत्व का उपयोग करके सामाजिक चिह्न को चिह्नित करते हैं।

 <a href="https://twitter.com" class="social"> <img class="social__icon" src="twitter.svg" alt> <span class="social__name">Twitter</span> </a> 

लेकिन सोशल नेटवर्क आइकन एक सजावटी आइकन है जो उपयोगकर्ताओं को पाठ को पढ़े बिना किसी तत्व के अर्थ को जल्दी समझने में मदद करता है। यदि हम आइकन को हटाते हैं, तो हम तत्व का मूल्य नहीं खोते हैं, इसलिए हम इसके लिए पृष्ठभूमि-छवि संपत्ति का उपयोग कर सकते हैं।

 <a href="https://twitter.com" class="social"> <span class="social__name">Twitter</span> </a> 

 .social::before { background-image: url("twitter.svg"); } 

रिसाइज़ प्रॉपर्टी का उपयोग करना

जब रिसाइज़ प्रॉपर्टी का उपयोग करके टेक्स्ट क्षेत्र का आकार बदलना अक्षम हो जाता है, तो एक्सेसिबिलिटी ख़राब हो जाती है। इस प्रकार, उपयोगकर्ता एक सुविधाजनक तरीके से डेटा दर्ज नहीं कर सकता है।

 textarea { width: 100%; height: 200px; resize: none; } 

आप गुण-चौड़ाई, अधिकतम-चौड़ाई, न्यूनतम-ऊँचाई और अधिकतम-ऊँचाई का उपयोग कर सकते हैं, जो तत्व के आकार को सीमित करता है, और उपयोगकर्ता एक सुविधाजनक तरीके से फ़ील्ड भर सकता है।

 textarea { min-width: 100%; max-width: 100%; min-height: 200px; max-height: 400px; } 

प्रदर्शन का उपयोग करना: ब्लॉक और स्थिति: एक साथ पूर्ण (निश्चित)।

मैं अक्सर देखता हूं कि डेवलपर्स प्रदर्शन और स्थिति गुणों का उपयोग इस प्रकार करते हैं:

 .button::before { content: ""; display: block; position: absolute; top: 0; left: 0; } 

लेकिन ब्राउज़र डिफ़ॉल्ट ब्लॉक वैल्यू सेट करता है। इसलिए, आपको पूर्ण या निश्चित स्थिति वाले तत्वों के लिए इस मान को जोड़ने की आवश्यकता नहीं है। इसलिए, निम्न कोड पिछले एक के समान परिणाम देता है।

 .button::before { content: ""; position: absolute; top: 0; left: 0; } 

संरचना संपत्ति का कोई मूल्य नहीं

मैं कीबोर्ड का उपयोग करके वेबसाइट के साथ काम नहीं कर सकता। मैं लिंक का अनुसरण नहीं कर सकता। मैं पंजीकरण नहीं करा सकता। ऐसा इसलिए है क्योंकि डेवलपर्स तत्वों पर ध्यान केंद्रित करते हैं जब वे आउटलाइन प्रॉपर्टी में कोई भी नहीं जोड़ते हैं।

 .button:focus { outline: none; } /* or */ .button:focus { outline: 0; } 

यदि आपको डिफ़ॉल्ट रूप से फ़ोकस बंद करने की आवश्यकता है, तो वैकल्पिक फ़ोकस की स्थिति बनाना सुनिश्चित करें।

 .button:focus { outline: none; box-shadow: 0 0 3px 0 blue; } 

खाली आइटम

अक्सर, डेवलपर्स स्टाइल तत्वों के लिए खाली HTML तत्वों का उपयोग करते हैं। उदाहरण के लिए, खाली div या स्पैन तत्वों का उपयोग करके हैमबर्गर मेनू को चिह्नित करना:

 <button class="hamburger"> <span></span> <span></span> <span></span> </button> 

 .hamburger { width: 60px; height: 45px; position: relative; } .hamburger span { width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 18px; } .hamburger span:nth-child(3) { top: 36px; } 

लेकिन आप छद्म तत्वों का उपयोग कर सकते हैं :: पहले और बाद में और इसी तरह के परिणाम प्राप्त करते हैं।

 <button class="hamburger"> <span class="hamburger__text"> <span class="visually-hidden">Open menu</span> </span> </button> 

 .hamburger { width: 60px; height: 45px; position: relative; } .hamburger::before, .hamburger::after, .hamburger__text::before { content: ""; width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger::before { top: 0; } .hamburger::after { top: 18px; } .hamburger__text::before { top: 36px; } .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px !important; height: 1px !important; overflow: hidden; }